@djangocfg/layouts 2.1.226 → 2.1.228

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

@@ -1,442 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { useLocalStorage } from '@djangocfg/ui-core/hooks';
-
-import { fabConfig, sidebarConfig, storageKeys } from '../config';
-
-import type { ChatDisplayMode } from '../types';
-// 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 {
-  /** Initial width of sidebar in pixels */
-  initialWidth?: number;
-  /** Animation duration in ms */
-  animationDuration?: number;
-  /** Element to push (defaults to body) */
-  pushTarget?: 'body' | 'main' | string;
-}
-
-/**
- * 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 */
-  getFloatingStyles: (position: 'bottom-right' | 'bottom-left') => React.CSSProperties;
-  /** Get CSS for FAB button */
-  getFabStyles: (position: 'bottom-right' | 'bottom-left') => React.CSSProperties;
-}
-
-const DEFAULT_CONFIG: Required<ChatLayoutConfig> = {
-  initialWidth: sidebarConfig.defaultWidth,
-  animationDuration: sidebarConfig.animationDuration,
-  pushTarget: 'body',
-};
-
-/** Stored original styles for fixed elements */
-interface FixedElementOriginalStyles {
-  element: HTMLElement;
-  right: string;
-  transition: string;
-}
-
-/**
- * Hook for managing chat layout embedding modes
- *
- * Handles:
- * - Sidebar mode: pushes content left by adding margin to target element
- *   AND automatically adjusts all position:fixed elements with right:0
- * - Floating mode: positions chat at bottom-right/left
- * - Closed mode: just shows FAB button
- *
- * @example
- * ```tsx
- * const { applyLayout, getSidebarStyles, getFloatingStyles } = useChatLayout({
- *   sidebarWidth: 400,
- * });
- *
- * useEffect(() => {
- *   applyLayout(displayMode);
- * }, [displayMode]);
- * ```
- */
-export function useChatLayout(config?: ChatLayoutConfig): UseChatLayoutReturn {
-  const mergedConfig = { ...DEFAULT_CONFIG, ...config };
-  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<{
-    marginRight?: string;
-    overflowX?: string;
-    transition?: string;
-  } | null>(null);
-
-  // Store original styles for fixed elements
-  const fixedElementsRef = useRef<FixedElementOriginalStyles[]>([]);
-
-  // Current mode for cleanup
-  const currentModeRef = useRef<ChatDisplayMode>('closed');
-
-  /**
-   * Get the target element to push
-   */
-  const getTargetElement = useCallback((): HTMLElement | null => {
-    if (typeof window === 'undefined') return null;
-
-    if (pushTarget === 'body') {
-      return document.body;
-    } else if (pushTarget === 'main') {
-      return document.querySelector('main');
-    } else {
-      return document.querySelector(pushTarget);
-    }
-  }, [pushTarget]);
-
-  /**
-   * Find all fixed/sticky elements that need right adjustment
-   */
-  const getFixedElements = useCallback((): HTMLElement[] => {
-    if (typeof window === 'undefined') return [];
-
-    const elements: HTMLElement[] = [];
-    const allElements = document.querySelectorAll('*');
-
-    allElements.forEach((el) => {
-      if (!(el instanceof HTMLElement)) return;
-      // Skip chat sidebar itself
-      if (el.closest('[data-chat-sidebar-panel]')) return;
-
-      const style = window.getComputedStyle(el);
-      const position = style.position;
-      const right = style.right;
-
-      // Check for fixed/sticky elements with right: 0
-      if ((position === 'fixed' || position === 'sticky') && right === '0px') {
-        elements.push(el);
-      }
-    });
-
-    return elements;
-  }, []);
-
-  /**
-   * Save original styles before modification
-   */
-  const saveOriginalStyles = useCallback((element: HTMLElement) => {
-    if (!originalStylesRef.current) {
-      originalStylesRef.current = {
-        marginRight: element.style.marginRight,
-        overflowX: element.style.overflowX,
-        transition: element.style.transition,
-      };
-    }
-  }, []);
-
-  /**
-   * Restore original styles
-   */
-  const restoreOriginalStyles = useCallback((element: HTMLElement) => {
-    if (originalStylesRef.current) {
-      element.style.marginRight = originalStylesRef.current.marginRight || '';
-      element.style.overflowX = originalStylesRef.current.overflowX || '';
-      element.style.transition = originalStylesRef.current.transition || '';
-      element.removeAttribute('data-chat-sidebar');
-      originalStylesRef.current = null;
-    }
-  }, []);
-
-  /**
-   * Adjust fixed elements for sidebar
-   */
-  const adjustFixedElements = useCallback(
-    (open: boolean) => {
-      const currentWidth = sidebarWidthRef.current;
-      if (open) {
-        // Save and adjust fixed elements
-        const fixedElements = getFixedElements();
-        fixedElementsRef.current = fixedElements.map((el) => ({
-          element: el,
-          right: el.style.right,
-          transition: el.style.transition,
-        }));
-
-        fixedElements.forEach((el) => {
-          el.style.transition = `right ${animationDuration}ms ease`;
-          el.style.right = `${currentWidth}px`;
-        });
-      } else {
-        // Restore fixed elements
-        fixedElementsRef.current.forEach(({ element, right, transition }) => {
-          element.style.transition = `right ${animationDuration}ms ease`;
-          element.style.right = '0px';
-
-          // Restore original after animation
-          setTimeout(() => {
-            element.style.right = right;
-            element.style.transition = transition;
-          }, animationDuration);
-        });
-        fixedElementsRef.current = [];
-      }
-    },
-    [getFixedElements, animationDuration]
-  );
-
-  /**
-   * Apply sidebar mode layout
-   */
-  const applySidebarLayout = useCallback(() => {
-    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 = `${currentWidth}px`;
-    target.style.overflowX = 'hidden';
-    target.setAttribute('data-chat-sidebar', 'open');
-
-    // Adjust fixed elements (header, etc.)
-    adjustFixedElements(true);
-
-    currentModeRef.current = 'sidebar';
-  }, [getTargetElement, saveOriginalStyles, animationDuration, adjustFixedElements]);
-
-  /**
-   * Apply floating/closed mode layout (reset sidebar push)
-   */
-  const applyDefaultLayout = useCallback(
-    (mode: ChatDisplayMode) => {
-      const target = getTargetElement();
-      if (!target) return;
-
-      // Only restore if we were in sidebar mode
-      if (currentModeRef.current === 'sidebar') {
-        // Add transition for smooth animation
-        target.style.transition = `margin-right ${animationDuration}ms ease`;
-        target.style.marginRight = '0px';
-
-        // Restore fixed elements
-        adjustFixedElements(false);
-
-        // Remove styles after animation completes
-        setTimeout(() => {
-          restoreOriginalStyles(target);
-        }, animationDuration);
-      }
-
-      currentModeRef.current = mode;
-    },
-    [getTargetElement, restoreOriginalStyles, animationDuration, adjustFixedElements]
-  );
-
-  /**
-   * Apply layout changes for given mode
-   */
-  const applyLayout = useCallback(
-    (mode: ChatDisplayMode) => {
-      if (mode === 'sidebar') {
-        applySidebarLayout();
-      } else {
-        applyDefaultLayout(mode);
-      }
-    },
-    [applySidebarLayout, applyDefaultLayout]
-  );
-
-  /**
-   * Reset layout to default (cleanup)
-   */
-  const resetLayout = useCallback(() => {
-    const target = getTargetElement();
-    if (target && originalStylesRef.current) {
-      restoreOriginalStyles(target);
-    }
-    // Restore fixed elements immediately on cleanup
-    fixedElementsRef.current.forEach(({ element, right, transition }) => {
-      element.style.right = right;
-      element.style.transition = transition;
-    });
-    fixedElementsRef.current = [];
-    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
-   */
-  const getSidebarStyles = useCallback((): React.CSSProperties => {
-    return {
-      position: 'fixed',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      width: `${sidebarWidth}px`,
-      zIndex: sidebarConfig.zIndex,
-    };
-  }, [sidebarWidth]);
-
-  /**
-   * Get CSS styles for floating container
-   */
-  const getFloatingStyles = useCallback(
-    (position: 'bottom-right' | 'bottom-left'): React.CSSProperties => {
-      return {
-        position: 'fixed',
-        zIndex: sidebarConfig.zIndex - 50,
-        bottom: fabConfig.bottom,
-        ...(position === 'bottom-right' ? { right: fabConfig.right } : { left: fabConfig.right }),
-      };
-    },
-    []
-  );
-
-  /**
-   * Get CSS styles for FAB button
-   */
-  const getFabStyles = useCallback(
-    (position: 'bottom-right' | 'bottom-left'): React.CSSProperties => {
-      return {
-        position: 'fixed',
-        zIndex: sidebarConfig.zIndex - 50,
-        bottom: fabConfig.bottom,
-        ...(position === 'bottom-right' ? { right: fabConfig.right } : { left: fabConfig.right }),
-      };
-    },
-    []
-  );
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      resetLayout();
-    };
-  }, [resetLayout]);
-
-  return {
-    sidebarWidth,
-    applyLayout,
-    resetLayout,
-    updateWidth,
-    startResize,
-    isResizing,
-    getSidebarStyles,
-    getFloatingStyles,
-    getFabStyles,
-  };
-}

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

@@ -1,90 +0,0 @@
-'use client';
-
-import { useCallback } from 'react';
-
-import type { McpChatEventDetail, UseMcpChatReturn } from '../types';
-
-/**
- * Hook to send messages to MCP Chat from anywhere in the app
- *
- * @example
- * ```tsx
- * function ErrorBoundary({ error }) {
- *   const { sendToChat } = useMcpChat();
- *
- *   const explainError = () => {
- *     sendToChat({
- *       message: `Explain this error: ${error.message}`,
- *       context: {
- *         type: 'error',
- *         data: { error: error.stack },
- *         source: 'ErrorBoundary'
- *       }
- *     });
- *   };
- *
- *   return <button onClick={explainError}>Explain Error</button>;
- * }
- * ```
- */
-export function useMcpChat(): UseMcpChatReturn {
-  /**
-   * Send message to chat via CustomEvent
-   */
-  const sendToChat = useCallback((detail: McpChatEventDetail) => {
-    if (typeof window === 'undefined') {
-      console.error('[useMcpChat] Cannot send message: window is not available');
-      return;
-    }
-
-    // Create custom event
-    const event = new CustomEvent('mcp:chat:send', {
-      detail,
-      bubbles: true,
-    });
-
-    // Set up handler confirmation listener
-    let handled = false;
-    const handleConfirmation = () => {
-      handled = true;
-    };
-
-    window.addEventListener('mcp:chat:handled', handleConfirmation, { once: true });
-
-    // Dispatch event
-    window.dispatchEvent(event);
-
-    // Check if event was handled
-    setTimeout(() => {
-      window.removeEventListener('mcp:chat:handled', handleConfirmation);
-
-      if (!handled) {
-        const errorMessage = 'AI Chat is not available. Please make sure the chat component is loaded.';
-        console.error('[useMcpChat]', errorMessage);
-
-        // Import consola dynamically if available
-        if (typeof window !== 'undefined' && (window as any).consola) {
-          (window as any).consola.error('[useMcpChat] Chat not available');
-        }
-
-        // Show user-friendly alert
-        alert(errorMessage);
-      }
-    }, 100);
-  }, []);
-
-  /**
-   * Check if chat is available
-   */
-  const isChatAvailable = useCallback(() => {
-    if (typeof window === 'undefined') return false;
-
-    // Check if chat registered itself
-    return (window as any).__MCP_CHAT_AVAILABLE__ === true;
-  }, []);
-
-  return {
-    sendToChat,
-    isChatAvailable,
-  };
-}

package/src/snippets/McpChat/index.ts

@@ -1,79 +0,0 @@
-'use client';
-
-/**
- * @djangocfg/mcp-chat
- *
- * React chat components for DjangoCFG documentation assistant.
- * Works with @djangocfg/mcp for semantic search.
- *
- * @example Basic usage (standalone widget)
- * ```tsx
- * import { ChatWidget } from '@djangocfg/mcp-chat';
- *
- * export default function Layout({ children }) {
- *   return (
- *     <>
- *       {children}
- *       <ChatWidget apiEndpoint="/api/chat" />
- *     </>
- *   );
- * }
- * ```
- *
- * @example With provider (for accessing chat from multiple components)
- * ```tsx
- * import { ChatProvider, ChatWidget, useChatContext } from '@djangocfg/mcp-chat';
- *
- * function OpenChatButton() {
- *   const { openChat } = useChatContext();
- *   return <button onClick={openChat}>Ask AI</button>;
- * }
- *
- * export default function Layout({ children }) {
- *   return (
- *     <ChatProvider apiEndpoint="/api/chat">
- *       {children}
- *       <OpenChatButton />
- *       <ChatWidget />
- *     </ChatProvider>
- *   );
- * }
- * ```
- */
-
-// Components
-export { ChatWidget, AIChatWidget, ChatPanel, MessageBubble, AIMessageInput, AskAIButton } from './components';
-export type {
-  ChatWidgetProps,
-  AIChatWidgetProps,
-  MessageBubbleProps,
-  AIMessageInputProps,
-  AskAIButtonProps,
-} from './components';
-
-// Context
-export { AIChatProvider, useAIChatContext, useAIChatContextOptional } from './context';
-export type {
-  AIChatContextState,
-  AIChatContextActions,
-  AIChatContextValue,
-  AIChatProviderProps,
-} from './context';
-
-// Hooks
-export { useAIChat, useChatLayout, useMcpChat } from './hooks';
-export type { ChatLayoutConfig, UseChatLayoutReturn } from './hooks';
-
-// Types
-export type {
-  AIChatMessage,
-  AIChatSource,
-  AIMessageRole,
-  AIChatApiResponse,
-  UseAIChatOptions,
-  UseAIChatReturn,
-  ChatWidgetConfig,
-  McpChatContextType,
-  McpChatEventDetail,
-  UseMcpChatReturn,
-} from './types';