@djangocfg/layouts 2.1.9 → 2.1.14

package/src/snippets/Chat/hooks/useInfiniteSessions.ts

@@ -1,82 +0,0 @@
-/**
- * Hook for infinite scroll chat sessions
- * Uses SWR Infinite for pagination
- */
-
-import useSWRInfinite from 'swr/infinite';
-import { api, Fetchers, CfgKnowbaseTypes } from '@djangocfg/api';
-import type { API } from '@djangocfg/api';
-
-type PaginatedChatSessionList = CfgKnowbaseTypes.PaginatedChatSessionList;
-type ChatSession = CfgKnowbaseTypes.ChatSession;
-
-const PAGE_SIZE = 20;
-
-export function useInfiniteSessions() {
-  const getKey = (pageIndex: number, previousPageData: PaginatedChatSessionList | null) => {
-    // Reached the end
-    if (previousPageData && !previousPageData.has_next) return null;
-    
-    // First page, no previous data
-    if (pageIndex === 0) return ['cfg-knowbase-admin-sessions-infinite', 1, PAGE_SIZE];
-    
-    // Add the page number to the SWR key
-    return ['cfg-knowbase-admin-sessions-infinite', pageIndex + 1, PAGE_SIZE];
-  };
-
-  const fetcher = async ([, page, pageSize]: [string, number, number]) => {
-    return Fetchers.getKnowbaseAdminSessionsList(
-      { page, page_size: pageSize },
-      api as unknown as API
-    );
-  };
-
-  const {
-    data,
-    error,
-    isLoading,
-    isValidating,
-    size,
-    setSize,
-    mutate,
-  } = useSWRInfinite<PaginatedChatSessionList>(getKey, fetcher, {
-    revalidateFirstPage: false,
-    parallel: false,
-  });
-
-  // Flatten all pages into single array
-  const sessions: ChatSession[] = data ? data.flatMap((page) => page.results) : [];
-  
-  // Check if there are more pages
-  const hasMore = data && data[data.length - 1]?.has_next;
-  
-  // Total count from last page
-  const totalCount = data && data[data.length - 1]?.count;
-  
-  // Loading more state
-  const isLoadingMore = isValidating && data && typeof data[size - 1] !== 'undefined';
-
-  // Function to load next page
-  const loadMore = () => {
-    if (hasMore && !isLoadingMore) {
-      setSize(size + 1);
-    }
-  };
-
-  // Refresh all pages
-  const refresh = async () => {
-    await mutate();
-  };
-
-  return {
-    sessions,
-    isLoading,
-    isLoadingMore: isLoadingMore || false,
-    error,
-    hasMore: hasMore || false,
-    totalCount: totalCount || 0,
-    loadMore,
-    refresh,
-  };
-}
-

package/src/snippets/Chat/index.tsx

@@ -1,45 +0,0 @@
-// @ts-nocheck
-/**
- * Knowledge Chat Module
- * Complete RAG-powered chat widget with context providers
- */
-
-'use client';
-
-import React from 'react';
-import { KnowbaseChatProvider, KnowbaseSessionsProvider } from '@djangocfg/layouts/contexts';
-import { ChatUIProvider } from './ChatUIContext';
-import { ChatWidget } from './ChatWidget';
-import type { ChatWidgetProps } from './types';
-
-// ─────────────────────────────────────────────────────────────────────────
-// Main Component with Providers
-// ─────────────────────────────────────────────────────────────────────────
-
-export const KnowledgeChat: React.FC<ChatWidgetProps> = (props) => {
-  return (
-    <KnowbaseChatProvider>
-      <KnowbaseSessionsProvider>
-        <ChatUIProvider initialState={{ isOpen: false }}>
-          <ChatWidget {...props} />
-        </ChatUIProvider>
-      </KnowbaseSessionsProvider>
-    </KnowbaseChatProvider>
-  );
-};
-
-// ─────────────────────────────────────────────────────────────────────────
-// Named Exports
-// ─────────────────────────────────────────────────────────────────────────
-
-export { ChatWidget } from './ChatWidget';
-export { ChatUIProvider, useChatUI } from './ChatUIContext';
-export { MessageList, MessageInput, SessionList } from './components';
-export * from './types';
-
-// ─────────────────────────────────────────────────────────────────────────
-// Default Export
-// ─────────────────────────────────────────────────────────────────────────
-
-export default KnowledgeChat;
-

package/src/snippets/Chat/types.ts

@@ -1,80 +0,0 @@
-/**
- * Chat Types
- * Type definitions for RAG-powered chat widget
- */
-
-// 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)
-// ─────────────────────────────────────────────────────────────────────────
-
-export interface ChatMessageWithSources extends ChatMessage {
-  sources?: ChatSource[];
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Widget Props
-// ─────────────────────────────────────────────────────────────────────────
-
-export interface ChatWidgetProps {
-  /** Whether to auto-open on mount */
-  autoOpen?: boolean;
-  /** Render even when closed (for animations) */
-  persistent?: boolean;
-  /** Additional CSS classes */
-  className?: string;
-  /** Callback when toggle state changes */
-  onToggle?: (isOpen: boolean) => void;
-  /** Callback when message is sent */
-  onMessage?: (message: ChatMessageWithSources) => void;
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// UI State
-// ─────────────────────────────────────────────────────────────────────────
-
-export interface ChatUIState {
-  isOpen: boolean;
-  isExpanded: boolean;
-  isMinimized: boolean;
-  showSources: boolean;
-  showTimestamps: boolean;
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Component Props
-// ─────────────────────────────────────────────────────────────────────────
-
-export interface MessageListProps {
-  messages: ChatMessageWithSources[];
-  isLoading?: boolean;
-  showSources?: boolean;
-  showTimestamps?: boolean;
-  autoScroll?: boolean;
-  className?: string;
-}
-
-export interface MessageInputProps {
-  onSend: (message: string) => Promise<void>;
-  isLoading?: boolean;
-  disabled?: boolean;
-  placeholder?: string;
-  className?: string;
-}
-
-export interface SessionListProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSelectSession: (sessionId: string) => void;
-  className?: string;
-}
-
-
-

package/src/snippets/ContactForm/ContactForm.tsx

@@ -1,346 +0,0 @@
-// @ts-nocheck
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import { useForm, useWatch } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Schemas, type Schemas as SchemaTypes } from '@djangocfg/api';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-  Textarea,
-  Button,
-  useToast,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  cn,
-  useLocalStorage,
-} from '@djangocfg/ui-nextjs';
-import { Send, CheckCircle2, ArrowLeft } from 'lucide-react';
-import type { ContactFormTexts, LeadSubmissionResult } from './types';
-import { DEFAULT_FORM_TEXTS } from './types';
-import { ContactFormProvider, useContactForm } from './ContactFormProvider';
-
-type FormData = SchemaTypes.LeadSubmissionRequest;
-
-// ============================================================================
-// Props
-// ============================================================================
-
-export interface ContactFormProps {
-  /** API base URL for lead submission */
-  apiUrl: string;
-  /** Customizable texts */
-  texts?: Partial<ContactFormTexts>;
-  /** Show card wrapper (default: true) */
-  showCard?: boolean;
-  /** Submit button icon */
-  submitIcon?: React.ReactNode;
-  /** Additional className for form */
-  className?: string;
-  /** Reset form after successful submit (default: true) */
-  resetOnSuccess?: boolean;
-  /** Callback after successful submit */
-  onSuccess?: (result: LeadSubmissionResult) => void;
-  /** Callback on error */
-  onError?: (error: Error) => void;
-}
-
-// ============================================================================
-// Component
-// ============================================================================
-
-/**
- * ContactFormBase - Contact form using Django-CFG Lead API
- *
- * NOTE: Use ContactForm from index.ts which is dynamically imported (ssr: false)
- *
- * @example
- * ```tsx
- * import { ContactForm } from '@djangocfg/layouts';
- * <ContactForm apiUrl="https://api.example.com" />
- * ```
- */
-export function ContactFormBase({ apiUrl, ...props }: ContactFormProps) {
-  return (
-    <ContactFormProvider apiUrl={apiUrl}>
-      <ContactFormInner {...props} />
-    </ContactFormProvider>
-  );
-}
-
-// ============================================================================
-// Inner Form Component
-// ============================================================================
-
-const STORAGE_KEY = 'contact-form-draft';
-
-type FormDraft = {
-  name: string;
-  email: string;
-  company: string;
-  subject: string;
-  message: string;
-};
-
-const emptyDraft: FormDraft = {
-  name: '',
-  email: '',
-  company: '',
-  subject: '',
-  message: '',
-};
-
-function ContactFormInner({
-  texts = {},
-  showCard = true,
-  submitIcon,
-  className,
-  resetOnSuccess = true,
-  onSuccess,
-  onError,
-}: Omit<ContactFormProps, 'apiUrl'>) {
-  const { toast } = useToast();
-  const { submit, isSubmitting } = useContactForm();
-  const t = { ...DEFAULT_FORM_TEXTS, ...texts };
-  const [draft, setDraft, clearDraft] = useLocalStorage<FormDraft>(STORAGE_KEY, emptyDraft);
-  const [isSuccess, setIsSuccess] = useState(false);
-  const [isHydrated, setIsHydrated] = useState(false);
-
-  const form = useForm<FormData>({
-    resolver: zodResolver(Schemas.LeadSubmissionRequestSchema),
-    // Start with empty values to match SSR
-    defaultValues: {
-      ...emptyDraft,
-      site_url: '',
-    },
-  });
-
-  // Hydrate form with localStorage draft and site_url after mount
-  useEffect(() => {
-    if (isHydrated) return;
-    setIsHydrated(true);
-
-    // Apply draft from localStorage and set site_url
-    const currentValues = form.getValues();
-    const hasDraftData = draft.name || draft.email || draft.company || draft.subject || draft.message;
-    const currentSiteUrl = typeof window !== 'undefined' ? window.location.href : '';
-
-    if (hasDraftData || !currentValues.site_url) {
-      form.reset({
-        ...emptyDraft,
-        ...draft,
-        site_url: currentSiteUrl,
-      });
-    }
-  }, [draft, form, isHydrated]);
-
-  // 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;
-    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]);
-
-  const handleSubmit = async (data: FormData) => {
-    try {
-      const result = await submit(data);
-      if (resetOnSuccess) {
-        // Keep contact info (name, email, company), clear only message content
-        // Store current site_url before reset to avoid re-reading window.location
-        const currentValues = form.getValues();
-        const currentSiteUrl = currentValues.site_url || (typeof window !== 'undefined' ? window.location.href : '');
-        
-        form.reset({
-          name: currentValues.name,
-          email: currentValues.email,
-          company: currentValues.company,
-          subject: '',
-          message: '',
-          site_url: currentSiteUrl, // Keep the original site_url
-        });
-        // Update draft to keep contact info
-        setDraft({
-          name: currentValues.name || '',
-          email: currentValues.email || '',
-          company: currentValues.company || '',
-          subject: '',
-          message: '',
-        });
-      }
-      setIsSuccess(true);
-      onSuccess?.(result);
-    } catch (error) {
-      const err = error instanceof Error ? error : new Error(String(error));
-      toast({ title: t.errorTitle, description: err.message || t.errorMessage, variant: 'destructive' });
-      onError?.(err);
-    }
-  };
-
-  const handleReset = () => {
-    setIsSuccess(false);
-    // Keep contact info when returning to form
-    const currentDraft = draft;
-    form.reset({
-      name: currentDraft.name,
-      email: currentDraft.email,
-      company: currentDraft.company,
-      subject: '',
-      message: '',
-      site_url: typeof window !== 'undefined' ? window.location.href : '',
-    });
-  };
-
-  // Success state
-  if (isSuccess) {
-    const successContent = (
-      <div className="flex flex-col items-center justify-center py-12 text-center">
-        <div className="rounded-full bg-green-100 p-4 mb-6">
-          <CheckCircle2 className="h-12 w-12 text-green-600" />
-        </div>
-        <h3 className="text-2xl font-semibold mb-2">{t.successTitle}</h3>
-        <p className="text-muted-foreground mb-6 max-w-sm">{t.successMessage}</p>
-        <Button variant="outline" onClick={handleReset}>
-          <ArrowLeft className="mr-2 h-4 w-4" />
-          Send another message
-        </Button>
-      </div>
-    );
-
-    if (!showCard) return successContent;
-
-    return (
-      <Card>
-        <CardContent className="pt-6">{successContent}</CardContent>
-      </Card>
-    );
-  }
-
-  // Form
-  const formContent = (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} className={cn('space-y-4', className)}>
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Name *</FormLabel>
-              <FormControl>
-                <Input placeholder="Your name" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Email *</FormLabel>
-              <FormControl>
-                <Input type="email" placeholder="your@email.com" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="company"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Company</FormLabel>
-              <FormControl>
-                <Input placeholder="Your company (optional)" {...field} value={field.value ?? ''} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="subject"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Subject</FormLabel>
-              <FormControl>
-                <Input placeholder="What is this about?" {...field} value={field.value ?? ''} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="message"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Message *</FormLabel>
-              <FormControl>
-                <Textarea placeholder="Your message..." style={{ minHeight: '120px' }} {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <input type="hidden" {...form.register('site_url')} />
-
-        <Button type="submit" className="w-full" disabled={isSubmitting}>
-          {isSubmitting ? t.loadingText : t.submitText}
-          {!isSubmitting && (submitIcon || <Send className="ml-2 h-4 w-4" />)}
-        </Button>
-      </form>
-    </Form>
-  );
-
-  if (!showCard) return formContent;
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t.title}</CardTitle>
-        <CardDescription>{t.description}</CardDescription>
-      </CardHeader>
-      <CardContent>{formContent}</CardContent>
-    </Card>
-  );
-}