@djangocfg/layouts 2.0.6 → 2.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,28 +92,29 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.36",
-    "@djangocfg/centrifugo": "^1.4.36",
-    "@djangocfg/ui": "^1.4.36",
+    "@djangocfg/api": "^1.4.37",
+    "@djangocfg/centrifugo": "^1.4.37",
+    "@djangocfg/ui": "^1.4.37",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
-    "lucide-react": "^0.468.0",
-    "next": "^15.4.4",
+    "lucide-react": "^0.545.0",
+    "next": ">=15.0.0",
     "p-retry": "^7.0.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-hook-form": "7.65.0",
-    "sonner": "2.0.6",
+    "sonner": "2.0.7",
     "swr": "^2.3.0",
-    "tailwindcss": "^4.0.0",
+    "tailwindcss": "^4.1.14",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.0.10"
+    "zod": "^4.1.13"
   },
   "dependencies": {
-    "react-ga4": "^2.1.0"
+    "react-ga4": "^2.1.0",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.36",
+    "@djangocfg/typescript-config": "^1.4.37",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/PaymentsLayout/components/PaymentDetailsDialog.tsx

@@ -15,8 +15,9 @@ import {
   DialogTitle,
   Button,
   TokenIcon,
+  CopyButton,
 } from '@djangocfg/ui';
-import { Copy, ExternalLink, CheckCircle2, Clock, XCircle, AlertCircle, RefreshCw } from 'lucide-react';
+import { ExternalLink, CheckCircle2, Clock, XCircle, AlertCircle, RefreshCw } from 'lucide-react';
 import { Hooks, api } from '@djangocfg/api';
 import type { API } from '@djangocfg/api';
 import { PAYMENT_EVENTS } from '../events';
@@ -24,7 +25,6 @@ import { PAYMENT_EVENTS } from '../events';
 export const PaymentDetailsDialog: React.FC = () => {
   const [open, setOpen] = useState(false);
   const [paymentId, setPaymentId] = useState<string | null>(null);
-  const [copied, setCopied] = useState(false);
   const [timeLeft, setTimeLeft] = useState<string>('');
 
   // Load payment data by ID using hook
@@ -61,14 +61,6 @@ export const PaymentDetailsDialog: React.FC = () => {
     setPaymentId(null);
   };
 
-  const handleCopyAddress = async () => {
-    if (payment?.pay_address) {
-      await navigator.clipboard.writeText(payment.pay_address);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  };
-
   // Calculate time left until expiration
   useEffect(() => {
     if (!payment?.expires_at) return;
@@ -237,18 +229,7 @@ export const PaymentDetailsDialog: React.FC = () => {
                 <div className="flex-1 p-3 bg-muted rounded-sm font-mono text-sm break-all">
                   {payment.pay_address}
                 </div>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={handleCopyAddress}
-                  className="shrink-0"
-                >
-                  {copied ? (
-                    <CheckCircle2 className="h-4 w-4 text-green-500" />
-                  ) : (
-                    <Copy className="h-4 w-4" />
-                  )}
-                </Button>
+                <CopyButton value={payment.pay_address} variant="outline" />
               </div>
             </div>
           )}

package/src/layouts/SupportLayout/components/MessageList.tsx

@@ -230,7 +230,7 @@ export const MessageList: React.FC = () => {
   }
 
   return (
-    <ScrollArea className="h-full bg-muted/50" ref={scrollAreaRef}>
+    <ScrollArea className="h-full bg-muted/50" viewportRef={scrollAreaRef}>
       <div className="p-6 space-y-4" ref={scrollRef}>
         {/* Load more trigger at the top */}
         <div ref={loadMoreRef} className="h-2" />

package/src/layouts/SupportLayout/components/TicketList.tsx

@@ -97,7 +97,7 @@ export const TicketList: React.FC = () => {
   }
 
   return (
-    <ScrollArea className="h-full" ref={scrollRef}>
+    <ScrollArea className="h-full" viewportRef={scrollRef}>
       <div className="p-4 space-y-2">
         {tickets.map((ticket, index) => (
           <div

package/src/snippets/Chat/components/MessageList.tsx

@@ -43,7 +43,7 @@ export const MessageList: React.FC<MessageListProps> = ({
   };
 
   return (
-    <ScrollArea className={`h-full bg-muted/50 ${className}`} ref={scrollRef}>
+    <ScrollArea className={`h-full bg-muted/50 ${className}`} viewportRef={scrollRef}>
       <div className="space-y-4 p-4">
         {messages.length === 0 && !isLoading ? (
           <div className="flex flex-col items-center justify-center h-full text-center py-12">

package/src/snippets/Chat/components/SessionList.tsx

@@ -82,7 +82,7 @@ export const SessionList: React.FC<SessionListProps> = ({
           </SheetDescription>
         </SheetHeader>
 
-        <ScrollArea className="h-[calc(100vh-120px)] mt-6" ref={scrollRef}>
+        <ScrollArea className="h-[calc(100vh-120px)] mt-6" viewportRef={scrollRef}>
           {isLoading ? (
             <div className="flex items-center justify-center py-12">
               <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />

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

@@ -0,0 +1,268 @@
+'use client';
+
+import React from 'react';
+import { Button, Portal } from '@djangocfg/ui';
+import { Zap } from 'lucide-react';
+import { ChatPanel } from './ChatPanel';
+import { ChatSidebar } from './ChatSidebar';
+import { useAIChatContext, useAIChatContextOptional, AIChatProvider } from '../context/AIChatContext';
+import { useChatLayout } from '../hooks/useChatLayout';
+import { mcpEndpoints, type ChatWidgetConfig } from '../types';
+
+// CSS for mysterious rotating border animation with multi-color ethereal effects
+const fabAnimationStyles = `
+@keyframes rotate-gradient {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+@keyframes color-shift-glow {
+  0%, 100% {
+    box-shadow:
+      0 0 15px rgba(251, 191, 36, 0.4),
+      0 0 30px rgba(168, 85, 247, 0.2),
+      0 0 45px rgba(20, 184, 166, 0.1);
+  }
+  25% {
+    box-shadow:
+      0 0 18px rgba(168, 85, 247, 0.4),
+      0 0 35px rgba(20, 184, 166, 0.25),
+      0 0 50px rgba(251, 191, 36, 0.1);
+  }
+  50% {
+    box-shadow:
+      0 0 20px rgba(20, 184, 166, 0.4),
+      0 0 40px rgba(251, 191, 36, 0.2),
+      0 0 55px rgba(168, 85, 247, 0.15);
+  }
+  75% {
+    box-shadow:
+      0 0 17px rgba(236, 72, 153, 0.35),
+      0 0 32px rgba(168, 85, 247, 0.25),
+      0 0 48px rgba(20, 184, 166, 0.1);
+  }
+}
+@keyframes icon-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+    filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.5));
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(0.95);
+    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.8));
+  }
+}
+`;
+
+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 {
+    messages,
+    isLoading,
+    isMinimized,
+    config,
+    displayMode,
+    isMobile,
+    sendMessage,
+    openChat,
+    closeChat,
+    toggleMinimize,
+    setDisplayMode,
+    stopStreaming,
+  } = 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 multi-color rotating border animation
+  if (displayMode === 'closed') {
+    return (
+      <Portal>
+        <style>{fabAnimationStyles}</style>
+        <div style={fabStyles} className={className || ''}>
+          {/* Outer glow container with color-shifting animation */}
+          <div
+            className="relative rounded-full"
+            style={{
+              width: '64px',
+              height: '64px',
+              animation: 'color-shift-glow 6s ease-in-out infinite',
+            }}
+          >
+            {/* Border container - clips the rotating gradient */}
+            <div
+              className="absolute rounded-full group"
+              style={{
+                inset: '0',
+                overflow: 'hidden',
+              }}
+            >
+              {/* Rotating conic gradient - multi-color organic glow */}
+              <div
+                className="absolute"
+                style={{
+                  width: '200%',
+                  height: '200%',
+                  top: '-50%',
+                  left: '-50%',
+                  background: `conic-gradient(
+                    from 0deg,
+                    #fbbf24 0%,
+                    transparent 8%,
+                    #a855f7 18%,
+                    transparent 28%,
+                    #14b8a6 38%,
+                    transparent 52%,
+                    #ec4899 62%,
+                    transparent 75%,
+                    #fbbf24 88%,
+                    transparent 95%,
+                    #a855f7 100%
+                  )`,
+                  animation: 'rotate-gradient 5s linear infinite',
+                  opacity: 0.9,
+                }}
+              />
+              {/* Inner mask - creates the thin organic border */}
+              <div
+                className="absolute rounded-full bg-background"
+                style={{ inset: '1.5px' }}
+              />
+              {/* Main FAB button */}
+              <Button
+                onClick={openChat}
+                variant="ghost"
+                className="absolute rounded-full hover:scale-105 transition-all duration-300 bg-background hover:bg-background/95 border-0"
+                style={{
+                  inset: '1.5px',
+                  width: 'auto',
+                  height: 'auto',
+                }}
+              >
+                <Zap
+                  className="h-6 w-6"
+                  style={{
+                    animation: 'icon-pulse 2s 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
+          messages={messages}
+          isLoading={isLoading}
+          onSendMessage={sendMessage}
+          onClose={closeChat}
+          onModeChange={setDisplayMode}
+          onStopStreaming={stopStreaming}
+          title={config.title}
+          placeholder={config.placeholder}
+          greeting={config.greeting}
+        />
+      </Portal>
+    );
+  }
+
+  // Mode: floating - floating panel
+  return (
+    <Portal>
+      <div style={floatingStyles} className={className || ''}>
+        <ChatPanel
+          messages={messages}
+          isLoading={isLoading}
+          onSendMessage={sendMessage}
+          onClose={closeChat}
+          onMinimize={toggleMinimize}
+          onModeChange={setDisplayMode}
+          onStopStreaming={stopStreaming}
+          isMinimized={isMinimized}
+          isMobile={isMobile}
+          title={config.title}
+          placeholder={config.placeholder}
+          greeting={config.greeting}
+        />
+      </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
+ * <AIChatWidget apiEndpoint="/api/ai/chat" />
+ *
+ * // With provider for custom control
+ * <AIChatProvider apiEndpoint="/api/ai/chat">
+ *   <MyApp />
+ *   <AIChatWidget />
+ * </AIChatProvider>
+ * ```
+ */
+export const AIChatWidget: React.FC<AIChatWidgetProps> = ({
+  apiEndpoint = mcpEndpoints.chat,
+  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',
+  className,
+  enableStreaming = true,
+}) => {
+  // Check if we're inside an AIChatProvider
+  const existingContext = useAIChatContextOptional();
+
+  // If already in context, use internal widget directly
+  if (existingContext) {
+    return <AIChatWidgetInternal className={className} />;
+  }
+
+  // Otherwise, wrap in provider
+  return (
+    <AIChatProvider
+      apiEndpoint={apiEndpoint}
+      config={{ title, placeholder, greeting, position, variant }}
+      enableStreaming={enableStreaming}
+    >
+      <AIChatWidgetInternal className={className} />
+    </AIChatProvider>
+  );
+};
+
+AIChatWidget.displayName = 'AIChatWidget';

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

@@ -0,0 +1,151 @@
+'use client';
+
+import React, { useRef, useEffect, useCallback, useImperativeHandle, forwardRef } from 'react';
+import { ScrollArea, Button, type ScrollAreaHandle } from '@djangocfg/ui';
+import { Bot, MessageSquare, StopCircle } from 'lucide-react';
+import { MessageBubble } from './MessageBubble';
+import type { AIChatMessage } from '../types';
+
+/**
+ * ChatMessages imperative handle
+ */
+export interface ChatMessagesHandle {
+  scrollToBottom: (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
+ *
+ * Handles:
+ * - Messages list rendering
+ * - Greeting display when empty
+ * - Loading indicator with stop button
+ * - Auto-scroll on new messages
+ * - Initial scroll on history load
+ */
+export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
+  (
+    {
+      messages,
+      isLoading,
+      greeting,
+      onStopStreaming,
+      isCompact = false,
+      largeGreetingIcon = false,
+      greetingIcon = 'bot',
+      greetingTitle,
+    },
+    ref
+  ) => {
+    const scrollAreaRef = useRef<ScrollAreaHandle>(null);
+    const hasScrolledOnLoad = useRef(false);
+
+    // Scroll to bottom helper
+    const scrollToBottom = useCallback((instant = false) => {
+      if (scrollAreaRef.current) {
+        scrollAreaRef.current.scrollToBottom(instant ? 'instant' : 'smooth');
+      }
+    }, []);
+
+    // Expose scrollToBottom via ref
+    useImperativeHandle(ref, () => ({
+      scrollToBottom,
+    }), [scrollToBottom]);
+
+    // Initial scroll when history loads (instant, no animation)
+    useEffect(() => {
+      if (!isLoading && messages.length > 0 && !hasScrolledOnLoad.current) {
+        requestAnimationFrame(() => {
+          scrollToBottom(true);
+          hasScrolledOnLoad.current = true;
+        });
+      }
+    }, [isLoading, messages.length, scrollToBottom]);
+
+    // Scroll to bottom on new messages (smooth animation)
+    useEffect(() => {
+      if (hasScrolledOnLoad.current && messages.length > 0) {
+        scrollToBottom(false);
+      }
+    }, [messages, scrollToBottom]);
+
+    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 (
+      <ScrollArea ref={scrollAreaRef} className="h-full">
+        <div className={`${isCompact ? 'p-3' : 'p-4'} space-y-4`}>
+          {/* 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) => (
+            <MessageBubble key={message.id} message={message} isCompact={isCompact} />
+          ))}
+
+          {/* 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>
+      </ScrollArea>
+    );
+  }
+);
+
+ChatMessages.displayName = 'ChatMessages';

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

@@ -0,0 +1,126 @@
+'use client';
+
+import React from 'react';
+import { Card, CardHeader, CardContent, CardFooter, Button } from '@djangocfg/ui';
+import { X, Minimize2, PanelRight, Bot } from 'lucide-react';
+import type { ChatDisplayMode, AIChatMessage } from '../types';
+import { ChatMessages } from './ChatMessages';
+import { AIMessageInput } from './MessageInput';
+
+export interface ChatPanelProps {
+  messages: AIChatMessage[];
+  isLoading: boolean;
+  onSendMessage: (content: string) => void;
+  onClose?: () => void;
+  onMinimize?: () => void;
+  onModeChange?: (mode: ChatDisplayMode) => void;
+  onStopStreaming?: () => void;
+  isMinimized?: boolean;
+  isMobile?: boolean;
+  title?: string;
+  placeholder?: string;
+  greeting?: string;
+}
+
+export const ChatPanel = React.memo<ChatPanelProps>(
+  ({
+    messages,
+    isLoading,
+    onSendMessage,
+    onClose,
+    onMinimize,
+    onModeChange,
+    onStopStreaming,
+    isMinimized = false,
+    isMobile = false,
+    title = 'DjangoCFG Assistant',
+    placeholder,
+    greeting,
+  }) => {
+    if (isMinimized) {
+      return (
+        <Button
+          onClick={onMinimize}
+          className="rounded-full shadow-lg"
+          style={{ width: '56px', height: '56px' }}
+        >
+          <Bot className="h-6 w-6" />
+        </Button>
+      );
+    }
+
+    return (
+      <Card
+        className="flex flex-col shadow-2xl border-border/50"
+        style={{
+          width: '380px',
+          height: '520px',
+          maxHeight: 'calc(100vh - 100px)',
+        }}
+      >
+        {/* Header */}
+        <CardHeader className="flex flex-row items-center justify-between p-3 border-b">
+          <div className="flex items-center gap-2">
+            <div
+              className="rounded-full bg-primary/10 flex items-center justify-center"
+              style={{ width: '32px', height: '32px' }}
+            >
+              <Bot className="h-4 w-4 text-primary" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-sm">{title}</h3>
+              <p className="text-xs text-muted-foreground">AI-powered documentation assistant</p>
+            </div>
+          </div>
+          <div className="flex gap-1">
+            {/* Sidebar mode button - only on desktop */}
+            {onModeChange && !isMobile && (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => onModeChange('sidebar')}
+                title="Switch to sidebar mode"
+              >
+                <PanelRight className="h-4 w-4" />
+              </Button>
+            )}
+            {onMinimize && (
+              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onMinimize} title="Minimize">
+                <Minimize2 className="h-4 w-4" />
+              </Button>
+            )}
+            {onClose && (
+              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onClose} title="Close">
+                <X className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
+        </CardHeader>
+
+        {/* Messages */}
+        <CardContent className="flex-1 p-0 overflow-hidden">
+          <ChatMessages
+            messages={messages}
+            isLoading={isLoading}
+            greeting={greeting}
+            onStopStreaming={onStopStreaming}
+            isCompact
+            greetingIcon="bot"
+          />
+        </CardContent>
+
+        {/* Input */}
+        <CardFooter className="p-3 border-t">
+          <AIMessageInput
+            onSend={onSendMessage}
+            isLoading={isLoading}
+            placeholder={placeholder}
+          />
+        </CardFooter>
+      </Card>
+    );
+  }
+);
+
+ChatPanel.displayName = 'ChatPanel';