@djangocfg/layouts 2.0.5 → 2.0.7

package/src/snippets/McpChat/components/MessageInput.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { Button } from '@djangocfg/ui';
+import { Send, Loader2 } from 'lucide-react';
+
+export interface AIMessageInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+  placeholder?: string;
+  maxRows?: number;
+}
+
+export const AIMessageInput = React.memo<AIMessageInputProps>(
+  ({
+    onSend,
+    disabled = false,
+    isLoading = false,
+    placeholder = 'Ask about DjangoCFG...',
+    maxRows = 5,
+  }) => {
+    const [value, setValue] = useState('');
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    // Auto-resize textarea
+    const adjustHeight = useCallback(() => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+
+      // Reset height to auto to get the correct scrollHeight
+      textarea.style.height = 'auto';
+
+      // Calculate line height and max height
+      const lineHeight = 24; // ~1.5rem
+      const minHeight = 44; // Single line height with padding
+      const maxHeight = lineHeight * maxRows + 20; // padding
+
+      // Set new height
+      const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+      textarea.style.height = `${newHeight}px`;
+    }, [maxRows]);
+
+    // Adjust height when value changes
+    useEffect(() => {
+      adjustHeight();
+    }, [value, adjustHeight]);
+
+    const handleSubmit = useCallback(
+      (e?: React.FormEvent) => {
+        e?.preventDefault();
+
+        const trimmed = value.trim();
+        if (!trimmed || disabled || isLoading) return;
+
+        onSend(trimmed);
+        setValue('');
+
+        // Reset height after sending
+        if (textareaRef.current) {
+          textareaRef.current.style.height = 'auto';
+        }
+        textareaRef.current?.focus();
+      },
+      [value, disabled, isLoading, onSend]
+    );
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          handleSubmit();
+        }
+      },
+      [handleSubmit]
+    );
+
+    const canSend = value.trim().length > 0 && !disabled && !isLoading;
+
+    return (
+      <form onSubmit={handleSubmit} className="w-full">
+        <div
+          className="relative flex items-end rounded-2xl border border-input bg-background transition-colors focus-within:ring-1 focus-within:ring-ring focus-within:border-ring"
+          style={{ minHeight: '44px' }}
+        >
+          {/* Textarea */}
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled || isLoading}
+            rows={1}
+            className="flex-1 resize-none bg-transparent px-4 py-3 text-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 pr-12"
+            style={{
+              minHeight: '44px',
+              maxHeight: `${24 * maxRows + 20}px`,
+              lineHeight: '1.5rem',
+            }}
+            autoComplete="off"
+          />
+
+          {/* Send Button - positioned inside, bottom right */}
+          <div
+            className="absolute flex items-center justify-center"
+            style={{
+              right: '6px',
+              bottom: '6px',
+            }}
+          >
+            <Button
+              type="submit"
+              size="icon"
+              disabled={!canSend}
+              className="h-8 w-8 rounded-full transition-all"
+              style={{
+                opacity: canSend ? 1 : 0.5,
+              }}
+            >
+              {isLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Send className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {/* Helper text */}
+        <p className="mt-1.5 text-xs text-muted-foreground text-center">
+          Press Enter to send, Shift+Enter for new line
+        </p>
+      </form>
+    );
+  }
+);
+
+AIMessageInput.displayName = 'AIMessageInput';

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

@@ -0,0 +1,22 @@
+'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 type { ChatPanelProps } 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';

package/src/snippets/McpChat/config.ts

@@ -0,0 +1,35 @@
+/**
+ * McpChat configuration
+ * Environment-aware configuration for MCP server endpoints
+ */
+
+// Hosts
+const PROD_HOST = 'https://mcp.djangocfg.com';
+const DEV_HOST = 'http://localhost:3002';
+
+// Current host based on environment
+const HOST = process.env.NODE_ENV === 'development' ? DEV_HOST : PROD_HOST;
+
+/**
+ * MCP Server endpoints
+ */
+export const mcpEndpoints = {
+  /** 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`,
+};
+
+// Export defaults for backwards compatibility
+export const DEFAULT_CHAT_API_ENDPOINT = PROD_HOST + '/api/chat';
+export const DEFAULT_MCP_BASE_URL = PROD_HOST;

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

@@ -0,0 +1,245 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, useMemo, useEffect, type ReactNode } from 'react';
+import { useLocalStorage, useIsMobile } from '@djangocfg/ui/hooks';
+import { useAIChat } from '../hooks/useAIChat';
+import { mcpEndpoints, type AIChatMessage, type ChatWidgetConfig, type ChatDisplayMode } 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';
+
+  const config: ChatWidgetConfig = useMemo(
+    () => ({
+      apiEndpoint,
+      title: 'DjangoCFG AI Assistant',
+      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(() => {
+    setStoredMode('floating');
+    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,
+    ]
+  );
+
+  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);
+}