@djangocfg/layouts 2.1.226 → 2.1.228

package/src/snippets/McpChat/components/index.ts

@@ -1,24 +0,0 @@
-'use client';
-
-export { ChatWidget } from './ChatWidget';
-export type { ChatWidgetProps } from './ChatWidget';
-
-export { AIChatWidget } from './AIChatWidget';
-export type { AIChatWidgetProps } from './AIChatWidget';
-
-export { ChatPanel } from './ChatPanel';
-
-export { ChatMessages } from './ChatMessages';
-export type { ChatMessagesProps, ChatMessagesHandle } from './ChatMessages';
-
-export { MessageBubble } from './MessageBubble';
-export type { MessageBubbleProps } from './MessageBubble';
-
-export { AIMessageInput } from './MessageInput';
-export type { AIMessageInputProps } from './MessageInput';
-
-export { ChatSidebar } from './ChatSidebar';
-export type { ChatSidebarProps } from './ChatSidebar';
-
-export { AskAIButton } from './AskAIButton';
-export type { AskAIButtonProps } from './AskAIButton';

package/src/snippets/McpChat/config.ts

@@ -1,94 +0,0 @@
-/**
- * McpChat configuration
- * Environment-aware configuration for MCP server endpoints
- */
-
-// Hosts
-const PROD_HOST = 'https://mcp.djangocfg.com';
-const DEV_HOST = 'http://localhost:3002';
-
-/**
- * Get host based on auto-detect flag
- * @param autoDetect - If true, auto-detect based on NODE_ENV. If false, always use PROD_HOST
- */
-function getHost(autoDetect: boolean = false): string {
-  if (autoDetect && process.env.NODE_ENV === 'development') {
-    return DEV_HOST;
-  }
-  return PROD_HOST;
-}
-
-/**
- * Get MCP Server endpoints
- * @param autoDetect - If true, auto-detect environment. If false (default), always use production
- */
-export function getMcpEndpoints(autoDetect: boolean = false) {
-  const HOST = getHost(autoDetect);
-  return {
-    /** Base URL */
-    baseUrl: HOST,
-    /** Chat API endpoint */
-    chat: `${HOST}/api/chat`,
-    /** Search API endpoint */
-    search: `${HOST}/api/search`,
-    /** Conversations API endpoint */
-    conversations: `${HOST}/api/conversations`,
-    /** Health check endpoint */
-    health: `${HOST}/health`,
-    /** MCP protocol endpoint (Streamable HTTP) */
-    mcp: `${HOST}/mcp`,
-    /** SSE endpoint for legacy clients */
-    sse: `${HOST}/mcp/sse`,
-  };
-}
-
-/**
- * MCP Server endpoints (always production by default)
- */
-export const mcpEndpoints = getMcpEndpoints(false);
-
-// Export defaults for backwards compatibility
-export const DEFAULT_CHAT_API_ENDPOINT = PROD_HOST + '/api/chat';
-export const DEFAULT_MCP_BASE_URL = PROD_HOST;
-
-/**
- * Chat sidebar layout configuration
- */
-export const sidebarConfig = {
-  /** Minimum sidebar width in pixels */
-  minWidth: 320,
-  /** Maximum sidebar width in pixels */
-  maxWidth: 600,
-  /** Default sidebar width in pixels */
-  defaultWidth: 400,
-  /** Z-index for chat elements */
-  zIndex: 300,
-  /** Animation duration in milliseconds */
-  animationDuration: 200,
-};
-
-/**
- * Chat FAB (Floating Action Button) configuration
- */
-export const fabConfig = {
-  /** Bottom offset in pixels */
-  bottom: 24,
-  /** Right offset in pixels */
-  right: 24,
-  /** Size of FAB button in pixels */
-  size: 56,
-};
-
-/**
- * LocalStorage keys for chat state persistence
- */
-export const storageKeys = {
-  /** Display mode (closed, floating, sidebar) */
-  mode: 'djangocfg-chat-mode',
-  /** User ID for conversation tracking */
-  userId: 'djangocfg-chat-user-id',
-  /** Chat messages history */
-  messages: 'djangocfg-chat-messages',
-  /** Sidebar width */
-  sidebarWidth: 'djangocfg-chat-sidebar-width',
-};

package/src/snippets/McpChat/context/AIChatContext.tsx

@@ -1,327 +0,0 @@
-'use client';
-
-import {
-    createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState
-} from 'react';
-
-import { useIsMobile, useLocalStorage } from '@djangocfg/ui-core/hooks';
-
-import { useAIChat } from '../hooks/useAIChat';
-import { AIChatMessage, ChatDisplayMode, ChatWidgetConfig, mcpEndpoints} from '../types';
-
-const STORAGE_KEY_MODE = 'djangocfg-ai-chat-mode';
-
-/**
- * AI Chat context state
- */
-export interface AIChatContextState {
-  /** All chat messages */
-  messages: AIChatMessage[];
-  /** Whether a request is in progress */
-  isLoading: boolean;
-  /** Last error if any */
-  error: Error | null;
-  /** Whether chat panel is open */
-  isOpen: boolean;
-  /** Whether chat is minimized */
-  isMinimized: boolean;
-  /** Configuration */
-  config: ChatWidgetConfig;
-  /** Current display mode */
-  displayMode: ChatDisplayMode;
-  /** Is on mobile device */
-  isMobile: boolean;
-  /** Thread ID for conversation */
-  threadId: string;
-  /** User ID for conversation */
-  userId: string;
-}
-
-/**
- * AI Chat context actions
- */
-export interface AIChatContextActions {
-  /** Send a message */
-  sendMessage: (content: string) => Promise<void>;
-  /** Clear all messages */
-  clearMessages: () => void;
-  /** Open chat panel */
-  openChat: () => void;
-  /** Close chat panel */
-  closeChat: () => void;
-  /** Toggle chat panel */
-  toggleChat: () => void;
-  /** Minimize/restore chat */
-  toggleMinimize: () => void;
-  /** Set display mode */
-  setDisplayMode: (mode: ChatDisplayMode) => void;
-  /** Stop streaming response */
-  stopStreaming: () => void;
-}
-
-export type AIChatContextValue = AIChatContextState & AIChatContextActions;
-
-const AIChatContext = createContext<AIChatContextValue | null>(null);
-
-/**
- * AI Chat provider props
- */
-export interface AIChatProviderProps {
-  children: ReactNode;
-  /** API endpoint for AI chat (default: /api/ai/chat) */
-  apiEndpoint?: string;
-  /** Widget configuration */
-  config?: Partial<ChatWidgetConfig>;
-  /** Callback on error */
-  onError?: (error: Error) => void;
-  /** Enable streaming (default: true) */
-  enableStreaming?: boolean;
-}
-
-/**
- * AI Chat provider component
- * Uses useAIChat hook with server-side persistence
- */
-export function AIChatProvider({
-  children,
-  apiEndpoint = mcpEndpoints.chat,
-  config: userConfig = {},
-  onError,
-  enableStreaming = true,
-}: AIChatProviderProps) {
-  // Use AI chat hook
-  const {
-    messages,
-    isLoading,
-    error,
-    threadId,
-    userId,
-    sendMessage: sendAIMessage,
-    clearMessages: clearAIMessages,
-    stopStreaming,
-  } = useAIChat({
-    apiEndpoint,
-    onError,
-    enableStreaming,
-  });
-
-  const [isMinimized, setIsMinimized] = useState(false);
-
-  // Display mode with localStorage persistence
-  const [storedMode, setStoredMode] = useLocalStorage<ChatDisplayMode>(STORAGE_KEY_MODE, 'closed');
-
-  const isMobile = useIsMobile();
-
-  // On mobile, sidebar mode is not available - fallback to floating
-  const displayMode: ChatDisplayMode = useMemo(() => {
-    if (isMobile && storedMode === 'sidebar') {
-      return 'floating';
-    }
-    return storedMode;
-  }, [isMobile, storedMode]);
-
-  // Derived state: isOpen is true when not in 'closed' mode
-  const isOpen = displayMode !== 'closed';
-
-  // Track isOpen in a ref for event handler
-  const isOpenRef = useRef(isOpen);
-  useEffect(() => {
-    isOpenRef.current = isOpen;
-  }, [isOpen]);
-
-  // Track last active mode (non-closed) to restore when reopening
-  const lastActiveModeRef = useRef<Exclude<ChatDisplayMode, 'closed'>>('floating');
-  useEffect(() => {
-    if (displayMode !== 'closed') {
-      lastActiveModeRef.current = displayMode;
-    }
-  }, [displayMode]);
-
-  const config: ChatWidgetConfig = useMemo(
-    () => ({
-      apiEndpoint,
-      title: 'DjangoCFG AI',
-      placeholder: 'Ask about DjangoCFG...',
-      greeting:
-        "Hi! I'm your DjangoCFG AI assistant powered by GPT. Ask me anything about configuration, features, or how to use the library.",
-      position: 'bottom-right',
-      variant: 'default',
-      ...userConfig,
-    }),
-    [apiEndpoint, userConfig]
-  );
-
-  const sendMessage = useCallback(
-    async (content: string) => {
-      await sendAIMessage(content);
-    },
-    [sendAIMessage]
-  );
-
-  const clearMessages = useCallback(() => {
-    clearAIMessages();
-  }, [clearAIMessages]);
-
-  const openChat = useCallback(() => {
-    // Restore last active mode instead of always opening in floating
-    setStoredMode(lastActiveModeRef.current);
-    setIsMinimized(false);
-  }, [setStoredMode]);
-
-  const closeChat = useCallback(() => {
-    setStoredMode('closed');
-    setIsMinimized(false);
-  }, [setStoredMode]);
-
-  const toggleChat = useCallback(() => {
-    if (displayMode === 'closed') {
-      setStoredMode('floating');
-      setIsMinimized(false);
-    } else {
-      setStoredMode('closed');
-    }
-  }, [displayMode, setStoredMode]);
-
-  const toggleMinimize = useCallback(() => {
-    setIsMinimized((prev) => !prev);
-  }, []);
-
-  const setDisplayMode = useCallback(
-    (mode: ChatDisplayMode) => {
-      // On mobile, sidebar is not available
-      if (isMobile && mode === 'sidebar') {
-        setStoredMode('floating');
-      } else {
-        setStoredMode(mode);
-      }
-      setIsMinimized(false);
-    },
-    [isMobile, setStoredMode]
-  );
-
-  const value = useMemo<AIChatContextValue>(
-    () => ({
-      messages,
-      isLoading,
-      error,
-      isOpen,
-      isMinimized,
-      config,
-      displayMode,
-      isMobile,
-      threadId,
-      userId,
-      sendMessage,
-      clearMessages,
-      openChat,
-      closeChat,
-      toggleChat,
-      toggleMinimize,
-      setDisplayMode,
-      stopStreaming,
-    }),
-    [
-      messages,
-      isLoading,
-      error,
-      isOpen,
-      isMinimized,
-      config,
-      displayMode,
-      isMobile,
-      threadId,
-      userId,
-      sendMessage,
-      clearMessages,
-      openChat,
-      closeChat,
-      toggleChat,
-      toggleMinimize,
-      setDisplayMode,
-      stopStreaming,
-    ]
-  );
-
-  // =============================================================================
-  // Global Chat Event Listener
-  // =============================================================================
-
-  /**
-   * Listen for mcp:chat:send events from useMcpChat hook
-   * This allows any component to trigger chat from anywhere in the app
-   */
-  useEffect(() => {
-    // Register chat as available
-    if (typeof window !== 'undefined') {
-      (window as any).__MCP_CHAT_AVAILABLE__ = true;
-    }
-
-    const handleChatEvent = (event: Event) => {
-      const customEvent = event as CustomEvent<import('../types').McpChatEventDetail>;
-      const { message, context, autoSend = true, displayMode: requestedMode } = customEvent.detail;
-
-      // Send confirmation that event was handled
-      window.dispatchEvent(new CustomEvent('mcp:chat:handled'));
-
-      // Format message with context if provided
-      let fullMessage = message;
-      if (context) {
-        if (context.type) {
-          fullMessage = `[${context.type.toUpperCase()}] ${message}`;
-        }
-        if (context.data) {
-          fullMessage += `\n\n**Context:**\n\`\`\`json\n${JSON.stringify(context.data, null, 2)}\n\`\`\``;
-        }
-        if (context.source) {
-          fullMessage += `\n\n_Source: ${context.source}_`;
-        }
-      }
-
-      // Open chat in requested mode, or keep current mode if already open
-      if (requestedMode) {
-        setDisplayMode(requestedMode);
-      } else if (!isOpenRef.current) {
-        // Only open if chat is currently closed
-        openChat();
-      }
-      // If already open, keep current mode
-
-      // Auto-send message if requested
-      if (autoSend) {
-        // Small delay to ensure chat is open and ready
-        setTimeout(() => {
-          sendMessage(fullMessage);
-        }, 100);
-      }
-    };
-
-    window.addEventListener('mcp:chat:send', handleChatEvent);
-
-    return () => {
-      window.removeEventListener('mcp:chat:send', handleChatEvent);
-      if (typeof window !== 'undefined') {
-        (window as any).__MCP_CHAT_AVAILABLE__ = false;
-      }
-    };
-  }, [sendMessage, setDisplayMode, openChat]);
-
-  return <AIChatContext.Provider value={value}>{children}</AIChatContext.Provider>;
-}
-
-/**
- * Hook to access AI chat context
- */
-export function useAIChatContext(): AIChatContextValue {
-  const context = useContext(AIChatContext);
-  if (!context) {
-    throw new Error('useAIChatContext must be used within an AIChatProvider');
-  }
-  return context;
-}
-
-/**
- * Hook to check if AI chat context is available
- */
-export function useAIChatContextOptional(): AIChatContextValue | null {
-  return useContext(AIChatContext);
-}