@djangocfg/layouts 2.1.10 → 2.1.14

package/src/snippets/Chat/README.md

@@ -1,122 +0,0 @@
-# Knowledge Chat Widget
-
-RAG-powered chat widget with beautiful animations powered by `tailwindcss-animate`.
-
-## Features
-
-- 🎨 **Beautiful Animations**: Smooth transitions and micro-interactions
-- 💬 **Real-time Chat**: RAG-powered responses with sources
-- 📱 **Responsive**: Works on desktop and mobile
-- 🗂️ **Session Management**: Create and manage chat sessions
-- 🎯 **Context-aware**: Uses SWR hooks for data management
-
-## Animations
-
-### Widget Animations
-- **Entry**: Fade in + slide from bottom with scale
-- **Exit**: Fade out + slide to bottom with scale reduction
-- **FAB Button**: Fade in + slide from bottom, hover scale, active scale
-
-### Message Animations
-- **Message Entry**: Staggered fade in + slide from bottom (50ms delay between messages)
-- **Message Bubble**: Hover shadow effect with smooth transition
-- **Loading State**: Pulsing avatar with bouncing bot icon
-
-### Sources Animations
-- **Container**: Fade in + slide from left with 100ms delay
-- **Individual Badges**: Staggered zoom in (100ms per badge)
-- **Badge Hover**: Scale up + active scale down
-
-### Session List Animations
-- **Session Items**: Staggered fade in + slide from left (50ms delay)
-- **Hover State**: Border color + shadow transition
-- **Action Buttons**: 
-  - Slide in from right on hover
-  - Scale up on hover, scale down on active
-
-### Input Animations
-- **Textarea**: Focus ring animation
-- **Send Button**: Scale up on hover, scale down on active
-- **Send Icon**: Smooth transitions
-
-## Usage
-
-```tsx
-import { KnowledgeChat } from '@djangocfg/layouts/snippets';
-
-// Simple usage
-<KnowledgeChat />
-
-// With props
-<KnowledgeChat
-  autoOpen={false}
-  persistent={true}
-  onToggle={(isOpen) => console.log('Chat toggled:', isOpen)}
-  onMessage={(message) => console.log('Message sent:', message)}
-/>
-```
-
-## Components
-
-### KnowledgeChat
-Main component with all providers integrated.
-
-### ChatWidget
-Core chat interface (use with providers manually if needed).
-
-### ChatUIProvider
-Manages UI state (open/closed, expanded, sources visibility).
-
-### MessageList
-Displays chat messages with sources and animations.
-
-### MessageInput
-Input field with auto-resize and keyboard shortcuts.
-
-### SessionList
-Drawer with chat sessions list.
-
-## Animation Timing
-
-- **Fast**: 200ms (buttons, badges)
-- **Normal**: 300ms (widget, messages, drawer)
-- **Stagger Delay**: 50-100ms (lists)
-
-## Tailwind Classes Used
-
-### tailwindcss-animate
-- `animate-in`
-- `fade-in`
-- `slide-in-from-bottom-{n}`
-- `slide-in-from-left-{n}`
-- `zoom-in-95`
-- `duration-{n}`
-- `delay-{n}`
-
-### Tailwind Core
-- `transition-all`
-- `transition-transform`
-- `transition-colors`
-- `duration-{n}`
-- `ease-out`
-- `animate-spin`
-- `animate-pulse`
-- `animate-bounce`
-- `hover:scale-{n}`
-- `active:scale-{n}`
-
-## Performance
-
-All animations use CSS transforms and opacity for optimal performance:
-- Hardware-accelerated transforms (translate, scale)
-- Efficient opacity transitions
-- No layout thrashing
-- Minimal reflows
-
-## Accessibility
-
-- Respects `prefers-reduced-motion`
-- Keyboard navigation support
-- ARIA labels
-- Screen reader friendly
-

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

@@ -1,124 +0,0 @@
-/**
- * Message Input Component
- * Input field for sending chat messages
- */
-
-'use client';
-
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Button, Textarea } from '@djangocfg/ui-nextjs';
-import { Send, Loader2 } from 'lucide-react';
-import { chatLogger } from '../../../utils/logger';
-import type { MessageInputProps } from '../types';
-
-// ─────────────────────────────────────────────────────────────────────────
-// Message Input Component
-// ─────────────────────────────────────────────────────────────────────────
-
-export const MessageInput: React.FC<MessageInputProps> = ({
-  onSend,
-  isLoading = false,
-  disabled = false,
-  placeholder = 'Ask me anything...',
-  className = '',
-}) => {
-  const [message, setMessage] = useState('');
-  const [rows, setRows] = useState(1);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  // Auto-resize textarea based on content
-  useEffect(() => {
-    if (textareaRef.current) {
-      const lineHeight = 24; // approximate line height
-      const maxRows = 5;
-      const minRows = 1;
-      
-      // If message is empty, reset to min height
-      if (!message) {
-        textareaRef.current.style.height = 'auto';
-        setRows(minRows);
-        return;
-      }
-      
-      textareaRef.current.style.height = 'auto';
-      const scrollHeight = textareaRef.current.scrollHeight;
-      const newRows = Math.max(minRows, Math.min(maxRows, Math.floor(scrollHeight / lineHeight)));
-      setRows(newRows);
-    }
-  }, [message]);
-
-  const handleSubmit = useCallback(
-    async (e?: React.FormEvent) => {
-      e?.preventDefault();
-      
-      const trimmedMessage = message.trim();
-      if (!trimmedMessage || isLoading || disabled) return;
-
-      try {
-        await onSend(trimmedMessage);
-        setMessage('');
-        setRows(1);
-        
-        // Reset textarea height
-        if (textareaRef.current) {
-          textareaRef.current.style.height = 'auto';
-        }
-      } catch (error) {
-        chatLogger.error('Failed to send message from input:', error);
-      }
-    },
-    [message, isLoading, disabled, onSend]
-  );
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      // Send on Enter (without Shift)
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        handleSubmit();
-      }
-    },
-    [handleSubmit]
-  );
-
-  const isDisabled = disabled || isLoading;
-  const canSend = message.trim().length > 0 && !isDisabled;
-
-  return (
-    <form onSubmit={handleSubmit} className={`border-t p-4 ${className}`}>
-      <div className="flex items-end gap-2">
-        <Textarea
-          ref={textareaRef}
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder={placeholder}
-          disabled={isDisabled}
-          rows={rows}
-          className="resize-none min-h-[40px] max-h-[120px] transition-all duration-200 
-                     focus:ring-2 focus:ring-primary/20"
-          style={{ resize: 'none' }}
-        />
-        
-        <Button
-          type="submit"
-          size="icon"
-          disabled={!canSend}
-          className="shrink-0 h-10 w-10 transition-all duration-200 
-                     hover:scale-110 active:scale-95 disabled:scale-100"
-        >
-          {isLoading ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
-          ) : (
-            <Send className="h-4 w-4" />
-          )}
-        </Button>
-      </div>
-      
-      <p className="text-xs text-muted-foreground mt-2">
-        Press Enter to send, Shift+Enter for new line
-      </p>
-    </form>
-  );
-};
-

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

@@ -1,169 +0,0 @@
-/**
- * Message List Component
- * Displays chat messages with markdown support and sources
- */
-
-'use client';
-
-import React, { useEffect, useRef } from 'react';
-import { Card, CardContent, Avatar, AvatarImage, AvatarFallback, Badge, ScrollArea } from '@djangocfg/ui-nextjs';
-import { Bot, User, ExternalLink, Loader2 } from 'lucide-react';
-import { Enums } from '@djangocfg/api/cfg/generated';
-import { useAuth } from '../../../auth';
-import type { MessageListProps } from '../types';
-
-// ─────────────────────────────────────────────────────────────────────────
-// Message List Component
-// ─────────────────────────────────────────────────────────────────────────
-
-export const MessageList: React.FC<MessageListProps> = ({
-  messages,
-  isLoading = false,
-  showSources = true,
-  showTimestamps = false,
-  autoScroll = true,
-  className = '',
-}) => {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const { user } = useAuth();
-
-  // Auto-scroll to bottom on new messages
-  useEffect(() => {
-    if (autoScroll && scrollRef.current) {
-      const scrollContainer = scrollRef.current.querySelector('[data-radix-scroll-area-viewport]');
-      if (scrollContainer) {
-        scrollContainer.scrollTop = scrollContainer.scrollHeight;
-      }
-    }
-  }, [messages, isLoading, autoScroll]);
-
-  const formatTimestamp = (timestamp: string) => {
-    const date = new Date(timestamp);
-    return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
-  };
-
-  return (
-    <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">
-            <Bot className="h-12 w-12 text-muted-foreground mb-4" />
-            <h3 className="text-lg font-semibold text-foreground mb-2">
-              Start a Conversation
-            </h3>
-            <p className="text-sm text-muted-foreground max-w-md">
-              Ask me anything about the documentation, features, or get help with your project.
-            </p>
-          </div>
-        ) : (
-          messages.map((message, index) => {
-            const isUser = message.role === Enums.ChatMessageRole.USER;
-            const isAssistant = message.role === Enums.ChatMessageRole.ASSISTANT;
-            
-            return (
-            <div
-              key={message.id}
-              className={`flex gap-3 ${isUser ? 'justify-end' : 'justify-start'}
-                         animate-in fade-in slide-in-from-bottom-2 duration-300`}
-              style={{ animationDelay: `${index * 50}ms` }}
-            >
-              {/* Avatar */}
-              {isAssistant && (
-                <Avatar className="h-8 w-8 shrink-0">
-                  <div className="flex h-full w-full items-center justify-center bg-primary text-primary-foreground">
-                    <Bot className="h-5 w-5" />
-                  </div>
-                </Avatar>
-              )}
-
-              {/* Message Content */}
-              <div
-                className={`flex flex-col gap-2 flex-1 max-w-[80%] ${
-                  isUser ? 'items-end' : 'items-start'
-                }`}
-              >
-                {/* Message Bubble */}
-                <Card
-                  className={`${
-                    isUser
-                      ? 'bg-primary text-primary-foreground'
-                      : 'bg-muted'
-                  } transition-all duration-200 hover:shadow-md`}
-                >
-                  <CardContent className="p-3">
-                    <div className="text-sm whitespace-pre-wrap break-words">
-                      {message.content}
-                    </div>
-                  </CardContent>
-                </Card>
-
-                {/* Timestamp */}
-                {showTimestamps && message.created_at && (
-                  <span className="text-xs text-muted-foreground px-1">
-                    {formatTimestamp(message.created_at)}
-                  </span>
-                )}
-
-                {/* Sources */}
-                {showSources &&
-                  isAssistant &&
-                  message.sources &&
-                  message.sources.length > 0 && (
-                    <div className="flex flex-wrap gap-2 px-1 animate-in fade-in slide-in-from-left-2 duration-300 delay-100">
-                      {message.sources.map((source, idx) => (
-                        <div key={idx}>
-                          <Badge
-                            variant="secondary"
-                            className="text-xs flex items-center gap-1 cursor-pointer 
-                                     hover:bg-secondary/80 hover:scale-105 active:scale-95 
-                                     transition-all duration-200 animate-in fade-in zoom-in-95"
-                            style={{ animationDelay: `${(idx + 1) * 100}ms` }}
-                          >
-                            {source.document_title || `Source ${idx + 1}`}
-                            <ExternalLink className="h-3 w-3" />
-                          </Badge>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-              </div>
-
-              {/* User Avatar */}
-              {isUser && (
-                <Avatar className="h-8 w-8 shrink-0">
-                  {user?.avatar && <AvatarImage src={user.avatar} alt={user.display_username || user.email || 'User'} />}
-                  <AvatarFallback className="bg-primary/10 text-primary font-semibold">
-                    {user?.display_username?.charAt(0)?.toUpperCase() || 
-                     user?.email?.charAt(0)?.toUpperCase() || 
-                     <User className="h-5 w-5" />}
-                  </AvatarFallback>
-                </Avatar>
-              )}
-            </div>
-            );
-          })
-        )}
-
-        {/* Loading Indicator */}
-        {isLoading && (
-          <div className="flex gap-3 justify-start animate-in fade-in slide-in-from-bottom-2 duration-300">
-            <Avatar className="h-8 w-8 shrink-0 animate-pulse">
-              <div className="flex h-full w-full items-center justify-center bg-primary text-primary-foreground">
-                <Bot className="h-5 w-5 animate-bounce" />
-              </div>
-            </Avatar>
-            <Card className="bg-muted animate-pulse">
-              <CardContent className="p-3">
-                <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                  <span className="animate-pulse">Thinking...</span>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        )}
-      </div>
-    </ScrollArea>
-  );
-};
-

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

@@ -1,192 +0,0 @@
-/**
- * Session List Component
- * Drawer with list of chat sessions
- */
-
-'use client';
-
-import React, { useCallback, useRef, useEffect } from 'react';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-  Button,
-  ScrollArea,
-  Badge,
-} from '@djangocfg/ui-nextjs';
-import { MessageSquare, Clock, Archive, Trash2, Loader2 } from 'lucide-react';
-import { useKnowbaseSessionsContext } from '@djangocfg/layouts/contexts';
-import { useInfiniteSessions } from '../hooks/useInfiniteSessions';
-import type { SessionListProps } from '../types';
-
-// ─────────────────────────────────────────────────────────────────────────
-// Session List Component
-// ─────────────────────────────────────────────────────────────────────────
-
-export const SessionList: React.FC<SessionListProps> = ({
-  isOpen,
-  onClose,
-  onSelectSession,
-  className = '',
-}) => {
-  const { deleteSession, archiveSession } = useKnowbaseSessionsContext();
-  const {
-    sessions,
-    isLoading,
-    isLoadingMore,
-    hasMore,
-    loadMore,
-  } = useInfiniteSessions();
-  
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  // Handle scroll to load more
-  const handleScroll = useCallback(() => {
-    if (!scrollRef.current || isLoadingMore || !hasMore) return;
-
-    const scrollContainer = scrollRef.current.querySelector('[data-radix-scroll-area-viewport]');
-    if (!scrollContainer) return;
-
-    const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
-    const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
-
-    // Load more when scrolled 80% down
-    if (scrollPercentage > 0.8) {
-      loadMore();
-    }
-  }, [hasMore, isLoadingMore, loadMore]);
-
-  // Attach scroll listener
-  useEffect(() => {
-    const scrollContainer = scrollRef.current?.querySelector('[data-radix-scroll-area-viewport]');
-    if (!scrollContainer) return;
-
-    scrollContainer.addEventListener('scroll', handleScroll);
-    return () => scrollContainer.removeEventListener('scroll', handleScroll);
-  }, [handleScroll]);
-
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-  };
-
-  return (
-    <Sheet open={isOpen} onOpenChange={onClose}>
-      <SheetContent side="left" className={`w-[400px] sm:w-[540px] ${className}`}>
-        <SheetHeader>
-          <SheetTitle>Chat Sessions</SheetTitle>
-          <SheetDescription>
-            View and manage your chat history
-          </SheetDescription>
-        </SheetHeader>
-
-        <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" />
-            </div>
-          ) : !sessions || sessions.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-12 text-center">
-              <MessageSquare className="h-12 w-12 text-muted-foreground mb-4" />
-              <h3 className="text-lg font-semibold text-foreground mb-2">
-                No Sessions Yet
-              </h3>
-              <p className="text-sm text-muted-foreground max-w-md">
-                Start a new conversation to create your first session.
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-2">
-              {sessions.map((session, index) => (
-                <div
-                  key={session.id}
-                  className="group relative flex items-start gap-3 p-4 border rounded-sm 
-                           hover:bg-muted/50 hover:border-primary/50 hover:shadow-md
-                           transition-all duration-200 cursor-pointer
-                           animate-in fade-in slide-in-from-left-2"
-                  style={{ animationDelay: `${index * 50}ms` }}
-                  onClick={() => {
-                    onSelectSession(session.id);
-                    onClose();
-                  }}
-                >
-                  {/* Session Icon */}
-                  <div className="shrink-0 mt-1">
-                    <MessageSquare className="h-5 w-5 text-muted-foreground" />
-                  </div>
-
-                  {/* Session Info */}
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-start justify-between gap-2 mb-1">
-                      <h4 className="font-medium text-sm truncate">
-                        {session.title || 'Untitled Session'}
-                      </h4>
-                      {session.is_active && (
-                        <Badge variant="default" className="shrink-0 text-xs">
-                          Active
-                        </Badge>
-                      )}
-                    </div>
-
-                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                      <Clock className="h-3 w-3" />
-                      <span>{formatDate(session.created_at)}</span>
-                    </div>
-                  </div>
-
-                  {/* Actions */}
-                  <div className="shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 
-                                transition-all duration-200 group-hover:translate-x-0 translate-x-2">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-8 w-8 p-0 hover:scale-110 active:scale-95 transition-transform duration-200"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        archiveSession(session.id, {});
-                      }}
-                      title="Archive"
-                    >
-                      <Archive className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-8 w-8 p-0 text-destructive hover:text-destructive 
-                               hover:scale-110 active:scale-95 transition-transform duration-200"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        deleteSession(session.id);
-                      }}
-                      title="Delete"
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-                  </div>
-                </div>
-              ))}
-              
-              {/* Loading more indicator */}
-              {isLoadingMore && (
-                <div className="flex items-center justify-center py-6">
-                  <Loader2 className="h-5 w-5 animate-spin text-muted-foreground mr-2" />
-                  <span className="text-sm text-muted-foreground">Loading more...</span>
-                </div>
-              )}
-              
-              {/* No more sessions indicator */}
-              {!hasMore && sessions.length > 0 && (
-                <div className="text-center py-4">
-                  <span className="text-xs text-muted-foreground">No more sessions</span>
-                </div>
-              )}
-            </div>
-          )}
-        </ScrollArea>
-      </SheetContent>
-    </Sheet>
-  );
-};
-

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

@@ -1,9 +0,0 @@
-/**
- * Chat Components
- * Re-exports for all chat components
- */
-
-export { MessageList } from './MessageList';
-export { MessageInput } from './MessageInput';
-export { SessionList } from './SessionList';
-

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

@@ -1,6 +0,0 @@
-/**
- * Chat hooks
- */
-
-export { useInfiniteSessions } from './useInfiniteSessions';
-