@digilogiclabs/create-saas-app 1.17.0 → 1.18.0

package/dist/templates/web/ui-auth/template/src/app/loading.tsx

@@ -1,20 +1,38 @@
-import { Card } from '@digilogiclabs/saas-factory-ui'
+import { Card, SkeletonCard, SkeletonText } from '@digilogiclabs/saas-factory-ui'
 import { Loader2 } from 'lucide-react'
 
 export default function Loading() {
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
-      <Card className="w-full max-w-md p-8 text-center">
-        <div className="flex flex-col items-center">
-          <Loader2 className="h-8 w-8 animate-spin text-blue-600 dark:text-blue-400 mb-4" />
-          <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
-            Loading
-          </h2>
-          <p className="text-sm text-gray-600 dark:text-gray-300">
-            Please wait while we load your content...
-          </p>
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="container mx-auto px-4 py-8">
+        {/* Header skeleton */}
+        <div className="mb-8">
+          <SkeletonText className="h-8 w-64 mb-4" />
+          <SkeletonText className="h-4 w-96" />
         </div>
-      </Card>
+
+        {/* Cards grid skeleton */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <SkeletonCard key={i} />
+          ))}
+        </div>
+
+        {/* Centered loading spinner */}
+        <div className="flex justify-center">
+          <Card className="w-full max-w-md p-8 text-center">
+            <div className="flex flex-col items-center">
+              <Loader2 className="h-8 w-8 animate-spin text-blue-600 dark:text-blue-400 mb-4" />
+              <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                Loading
+              </h2>
+              <p className="text-sm text-gray-600 dark:text-gray-300">
+                Please wait while we load your content...
+              </p>
+            </div>
+          </Card>
+        </div>
+      </div>
     </div>
   )
 }

package/dist/templates/web/ui-auth/template/src/components/providers/app-providers.tsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import { ThemeProvider } from 'next-themes'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
@@ -21,6 +22,7 @@ export function AppProviders({ children }: AppProvidersProps) {
       <AuthProvider>
         <AppThemeProvider themeColor="{{themeColor}}">
           {children}
+          <Toaster />
         </AppThemeProvider>
       </AuthProvider>
     </ThemeProvider>

package/dist/templates/web/ui-auth/template/src/components/shared/header.tsx

@@ -1,17 +1,27 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
-import { LogOut } from 'lucide-react';
+import { LogOut, Search, Command } from 'lucide-react';
+import { SearchBar, CommandPalette, useToast } from '@digilogiclabs/saas-factory-ui';
 import { ThemeToggle } from '../ui/theme-toggle';
 
 export function Header() {
   const user = null; // Placeholder for auth state
+  const [showSearch, setShowSearch] = useState(false);
+  const { toast } = useToast();
   
   const handleSignOut = () => {
     alert('Sign out functionality requires @digilogiclabs/saas-factory-auth package');
   };
 
+  const handleSearch = (query: string) => {
+    toast({
+      title: "Search",
+      description: `Searching for: ${query}`,
+    });
+  };
+
   return (
     <header className="bg-white dark:bg-gray-800 shadow-md">
       <div className="container mx-auto px-4 py-4 flex justify-between items-center">
@@ -19,6 +29,25 @@ export function Header() {
           {{titleCaseName}}
         </Link>
         <nav className="flex items-center gap-4">
+          {/* Search Bar */}
+          <div className="hidden md:block">
+            <SearchBar
+              placeholder="Search..."
+              onSearch={handleSearch}
+              debounceMs={300}
+              className="w-64"
+            />
+          </div>
+          
+          {/* Mobile search toggle */}
+          <button
+            onClick={() => setShowSearch(!showSearch)}
+            className="md:hidden p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+          >
+            <Search className="h-5 w-5" />
+          </button>
+
+          <CommandPalette />
           <ThemeToggle />
           {user ? (
             <>
@@ -46,6 +75,18 @@ export function Header() {
             </>
           )}
         </nav>
+        
+        {/* Mobile search bar */}
+        {showSearch && (
+          <div className="md:hidden absolute top-full left-0 right-0 p-4 bg-white dark:bg-gray-800 border-t">
+            <SearchBar
+              placeholder="Search..."
+              onSearch={handleSearch}
+              debounceMs={300}
+              autoFocus
+            />
+          </div>
+        )}
       </div>
     </header>
   );

package/dist/templates/web/ui-auth-ai/template/package.json

@@ -19,7 +19,7 @@
     "clsx": "^2.0.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31"{{#ai.enabled}},
+    "postcss": "^8.4.31",{{#ai.enabled}}
     "@digilogiclabs/saas-factory-ai": "^3.0.0",
     "@digilogiclabs/saas-factory-ai-types": "^3.0.0"{{/ai.enabled}}
   },

package/dist/templates/web/ui-auth-payments/template/src/components/providers/app-providers.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { ThemeProvider } from 'next-themes'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
 import { PaymentsProvider } from '@digilogiclabs/saas-factory-payments'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
@@ -23,6 +24,7 @@ export function AppProviders({ children }: AppProvidersProps) {
         <PaymentsProvider>
           <AppThemeProvider themeColor="{{themeColor}}">
             {children}
+            <Toaster />
           </AppThemeProvider>
         </PaymentsProvider>
       </AuthProvider>

package/dist/templates/web/ui-auth-payments-ai/template/src/components/providers/app-providers.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { ThemeProvider } from 'next-themes'
 import { AuthProvider } from '@digilogiclabs/saas-factory-auth'
 import { PaymentsProvider } from '@digilogiclabs/saas-factory-payments'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
 import { AppThemeProvider } from './theme-provider'
 
 interface AppProvidersProps {
@@ -27,6 +28,7 @@ export function AppProviders({ children }: AppProvidersProps) {
         <PaymentsProvider>
           <AppThemeProvider themeColor={themeColor}>
             {children}
+            <Toaster />
           </AppThemeProvider>
         </PaymentsProvider>
       </AuthProvider>

package/dist/templates/web/ui-auth-payments-ai-rag/template/README.md

@@ -0,0 +1,434 @@
+# AI Knowledge Platform with RAG v4.0.0
+
+A comprehensive Next.js application with AI-powered knowledge base using Retrieval-Augmented Generation (RAG), complete with authentication, payments, and advanced analytics.
+
+## 🚀 Features
+
+### AI & Knowledge Base
+- **RAG-Powered Chat**: Intelligent conversations with your knowledge base
+- **Semantic Search**: Vector-based document discovery
+- **Knowledge Management**: Full CRUD operations for documents
+- **Real-time Analytics**: Usage insights and performance metrics
+- **Streaming Responses**: Real-time AI response generation
+- **Source Citations**: Always know where information comes from
+
+### Built-in Infrastructure
+- **Authentication**: Secure user management with Supabase
+- **Payments**: Stripe integration for subscriptions
+- **Database**: PostgreSQL with vector embeddings
+- **UI Components**: Modern glassmorphic design system
+- **TypeScript**: Full type safety throughout
+
+### Advanced Capabilities
+- **Multi-domain Support**: Configure for different domains (plants, e-commerce, education)
+- **Offline Caching**: Cached responses for better performance
+- **Bulk Operations**: Import/export knowledge in batch
+- **Confidence Scoring**: AI response quality indicators
+- **Feedback System**: User satisfaction tracking
+
+## 🏗️ Architecture
+
+```
+src/
+├── app/                    # Next.js 15 App Router
+│   ├── ai/                # AI dashboard and chat interface
+│   ├── api/               # API routes for RAG operations
+│   └── auth/              # Authentication pages
+├── components/
+│   └── rag/               # RAG-specific components
+│       ├── RAGChatInterface.tsx
+│       ├── KnowledgeManager.tsx
+│       └── RAGAnalytics.tsx
+├── hooks/
+│   └── useRAGSystem.ts    # Main RAG hook
+├── lib/
+│   └── rag/
+│       └── config.ts      # RAG configuration
+└── types/
+    └── supabase.ts        # Generated database types
+```
+
+## 🛠️ Quick Start
+
+### 1. Installation
+
+```bash
+# Create new project
+npm create saas-app my-ai-app --template=web-ai-rag
+
+# Navigate to project
+cd my-ai-app
+
+# Install dependencies
+npm install
+```
+
+### 2. Environment Setup
+
+Create `.env.local`:
+
+```env
+# Supabase Configuration
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
+
+# OpenAI Configuration
+OPENAI_API_KEY=your_openai_api_key
+
+# App Configuration
+NEXT_PUBLIC_APP_NAME=my-ai-app
+```
+
+### 3. Database Setup
+
+```bash
+# Setup RAG system (creates tables, functions, sample data)
+npm run setup:rag
+
+# Generate TypeScript types
+npm run db:types
+
+# Seed with sample knowledge
+npm run seed:knowledge
+```
+
+### 4. Development
+
+```bash
+# Start development server
+npm run dev
+
+# Visit your AI dashboard
+open http://localhost:3000/ai
+```
+
+## 🎯 Domain Configuration
+
+The RAG system supports multiple pre-configured domains:
+
+### Generic AI Assistant (Default)
+```typescript
+const ragSystem = useRAGSystem({
+  domain: 'generic',
+  enableStreaming: true,
+  enableCache: true
+})
+```
+
+### Plant Care Assistant
+```typescript
+const ragSystem = useRAGSystem({
+  domain: 'plants',
+  // Optimized for botanical queries
+})
+```
+
+### E-commerce Assistant
+```typescript
+const ragSystem = useRAGSystem({
+  domain: 'ecommerce',
+  // Optimized for product queries
+})
+```
+
+### Education Platform
+```typescript
+const ragSystem = useRAGSystem({
+  domain: 'education',
+  // Optimized for learning content
+})
+```
+
+## 📊 RAG System Usage
+
+### Basic Chat Interface
+
+```typescript
+import { RAGChatInterface } from '@/components/rag/RAGChatInterface'
+
+export default function ChatPage() {
+  const ragSystem = useRAGSystem({ domain: 'generic' })
+
+  return (
+    <RAGChatInterface
+      ragSystem={ragSystem}
+      enableStreaming={true}
+      showSources={true}
+      showConfidence={true}
+    />
+  )
+}
+```
+
+### Knowledge Management
+
+```typescript
+import { KnowledgeManager } from '@/components/rag/KnowledgeManager'
+
+export default function KnowledgePage() {
+  const ragSystem = useRAGSystem()
+
+  return (
+    <KnowledgeManager
+      ragSystem={ragSystem}
+      enableBulkOperations={true}
+      enableExport={true}
+    />
+  )
+}
+```
+
+### Analytics Dashboard
+
+```typescript
+import { RAGAnalytics } from '@/components/rag/RAGAnalytics'
+
+export default function AnalyticsPage() {
+  const ragSystem = useRAGSystem()
+
+  return (
+    <RAGAnalytics
+      ragSystem={ragSystem}
+      timeRange="7d"
+      showDetailedMetrics={true}
+    />
+  )
+}
+```
+
+## 🔧 API Routes
+
+The template includes ready-to-use API endpoints:
+
+### Chat with RAG
+```bash
+POST /api/rag/chat
+{
+  "query": "How do I get started?",
+  "category": "faq",
+  "stream": true
+}
+```
+
+### Search Knowledge Base
+```bash
+GET /api/rag/search?q=getting+started&category=faq&limit=10
+```
+
+### Manage Knowledge
+```bash
+# Add document
+POST /api/knowledge
+{
+  "content": "Document content...",
+  "category": "faq",
+  "fields": { "title": "Getting Started" }
+}
+
+# Update document
+PUT /api/knowledge/[id]
+{
+  "content": "Updated content..."
+}
+
+# Delete document
+DELETE /api/knowledge/[id]
+```
+
+## 🎨 UI Components
+
+### RAG Chat Interface
+- Streaming responses with typing indicators
+- Source citations with confidence scores
+- Voice input support
+- Message history and feedback
+- Copy/share functionality
+
+### Knowledge Manager
+- Document CRUD operations
+- Bulk import/export
+- Category filtering
+- Full-text search
+- Metadata management
+
+### Analytics Dashboard
+- Query volume trends
+- Response time metrics
+- Popular queries analysis
+- User satisfaction tracking
+- System health monitoring
+
+## 📈 Performance Features
+
+### Caching Strategy
+- **Response Caching**: Frequently asked queries cached locally
+- **Vector Caching**: Embedding reuse for similar queries
+- **Incremental Updates**: Only sync changed documents
+
+### Optimization
+- **Streaming**: Real-time response generation
+- **Debouncing**: Reduced API calls for search
+- **Lazy Loading**: Components loaded on demand
+- **Background Sync**: Non-blocking knowledge updates
+
+## 🔒 Security & Privacy
+
+### Data Protection
+- **RLS Policies**: Row-level security on all tables
+- **Input Sanitization**: XSS protection on user inputs
+- **Rate Limiting**: API abuse prevention
+- **Audit Logging**: Track all knowledge operations
+
+### API Security
+- **Authentication Required**: Protected endpoints
+- **CORS Configuration**: Controlled access
+- **Environment Separation**: Dev/staging/production configs
+
+## 🚀 Deployment
+
+### Vercel (Recommended)
+```bash
+# Build and deploy
+npm run build
+vercel --prod
+
+# Environment variables
+vercel env add OPENAI_API_KEY
+vercel env add SUPABASE_SERVICE_ROLE_KEY
+```
+
+### Docker
+```dockerfile
+FROM node:18-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+CMD ["npm", "start"]
+```
+
+### Environment-specific Configs
+```typescript
+// lib/rag/config.ts
+export const getEnvironmentConfig = () => ({
+  development: {
+    logging: 'debug',
+    rateLimitRpm: 300
+  },
+  production: {
+    logging: 'info',
+    rateLimitRpm: 60
+  }
+})
+```
+
+## 📊 Monitoring & Analytics
+
+### Built-in Metrics
+- Query response times
+- Confidence score distributions
+- User satisfaction ratings
+- Knowledge base growth
+- System health indicators
+
+### Custom Analytics
+```typescript
+const analytics = await ragSystem.getAnalytics('30d')
+console.log({
+  totalQueries: analytics.usage.totalQueries,
+  averageConfidence: analytics.performance.averageConfidence,
+  popularQueries: analytics.performance.popularQueries
+})
+```
+
+## 🎯 Customization
+
+### Custom Domain Logic
+```typescript
+// lib/rag/customConfig.ts
+export const createCustomRAGConfig = (namespace: string) => {
+  return createGenericRAGConfig(namespace, supabaseConfig, openAIKey, {
+    retrieval: {
+      topK: 8,
+      confidenceThreshold: 0.8,
+      // Custom retrieval logic
+    },
+    generation: {
+      systemPrompt: "You are a specialized assistant for...",
+      temperature: 0.2,
+      // Custom generation parameters
+    }
+  })
+}
+```
+
+### UI Customization
+```typescript
+// Custom styling
+<RAGChatInterface
+  className="custom-chat-styles"
+  theme={{
+    primary: '#your-brand-color',
+    background: 'custom-gradient'
+  }}
+/>
+```
+
+## 🧪 Testing
+
+### Unit Tests
+```bash
+npm run test
+```
+
+### Integration Tests
+```bash
+npm run test:integration
+```
+
+### E2E Tests
+```bash
+npm run test:e2e
+```
+
+## 📚 Advanced Topics
+
+### Vector Embeddings
+The system uses OpenAI's text-embedding-ada-002 model (1536 dimensions) for semantic search. Embeddings are generated server-side and stored in PostgreSQL with the pgvector extension.
+
+### Hybrid Search
+Combines vector similarity search with traditional full-text search for optimal results:
+- Vector search: Semantic understanding
+- Text search: Keyword matching
+- Combined scoring: Weighted relevance
+
+### Knowledge Synchronization
+Supports incremental sync strategies:
+- **Immediate**: Real-time updates
+- **Batch**: Scheduled bulk updates
+- **Manual**: User-triggered sync
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests
+5. Submit a pull request
+
+## 📄 License
+
+MIT License - see LICENSE file for details
+
+## 🆘 Support
+
+- 📖 [Documentation](https://docs.example.com/rag)
+- 💬 [Discord Community](https://discord.gg/example)
+- 🐛 [Issue Tracker](https://github.com/example/issues)
+- ✉️ [Email Support](mailto:support@example.com)
+
+---
+
+Built with ❤️ using Next.js 15, Supabase, OpenAI, and RAG v4.0.0