@djangocfg/layouts 2.0.5 → 2.0.7

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

@@ -34,7 +34,7 @@ import { Plus, RefreshCw } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { usePaymentsContext, useRootPaymentsContext } from '@djangocfg/api/cfg/contexts';
+import { usePaymentsContext, useRootPaymentsContext } from '@djangocfg/layouts/contexts';
 import { PAYMENT_EVENTS, closePaymentsDialog } from '../events';
 import { openPaymentDetailsDialog } from '../events';
 import { paymentsLogger } from '../../../utils/logger';

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/PaymentsLayout/views/overview/components/BalanceCard.tsx

@@ -16,7 +16,7 @@ import {
   Skeleton,
 } from '@djangocfg/ui';
 import { Wallet, RefreshCw, Plus } from 'lucide-react';
-import { useOverviewContext } from '@djangocfg/api/cfg/contexts';
+import { useOverviewContext } from '@djangocfg/layouts/contexts';
 import { openCreatePaymentDialog } from '../../../events';
 
 export const BalanceCard: React.FC = () => {

package/src/layouts/PaymentsLayout/views/overview/components/RecentPayments.tsx

@@ -16,7 +16,7 @@ import {
   Skeleton,
 } from '@djangocfg/ui';
 import { History, ExternalLink } from 'lucide-react';
-import { useOverviewContext } from '@djangocfg/api/cfg/contexts';
+import { useOverviewContext } from '@djangocfg/layouts/contexts';
 import { openPaymentDetailsDialog } from '../../../events';
 
 export const RecentPayments: React.FC = () => {

package/src/layouts/PaymentsLayout/views/transactions/components/TransactionsList.tsx

@@ -28,7 +28,7 @@ import {
   Skeleton,
 } from '@djangocfg/ui';
 import { History, Search, Filter, RefreshCw, ArrowUpRight, ArrowDownLeft } from 'lucide-react';
-import { useOverviewContext } from '@djangocfg/api/cfg/contexts';
+import { useOverviewContext } from '@djangocfg/layouts/contexts';
 
 export const TransactionsList: React.FC = () => {
   const {

package/src/layouts/ProfileLayout/components/ProfileForm.tsx

@@ -23,7 +23,7 @@ import {
   useAccountsContext,
   PatchedUserProfileUpdateRequestSchema,
   type PatchedUserProfileUpdateRequest
-} from '@djangocfg/layouts/auth/context';
+} from '../../../auth/context';
 import { useAuth } from '../../../auth';
 
 export const ProfileForm = () => {

package/src/layouts/SupportLayout/SupportLayout.tsx

@@ -7,7 +7,7 @@
 'use client';
 
 import React from 'react';
-import { SupportProvider } from '@djangocfg/api/cfg/contexts';
+import { SupportProvider } from '@djangocfg/layouts/contexts';
 import { SupportLayoutProvider, useSupportLayoutContext } from './context';
 import {
   TicketList,

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/TicketCard.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { Badge, Card, CardContent, cn } from '@djangocfg/ui';
 import { Clock, MessageSquare } from 'lucide-react';
-import type { Ticket } from '@djangocfg/api/cfg/contexts';
+import type { Ticket } from '@djangocfg/layouts/contexts';
 
 interface TicketCardProps {
   ticket: Ticket;

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/layouts/SupportLayout/context/SupportLayoutContext.tsx

@@ -6,7 +6,7 @@
 'use client';
 
 import React, { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from 'react';
-import { useSupportContext, type Ticket } from '@djangocfg/api/cfg/contexts';
+import { useSupportContext, type Ticket } from '@djangocfg/layouts/contexts';
 import { CfgSupportTypes } from '@djangocfg/api';
 import { supportLogger } from '../../../utils/logger';
 

package/src/layouts/SupportLayout/index.ts

@@ -1,6 +1,8 @@
 export * from './SupportLayout';
 export * from './context';
 export * from './events';
+// types.ts only contains UI-specific types (SupportUIState, TicketFormData)
+// Ticket and Message are exported from @djangocfg/layouts/contexts
 export * from './types';
 export * from './components';
 

package/src/layouts/SupportLayout/types.ts

@@ -3,10 +3,8 @@
  * Types for SupportLayout - combines API types with UI state
  */
 
-import type { Ticket, Message } from '@djangocfg/api/cfg/contexts';
-
-// Re-export API types
-export type { Ticket, Message };
+// Note: Ticket and Message types are exported from @djangocfg/layouts/contexts
+// Import them directly: import type { Ticket, Message } from '@djangocfg/layouts/contexts';
 
 // UI State
 export interface SupportUIState {

package/src/snippets/Chat/ChatWidget.tsx

@@ -17,7 +17,7 @@ import {
   Plus,
   List,
 } from 'lucide-react';
-import { useKnowbaseChatContext, useKnowbaseSessionsContext, type ChatSource } from '@djangocfg/api/cfg/contexts';
+import { useKnowbaseChatContext, useKnowbaseSessionsContext, type ChatSource } from '@djangocfg/layouts/contexts';
 import { Enums } from '@djangocfg/api/cfg/generated';
 import { chatLogger } from '../../utils/logger';
 import { useChatUI } from './ChatUIContext';

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

@@ -17,7 +17,7 @@ import {
   Badge,
 } from '@djangocfg/ui';
 import { MessageSquare, Clock, Archive, Trash2, Loader2 } from 'lucide-react';
-import { useKnowbaseSessionsContext } from '@djangocfg/api/cfg/contexts';
+import { useKnowbaseSessionsContext } from '@djangocfg/layouts/contexts';
 import { useInfiniteSessions } from '../hooks/useInfiniteSessions';
 import type { SessionListProps } from '../types';
 
@@ -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/Chat/index.tsx

@@ -7,7 +7,7 @@
 'use client';
 
 import React from 'react';
-import { KnowbaseChatProvider, KnowbaseSessionsProvider } from '@djangocfg/api/cfg/contexts';
+import { KnowbaseChatProvider, KnowbaseSessionsProvider } from '@djangocfg/layouts/contexts';
 import { ChatUIProvider } from './ChatUIContext';
 import { ChatWidget } from './ChatWidget';
 import type { ChatWidgetProps } from './types';

package/src/snippets/Chat/types.ts

@@ -3,7 +3,13 @@
  * Type definitions for RAG-powered chat widget
  */
 
-import type { ChatMessage, ChatSource } from '@djangocfg/api/cfg/contexts';
+// Import types from Schemas namespace - explicitly exported and works reliably
+// Types are available via Schemas namespace even when direct exports have issues
+import type { Schemas } from '@djangocfg/api';
+
+// Extract types from Schemas namespace
+export type ChatMessage = Schemas.ChatMessage;
+export type ChatSource = Schemas.ChatSource;
 
 // ─────────────────────────────────────────────────────────────────────────
 // Extended Message Type (for UI with sources)
@@ -70,9 +76,5 @@ export interface SessionListProps {
   className?: string;
 }
 
-// ─────────────────────────────────────────────────────────────────────────
-// Re-export types from API
-// ─────────────────────────────────────────────────────────────────────────
 
-export type { ChatSource, ChatMessage } from '@djangocfg/api/cfg/contexts';
 

package/src/snippets/ContactForm/ContactForm.tsx

@@ -145,20 +145,32 @@ function ContactFormInner({
 
   // Watch form values and save to localStorage
   const watchedValues = useWatch({ control: form.control });
+  const prevDraftRef = React.useRef<FormDraft>(draft);
 
   useEffect(() => {
     // Only save to localStorage after hydration to avoid unnecessary writes
     if (!isHydrated) return;
 
     const { name, email, company, subject, message } = watchedValues;
-    if (name || email || company || subject || message) {
-      setDraft({
-        name: name || '',
-        email: email || '',
-        company: company || '',
-        subject: subject || '',
-        message: message || '',
-      });
+    const newDraft: FormDraft = {
+      name: name || '',
+      email: email || '',
+      company: company || '',
+      subject: subject || '',
+      message: message || '',
+    };
+
+    // Only update if draft actually changed to prevent infinite loop
+    const hasChanges = 
+      prevDraftRef.current.name !== newDraft.name ||
+      prevDraftRef.current.email !== newDraft.email ||
+      prevDraftRef.current.company !== newDraft.company ||
+      prevDraftRef.current.subject !== newDraft.subject ||
+      prevDraftRef.current.message !== newDraft.message;
+
+    if (hasChanges && (name || email || company || subject || message)) {
+      prevDraftRef.current = newDraft;
+      setDraft(newDraft);
     }
   }, [watchedValues, setDraft, isHydrated]);
 

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';