@djangocfg/layouts 2.0.8 → 2.0.10

package/src/snippets/McpChat/hooks/useChatLayout.ts

@@ -1,16 +1,21 @@
 'use client';
 
-import { useEffect, useCallback, useRef } from 'react';
+import { useEffect, useCallback, useRef, useState } from 'react';
+import { useLocalStorage } from '@djangocfg/ui/hooks';
 import type { ChatDisplayMode } from '../types';
+import { sidebarConfig, fabConfig, storageKeys } from '../config';
+
+// Re-export for convenience
+export const MIN_SIDEBAR_WIDTH = sidebarConfig.minWidth;
+export const MAX_SIDEBAR_WIDTH = sidebarConfig.maxWidth;
+export const DEFAULT_SIDEBAR_WIDTH = sidebarConfig.defaultWidth;
 
 /**
  * Configuration for chat layout management
  */
 export interface ChatLayoutConfig {
-  /** Width of sidebar in pixels */
-  sidebarWidth?: number;
-  /** Z-index for chat elements */
-  zIndex?: number;
+  /** Initial width of sidebar in pixels */
+  initialWidth?: number;
   /** Animation duration in ms */
   animationDuration?: number;
   /** Element to push (defaults to body) */
@@ -21,10 +26,18 @@ export interface ChatLayoutConfig {
  * Return type for useChatLayout hook
  */
 export interface UseChatLayoutReturn {
+  /** Current sidebar width */
+  sidebarWidth: number;
   /** Apply layout changes for mode */
   applyLayout: (mode: ChatDisplayMode) => void;
   /** Reset layout to default */
   resetLayout: () => void;
+  /** Update sidebar width (for resize) */
+  updateWidth: (width: number) => void;
+  /** Start resize operation */
+  startResize: (e: React.MouseEvent) => void;
+  /** Whether currently resizing */
+  isResizing: boolean;
   /** Get CSS for sidebar container */
   getSidebarStyles: () => React.CSSProperties;
   /** Get CSS for floating container */
@@ -34,9 +47,8 @@ export interface UseChatLayoutReturn {
 }
 
 const DEFAULT_CONFIG: Required<ChatLayoutConfig> = {
-  sidebarWidth: 400,
-  zIndex: 300,
-  animationDuration: 200,
+  initialWidth: sidebarConfig.defaultWidth,
+  animationDuration: sidebarConfig.animationDuration,
   pushTarget: 'body',
 };
 
@@ -69,7 +81,22 @@ interface FixedElementOriginalStyles {
  */
 export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
   const mergedConfig = { ...DEFAULT_CONFIG, ...config };
-  const { sidebarWidth, zIndex, animationDuration, pushTarget } = mergedConfig;
+  const { initialWidth, animationDuration, pushTarget } = mergedConfig;
+
+  // Sidebar width with localStorage persistence
+  const [storedWidth, setStoredWidth] = useLocalStorage<number>(storageKeys.sidebarWidth, initialWidth);
+
+  // Clamp stored width to valid range
+  const sidebarWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, storedWidth));
+  const sidebarWidthRef = useRef(sidebarWidth);
+
+  // Resizing state (runtime only, not persisted)
+  const [isResizing, setIsResizing] = useState(false);
+
+  // Keep ref in sync
+  useEffect(() => {
+    sidebarWidthRef.current = sidebarWidth;
+  }, [sidebarWidth]);
 
   // Store original styles for cleanup
   const originalStylesRef = useRef<{
@@ -157,6 +184,7 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
    */
   const adjustFixedElements = useCallback(
     (open: boolean) => {
+      const currentWidth = sidebarWidthRef.current;
       if (open) {
         // Save and adjust fixed elements
         const fixedElements = getFixedElements();
@@ -168,7 +196,7 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
 
         fixedElements.forEach((el) => {
           el.style.transition = `right ${animationDuration}ms ease`;
-          el.style.right = `${sidebarWidth}px`;
+          el.style.right = `${currentWidth}px`;
         });
       } else {
         // Restore fixed elements
@@ -185,7 +213,7 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
         fixedElementsRef.current = [];
       }
     },
-    [getFixedElements, sidebarWidth, animationDuration]
+    [getFixedElements, animationDuration]
   );
 
   /**
@@ -195,11 +223,13 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     const target = getTargetElement();
     if (!target) return;
 
+    const currentWidth = sidebarWidthRef.current;
+
     saveOriginalStyles(target);
 
     // Add smooth transition
     target.style.transition = `margin-right ${animationDuration}ms ease`;
-    target.style.marginRight = `${sidebarWidth}px`;
+    target.style.marginRight = `${currentWidth}px`;
     target.style.overflowX = 'hidden';
     target.setAttribute('data-chat-sidebar', 'open');
 
@@ -207,7 +237,7 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     adjustFixedElements(true);
 
     currentModeRef.current = 'sidebar';
-  }, [getTargetElement, saveOriginalStyles, sidebarWidth, animationDuration, adjustFixedElements]);
+  }, [getTargetElement, saveOriginalStyles, animationDuration, adjustFixedElements]);
 
   /**
    * Apply floating/closed mode layout (reset sidebar push)
@@ -268,6 +298,83 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     currentModeRef.current = 'closed';
   }, [getTargetElement, restoreOriginalStyles]);
 
+  /**
+   * Update width during resize (no animation)
+   */
+  const updateWidthImmediate = useCallback(
+    (newWidth: number) => {
+      const clampedWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, newWidth));
+
+      // Update body margin
+      const target = getTargetElement();
+      if (target && currentModeRef.current === 'sidebar') {
+        target.style.transition = 'none';
+        target.style.marginRight = `${clampedWidth}px`;
+      }
+
+      // Update fixed elements
+      fixedElementsRef.current.forEach(({ element }) => {
+        element.style.transition = 'none';
+        element.style.right = `${clampedWidth}px`;
+      });
+
+      return clampedWidth;
+    },
+    [getTargetElement]
+  );
+
+  /**
+   * Update sidebar width (for resize)
+   */
+  const updateWidth = useCallback(
+    (newWidth: number) => {
+      const clampedWidth = updateWidthImmediate(newWidth);
+      setStoredWidth(clampedWidth);
+    },
+    [updateWidthImmediate, setStoredWidth]
+  );
+
+  /**
+   * Start resize operation
+   */
+  const startResize = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setIsResizing(true);
+
+      const startX = e.clientX;
+      const startWidth = sidebarWidthRef.current;
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        // Calculate new width (dragging left increases width)
+        const deltaX = startX - moveEvent.clientX;
+        const newWidth = startWidth + deltaX;
+        const clampedWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, newWidth));
+
+        // Update DOM immediately for smooth feel
+        updateWidthImmediate(clampedWidth);
+        sidebarWidthRef.current = clampedWidth;
+
+        // Also update React state so sidebar visually resizes
+        setStoredWidth(clampedWidth);
+      };
+
+      const handleMouseUp = () => {
+        setIsResizing(false);
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      };
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = 'ew-resize';
+      document.body.style.userSelect = 'none';
+    },
+    [updateWidthImmediate, setStoredWidth]
+  );
+
   /**
    * Get CSS styles for sidebar container
    */
@@ -278,9 +385,9 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
       right: 0,
       bottom: 0,
       width: `${sidebarWidth}px`,
-      zIndex,
+      zIndex: sidebarConfig.zIndex,
     };
-  }, [sidebarWidth, zIndex]);
+  }, [sidebarWidth]);
 
   /**
    * Get CSS styles for floating container
@@ -289,12 +396,12 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     (position: 'bottom-right' | 'bottom-left'): React.CSSProperties => {
       return {
         position: 'fixed',
-        zIndex: zIndex - 50, // Slightly lower than sidebar
-        bottom: 56, // Above banner
-        ...(position === 'bottom-right' ? { right: 16 } : { left: 16 }),
+        zIndex: sidebarConfig.zIndex - 50,
+        bottom: fabConfig.bottom,
+        ...(position === 'bottom-right' ? { right: fabConfig.right } : { left: fabConfig.right }),
       };
     },
-    [zIndex]
+    []
   );
 
   /**
@@ -304,12 +411,12 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
     (position: 'bottom-right' | 'bottom-left'): React.CSSProperties => {
       return {
         position: 'fixed',
-        zIndex: zIndex - 50,
-        bottom: 56,
-        ...(position === 'bottom-right' ? { right: 16 } : { left: 16 }),
+        zIndex: sidebarConfig.zIndex - 50,
+        bottom: fabConfig.bottom,
+        ...(position === 'bottom-right' ? { right: fabConfig.right } : { left: fabConfig.right }),
       };
     },
-    [zIndex]
+    []
   );
 
   // Cleanup on unmount
@@ -320,8 +427,12 @@ export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
   }, [resetLayout]);
 
   return {
+    sidebarWidth,
     applyLayout,
     resetLayout,
+    updateWidth,
+    startResize,
+    isResizing,
     getSidebarStyles,
     getFloatingStyles,
     getFabStyles,

package/src/snippets/McpChat/index.ts

@@ -46,7 +46,6 @@ export { ChatWidget, AIChatWidget, ChatPanel, MessageBubble, AIMessageInput } fr
 export type {
   ChatWidgetProps,
   AIChatWidgetProps,
-  ChatPanelProps,
   MessageBubbleProps,
   AIMessageInputProps,
 } from './components';

package/src/snippets/index.ts

@@ -24,7 +24,6 @@ export {
 } from './McpChat';
 export type {
   AIChatWidgetProps,
-  ChatPanelProps,
   MessageBubbleProps,
   AIMessageInputProps,
   AIChatContextState,