@djangocfg/layouts 2.1.227 → 2.1.228

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

@@ -1,361 +0,0 @@
-'use client';
-
-import { Zap } from 'lucide-react';
-import React from 'react';
-
-import { Button, Portal } from '@djangocfg/ui-core';
-
-import {
-    AIChatProvider, useAIChatContext, useAIChatContextOptional
-} from '../context/AIChatContext';
-import { useChatLayout } from '../hooks/useChatLayout';
-import { ChatWidgetConfig, getMcpEndpoints} from '../types';
-import { ChatPanel } from './ChatPanel';
-import { ChatSidebar } from './ChatSidebar';
-
-// CSS for game-quality multi-layer animated border with smooth color flow
-const fabAnimationStyles = `
-@keyframes rotate-gradient {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-@keyframes rotate-gradient-reverse {
-  0% { transform: rotate(360deg); }
-  100% { transform: rotate(0deg); }
-}
-
-@keyframes color-shift-glow {
-  0%, 100% {
-    box-shadow:
-      0 0 20px rgba(251, 191, 36, 0.5),
-      0 0 40px rgba(168, 85, 247, 0.3),
-      0 0 60px rgba(20, 184, 166, 0.2);
-  }
-  33% {
-    box-shadow:
-      0 0 20px rgba(168, 85, 247, 0.5),
-      0 0 40px rgba(20, 184, 166, 0.3),
-      0 0 60px rgba(251, 191, 36, 0.2);
-  }
-  66% {
-    box-shadow:
-      0 0 20px rgba(20, 184, 166, 0.5),
-      0 0 40px rgba(236, 72, 153, 0.3),
-      0 0 60px rgba(168, 85, 247, 0.2);
-  }
-}
-
-@keyframes icon-pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
-  }
-  50% {
-    opacity: 0.85;
-    transform: scale(1.15);
-    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 1));
-  }
-}
-
-@keyframes border-pulse {
-  0%, 100% {
-    opacity: 1;
-    filter: blur(0px);
-  }
-  50% {
-    opacity: 0.85;
-    filter: blur(0.5px);
-  }
-}
-
-@keyframes inner-glow-pulse {
-  0%, 100% {
-    box-shadow:
-      inset 0 0 15px rgba(251, 191, 36, 0.3),
-      inset 0 0 25px rgba(168, 85, 247, 0.2);
-  }
-  50% {
-    box-shadow:
-      inset 0 0 20px rgba(168, 85, 247, 0.35),
-      inset 0 0 30px rgba(20, 184, 166, 0.25);
-  }
-}
-
-@keyframes fab-entrance {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.08);
-  }
-  70% {
-    transform: scale(0.98);
-  }
-  85% {
-    transform: scale(1.02);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes fab-glow-entrance {
-  0% {
-    box-shadow: 0 0 0 rgba(251, 191, 36, 0);
-  }
-  40% {
-    box-shadow:
-      0 0 25px rgba(251, 191, 36, 0.6),
-      0 0 50px rgba(168, 85, 247, 0.4),
-      0 0 75px rgba(20, 184, 166, 0.25);
-  }
-  100% {
-    box-shadow:
-      0 0 20px rgba(251, 191, 36, 0.5),
-      0 0 40px rgba(168, 85, 247, 0.3),
-      0 0 60px rgba(20, 184, 166, 0.2);
-  }
-}
-`;
-
-export interface AIChatWidgetProps extends ChatWidgetConfig {
-  /** Custom class name for the container */
-  className?: string;
-  /** Enable streaming responses (default: true) */
-  enableStreaming?: boolean;
-}
-
-/**
- * Internal AI chat widget that uses context
- */
-const AIChatWidgetInternal = React.memo<{ className?: string }>(({ className }) => {
-  const { config, displayMode, openChat, isMobile } = useAIChatContext();
-
-  // Use layout hook for consistent positioning
-  const { getFabStyles, getFloatingStyles } = useChatLayout();
-
-  const position = config.position || 'bottom-right';
-  const fabStyles = getFabStyles(position);
-  const floatingStyles = getFloatingStyles(position);
-
-  // Mode: closed - just show FAB with game-quality multi-layer animated border
-  if (displayMode === 'closed') {
-    return (
-      <Portal>
-        <style>{fabAnimationStyles}</style>
-        <div style={fabStyles} className={className || ''}>
-          {/* Outer glow container with entrance and color-shifting animations */}
-          <div
-            className="relative rounded-full"
-            style={{
-              width: '68px',
-              height: '68px',
-              overflow: 'hidden',
-              animation: 'fab-entrance 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) 0s 1 normal forwards, fab-glow-entrance 0.8s ease-out 0s 1 normal forwards, color-shift-glow 8s ease-in-out 0.6s infinite',
-            }}
-          >
-            {/* Border container - multiple layers for depth */}
-            <div
-              className="absolute rounded-full"
-              style={{
-                inset: '0',
-                overflow: 'hidden',
-              }}
-            >
-              {/* Layer 1: Base smooth gradient with more color stops */}
-              <div
-                className="absolute rounded-full"
-                style={{
-                  inset: '0',
-                  background: `conic-gradient(
-                    from 0deg,
-                    rgba(251, 191, 36, 1) 0%,
-                    rgba(251, 191, 36, 0.7) 8%,
-                    rgba(251, 191, 36, 0) 15%,
-                    rgba(168, 85, 247, 0) 20%,
-                    rgba(168, 85, 247, 0.7) 28%,
-                    rgba(168, 85, 247, 1) 35%,
-                    rgba(168, 85, 247, 0.7) 42%,
-                    rgba(168, 85, 247, 0) 50%,
-                    rgba(20, 184, 166, 0) 55%,
-                    rgba(20, 184, 166, 0.7) 63%,
-                    rgba(20, 184, 166, 1) 70%,
-                    rgba(20, 184, 166, 0.7) 77%,
-                    rgba(20, 184, 166, 0) 85%,
-                    rgba(236, 72, 153, 0) 88%,
-                    rgba(236, 72, 153, 0.7) 93%,
-                    rgba(236, 72, 153, 1) 97%,
-                    rgba(251, 191, 36, 1) 100%
-                  )`,
-                  animation: 'rotate-gradient 7s linear infinite, border-pulse 4s ease-in-out infinite',
-                  filter: 'blur(1px)',
-                  opacity: 0.95,
-                }}
-              />
-
-              {/* Layer 2: Secondary gradient (counter-clockwise) - stronger */}
-              <div
-                className="absolute rounded-full"
-                style={{
-                  inset: '1px',
-                  background: `conic-gradient(
-                    from 180deg,
-                    rgba(168, 85, 247, 0.85) 0%,
-                    rgba(168, 85, 247, 0.5) 10%,
-                    rgba(168, 85, 247, 0) 20%,
-                    rgba(20, 184, 166, 0) 30%,
-                    rgba(20, 184, 166, 0.5) 40%,
-                    rgba(20, 184, 166, 0.85) 50%,
-                    rgba(20, 184, 166, 0.5) 60%,
-                    rgba(20, 184, 166, 0) 70%,
-                    rgba(251, 191, 36, 0) 75%,
-                    rgba(251, 191, 36, 0.5) 85%,
-                    rgba(251, 191, 36, 0.85) 95%,
-                    rgba(168, 85, 247, 0.85) 100%
-                  )`,
-                  animation: 'rotate-gradient-reverse 9s linear infinite',
-                  filter: 'blur(0.75px)',
-                  opacity: 0.75,
-                }}
-              />
-
-              {/* Inner mask with glowing edge */}
-              <div
-                className="absolute rounded-full bg-background"
-                style={{
-                  inset: '4px',
-                  animation: 'inner-glow-pulse 5s ease-in-out infinite',
-                }}
-              />
-
-              {/* Main FAB button */}
-              <Button
-                onClick={openChat}
-                variant="ghost"
-                className="absolute rounded-full hover:scale-105 transition-all duration-300 bg-background/80 hover:bg-background/95 border-0 backdrop-blur-sm"
-                style={{
-                  inset: '2.5px',
-                  width: 'auto',
-                  height: 'auto',
-                }}
-              >
-                <Zap
-                  className="h-6 w-6"
-                  style={{
-                    animation: 'icon-pulse 2.5s ease-in-out infinite',
-                    color: '#fbbf24',
-                    fill: '#fbbf24',
-                  }}
-                />
-              </Button>
-            </div>
-          </div>
-        </div>
-      </Portal>
-    );
-  }
-
-  // Mode: sidebar - full-height panel on the right (desktop only)
-  if (displayMode === 'sidebar') {
-    return (
-      <Portal>
-        <ChatSidebar />
-      </Portal>
-    );
-  }
-
-  // Mode: floating - fullscreen on mobile (via Portal), floating panel on desktop
-  if (isMobile) {
-    return (
-      <Portal>
-        <div
-          className="z-[400] overflow-hidden"
-          style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            width: '100vw',
-            height: '100dvh',
-          }}
-        >
-          <ChatPanel />
-        </div>
-      </Portal>
-    );
-  }
-
-  return (
-    <Portal>
-      <div style={floatingStyles} className={className || ''}>
-        <ChatPanel />
-      </div>
-    </Portal>
-  );
-});
-
-AIChatWidgetInternal.displayName = 'AIChatWidgetInternal';
-
-/**
- * AI Chat Widget component
- *
- * AI-powered documentation assistant with streaming support.
- * Uses Mastra agent backend for intelligent responses.
- *
- * Can be used in two ways:
- * 1. Standalone (wraps itself in AIChatProvider)
- * 2. Inside an AIChatProvider (uses context directly)
- *
- * @example
- * ```tsx
- * // Standalone usage (always uses production API)
- * <AIChatWidget />
- *
- * // Auto-detect environment (dev/prod)
- * <AIChatWidget autoDetectEnvironment={true} />
- *
- * // With provider for custom control
- * <AIChatProvider apiEndpoint="/api/ai/chat">
- *   <MyApp />
- *   <AIChatWidget />
- * </AIChatProvider>
- * ```
- */
-export const AIChatWidget: React.FC<AIChatWidgetProps> = ({
-  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',
-  className,
-  enableStreaming = true,
-  autoDetectEnvironment = false,
-}) => {
-  // Check if we're inside an AIChatProvider
-  const existingContext = useAIChatContextOptional();
-
-  // If already in context, use internal widget directly
-  if (existingContext) {
-    return <AIChatWidgetInternal className={className} />;
-  }
-
-  // Determine API endpoint: use provided, or get from config based on autoDetect
-  const finalApiEndpoint = apiEndpoint || getMcpEndpoints(autoDetectEnvironment).chat;
-
-  // Otherwise, wrap in provider
-  return (
-    <AIChatProvider
-      apiEndpoint={finalApiEndpoint}
-      config={{ title, placeholder, greeting, position, variant, autoDetectEnvironment }}
-      enableStreaming={enableStreaming}
-    >
-      <AIChatWidgetInternal className={className} />
-    </AIChatProvider>
-  );
-};
-
-AIChatWidget.displayName = 'AIChatWidget';

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

@@ -1,92 +0,0 @@
-'use client';
-
-import { Bot } from 'lucide-react';
-
-import { Button, ButtonProps} from '@djangocfg/ui-core';
-
-import { useMcpChat } from '../hooks/useMcpChat';
-
-import type { McpChatEventDetail } from '../types';
-
-export interface AskAIButtonProps extends Omit<ButtonProps, 'onClick'> {
-  /** Message to send to AI */
-  message: string;
-  /** Additional context data */
-  contextData?: Record<string, any>;
-  /** Source component name */
-  source?: string;
-  /** Auto-send message (default: true) */
-  autoSend?: boolean;
-  /** Show icon (default: true) */
-  showIcon?: boolean;
-  /** Callback after sending */
-  onSent?: () => void;
-}
-
-/**
- * Universal AI chat trigger button
- *
- * @example Basic usage
- * ```tsx
- * <AskAIButton message="Explain this feature">
- *   Explain this
- * </AskAIButton>
- * ```
- *
- * @example With context
- * ```tsx
- * <AskAIButton
- *   message="Why is this failing?"
- *   contextData={{ error: error.stack }}
- *   source="ErrorBoundary"
- * >
- *   Ask AI
- * </AskAIButton>
- * ```
- */
-export function AskAIButton({
-  message,
-  contextData,
-  source,
-  autoSend = true,
-  showIcon = true,
-  onSent,
-  children = 'Ask AI',
-  variant = 'outline',
-  size = 'default',
-  className,
-  ...buttonProps
-}: AskAIButtonProps) {
-  const { sendToChat } = useMcpChat();
-
-  const handleClick = () => {
-    const detail: McpChatEventDetail = {
-      message,
-      autoSend,
-      // No displayMode - chat will use remembered mode automatically
-    };
-
-    if (contextData || source) {
-      detail.context = {
-        data: contextData,
-        source,
-      };
-    }
-
-    sendToChat(detail);
-    onSent?.();
-  };
-
-  return (
-    <Button
-      onClick={handleClick}
-      variant={variant}
-      size={size}
-      className={className}
-      {...buttonProps}
-    >
-      {showIcon && <Bot className="h-4 w-4 mr-2" />}
-      {children}
-    </Button>
-  );
-}

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

@@ -1,138 +0,0 @@
-'use client';
-
-import { Bot, MessageSquare, StopCircle } from 'lucide-react';
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-
-import { Button } from '@djangocfg/ui-core';
-
-import { MessageBubble } from './MessageBubble';
-
-import type { AIChatMessage } from '../types';
-
-/**
- * ChatMessages imperative handle
- */
-export interface ChatMessagesHandle {
-  scrollToBottom: (instant?: boolean) => void;
-  scrollToLastMessage: (instant?: boolean) => void;
-}
-
-export interface ChatMessagesProps {
-  /** Messages to display */
-  messages: AIChatMessage[];
-  /** Whether loading/streaming is in progress */
-  isLoading: boolean;
-  /** Greeting to show when no messages */
-  greeting?: string;
-  /** Callback to stop streaming */
-  onStopStreaming?: () => void;
-  /** Use compact layout (smaller bubbles) */
-  isCompact?: boolean;
-  /** Use larger icon for greeting (sidebar mode) */
-  largeGreetingIcon?: boolean;
-  /** Custom greeting icon */
-  greetingIcon?: 'bot' | 'message';
-  /** Custom greeting title */
-  greetingTitle?: string;
-}
-
-/**
- * ChatMessages - Shared component for displaying chat messages
- *
- * Uses flex-col-reverse for natural bottom scroll behavior:
- * - Scroll position 0 = visual bottom
- * - New content naturally stays at bottom
- * - No complex JS scroll management needed
- */
-export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
-  (
-    {
-      messages,
-      isLoading,
-      greeting,
-      onStopStreaming,
-      isCompact = false,
-      largeGreetingIcon = false,
-      greetingIcon = 'bot',
-      greetingTitle,
-    },
-    ref
-  ) => {
-    const scrollContainerRef = useRef<HTMLDivElement>(null);
-
-    // Expose scroll methods via ref (for compatibility)
-    useImperativeHandle(ref, () => ({
-      scrollToBottom: () => {
-        // With flex-col-reverse, scroll to top = visual bottom
-        scrollContainerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
-      },
-      scrollToLastMessage: () => {
-        scrollContainerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
-      },
-    }), []);
-
-    // No manual scroll effects needed - flex-col-reverse handles it naturally
-
-    const GreetingIcon = greetingIcon === 'message' ? MessageSquare : Bot;
-    const iconSize = largeGreetingIcon ? { container: '64px', icon: 'h-8 w-8' } : { container: '48px', icon: 'h-6 w-6' };
-    const padding = largeGreetingIcon ? 'py-12' : 'py-8';
-
-    return (
-      <div ref={scrollContainerRef} className="h-full w-full overflow-y-auto flex flex-col-reverse">
-        <div className={`${isCompact ? 'p-3' : 'p-4'} space-y-4 max-w-full overflow-x-hidden`}>
-          {/* Greeting */}
-          {messages.length === 0 && greeting && (
-            <div className={`text-center ${padding}`}>
-              <div
-                className="mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center"
-                style={{ width: iconSize.container, height: iconSize.container }}
-              >
-                <GreetingIcon className={`${iconSize.icon} text-primary`} />
-              </div>
-              {greetingTitle && (
-                <h4 className="font-medium mb-2">{greetingTitle}</h4>
-              )}
-              <p className={`text-sm text-muted-foreground ${largeGreetingIcon ? 'max-w-[300px]' : 'max-w-[280px]'} mx-auto`}>
-                {greeting}
-              </p>
-            </div>
-          )}
-
-          {/* Messages */}
-          {messages.map((message) => (
-            <div key={message.id} data-message-bubble>
-              <MessageBubble message={message} isCompact={isCompact} />
-            </div>
-          ))}
-
-          {/* Loading indicator with stop button */}
-          {isLoading && messages.length > 0 && (
-            <div className="flex items-center justify-between text-muted-foreground text-sm">
-              <div className="flex items-center gap-2">
-                <div className="flex gap-1">
-                  <span className="animate-bounce" style={{ animationDelay: '0ms' }}>.</span>
-                  <span className="animate-bounce" style={{ animationDelay: '150ms' }}>.</span>
-                  <span className="animate-bounce" style={{ animationDelay: '300ms' }}>.</span>
-                </div>
-                <span>Generating response...</span>
-              </div>
-              {onStopStreaming && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={onStopStreaming}
-                  className="h-6 px-2 text-xs"
-                >
-                  <StopCircle className="h-3 w-3 mr-1" />
-                  Stop
-                </Button>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-);
-
-ChatMessages.displayName = 'ChatMessages';