@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

package/src/templates/web/ui-auth-payments-ai-rag/template/components/rag/KnowledgeManager.tsx

@@ -1,642 +0,0 @@
-'use client'
-
-import { useState, useRef } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { 
-  Plus,
-  Search,
-  Filter,
-  Upload,
-  Download,
-  Trash2,
-  Edit,
-  FileText,
-  Calendar,
-  Tag,
-  Eye,
-  MoreHorizontal,
-  Loader2,
-  CheckCircle,
-  AlertCircle,
-  Info
-} from 'lucide-react'
-import { toast } from 'sonner'
-import { motion, AnimatePresence } from 'framer-motion'
-import type { UseRAGSystemReturn } from '../../hooks/useRAGSystem'
-import type { RAGDocument, RAGSearchResult } from '@digilogiclabs/saas-factory-ai-types'
-
-interface KnowledgeManagerProps {
-  ragSystem: UseRAGSystemReturn<any>
-  enableBulkOperations?: boolean
-  enableExport?: boolean
-  onSuccess?: (message: string) => void
-  onError?: (error: string) => void
-  className?: string
-}
-
-interface KnowledgeDocument extends RAGDocument<any> {
-  id: string
-  selected?: boolean
-}
-
-export function KnowledgeManager({
-  ragSystem,
-  enableBulkOperations = true,
-  enableExport = true,
-  onSuccess,
-  onError,
-  className = ''
-}: KnowledgeManagerProps) {
-  const [documents, setDocuments] = useState<KnowledgeDocument[]>([])
-  const [searchQuery, setSearchQuery] = useState('')
-  const [selectedCategory, setSelectedCategory] = useState<string>('all')
-  const [isAddingDocument, setIsAddingDocument] = useState(false)
-  const [editingDocument, setEditingDocument] = useState<KnowledgeDocument | null>(null)
-  const [viewingDocument, setViewingDocument] = useState<KnowledgeDocument | null>(null)
-  const [selectedDocuments, setSelectedDocuments] = useState<Set<string>>(new Set())
-  const [bulkAction, setBulkAction] = useState<'none' | 'delete' | 'export'>('none')
-  
-  const fileInputRef = useRef<HTMLInputElement>(null)
-
-  // Load documents
-  const loadDocuments = async () => {
-    try {
-      const results = await ragSystem.searchKnowledge(searchQuery || '', {
-        category: selectedCategory === 'all' ? undefined : selectedCategory,
-        limit: 50,
-        includeMetadata: true
-      })
-      
-      setDocuments(results.map(result => ({
-        ...result,
-        id: result.id || `doc-${Date.now()}-${Math.random()}`,
-        selected: selectedDocuments.has(result.id || '')
-      })))
-    } catch (error) {
-      console.error('Failed to load documents:', error)
-      onError?.('Failed to load documents')
-    }
-  }
-
-  // Search documents
-  const handleSearch = async () => {
-    await loadDocuments()
-  }
-
-  // Add new document
-  const handleAddDocument = async (documentData: Partial<RAGDocument<any>>) => {
-    try {
-      const id = await ragSystem.addKnowledge({
-        content: documentData.content || '',
-        category: documentData.category || 'general',
-        fields: documentData.fields || {},
-        metadata: documentData.metadata || {},
-        source: documentData.source || { type: 'manual', createdBy: 'user' }
-      })
-
-      if (id) {
-        onSuccess?.('Document added successfully')
-        setIsAddingDocument(false)
-        await loadDocuments()
-      }
-    } catch (error) {
-      console.error('Failed to add document:', error)
-      onError?.('Failed to add document')
-    }
-  }
-
-  // Update document
-  const handleUpdateDocument = async (id: string, updates: Partial<RAGDocument<any>>) => {
-    try {
-      const success = await ragSystem.updateKnowledge(id, updates)
-      
-      if (success) {
-        onSuccess?.('Document updated successfully')
-        setEditingDocument(null)
-        await loadDocuments()
-      }
-    } catch (error) {
-      console.error('Failed to update document:', error)
-      onError?.('Failed to update document')
-    }
-  }
-
-  // Delete document
-  const handleDeleteDocument = async (id: string) => {
-    try {
-      const success = await ragSystem.deleteKnowledge(id)
-      
-      if (success) {
-        onSuccess?.('Document deleted successfully')
-        await loadDocuments()
-      }
-    } catch (error) {
-      console.error('Failed to delete document:', error)
-      onError?.('Failed to delete document')
-    }
-  }
-
-  // Bulk operations
-  const handleBulkAction = async () => {
-    if (selectedDocuments.size === 0) return
-
-    try {
-      switch (bulkAction) {
-        case 'delete':
-          for (const id of selectedDocuments) {
-            await ragSystem.deleteKnowledge(id)
-          }
-          onSuccess?.(`Deleted ${selectedDocuments.size} documents`)
-          break
-        
-        case 'export':
-          const exportData = documents
-            .filter(doc => selectedDocuments.has(doc.id))
-            .map(doc => ({
-              content: doc.content,
-              category: doc.category,
-              fields: doc.fields,
-              metadata: doc.metadata
-            }))
-          
-          const blob = new Blob([JSON.stringify(exportData, null, 2)], {
-            type: 'application/json'
-          })
-          const url = URL.createObjectURL(blob)
-          const a = document.createElement('a')
-          a.href = url
-          a.download = `knowledge-export-${new Date().toISOString().split('T')[0]}.json`
-          a.click()
-          URL.revokeObjectURL(url)
-          
-          onSuccess?.(`Exported ${selectedDocuments.size} documents`)
-          break
-      }
-      
-      setSelectedDocuments(new Set())
-      setBulkAction('none')
-      await loadDocuments()
-      
-    } catch (error) {
-      console.error('Bulk operation failed:', error)
-      onError?.('Bulk operation failed')
-    }
-  }
-
-  // File upload
-  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = event.target.files
-    if (!files) return
-
-    try {
-      for (const file of Array.from(files)) {
-        const content = await file.text()
-        
-        await handleAddDocument({
-          content,
-          category: 'uploaded',
-          metadata: {
-            filename: file.name,
-            fileType: file.type,
-            fileSize: file.size,
-            uploadedAt: new Date().toISOString()
-          },
-          source: { type: 'file', filename: file.name }
-        })
-      }
-    } catch (error) {
-      console.error('File upload failed:', error)
-      onError?.('File upload failed')
-    }
-  }
-
-  // Document selection
-  const toggleDocumentSelection = (id: string) => {
-    const newSelection = new Set(selectedDocuments)
-    if (newSelection.has(id)) {
-      newSelection.delete(id)
-    } else {
-      newSelection.add(id)
-    }
-    setSelectedDocuments(newSelection)
-  }
-
-  const selectAllDocuments = () => {
-    if (selectedDocuments.size === documents.length) {
-      setSelectedDocuments(new Set())
-    } else {
-      setSelectedDocuments(new Set(documents.map(doc => doc.id)))
-    }
-  }
-
-  const categories = ['all', 'general', 'uploaded', 'manual', 'imported']
-
-  return (
-    <div className={`space-y-6 ${className}`}>
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-2xl font-bold">Knowledge Base Manager</h2>
-          <p className="text-gray-600 dark:text-gray-300">
-            {ragSystem.totalDocuments} documents in your knowledge base
-          </p>
-        </div>
-        
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            onClick={() => fileInputRef.current?.click()}
-            disabled={ragSystem.isLoading}
-          >
-            <Upload className="w-4 h-4 mr-2" />
-            Upload
-          </Button>
-          
-          <Button
-            onClick={() => setIsAddingDocument(true)}
-            disabled={ragSystem.isLoading}
-          >
-            <Plus className="w-4 h-4 mr-2" />
-            Add Document
-          </Button>
-        </div>
-      </div>
-
-      {/* Search and Filters */}
-      <Card className="p-4">
-        <div className="flex flex-col sm:flex-row gap-4">
-          <div className="flex-1 relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
-            <input
-              type="text"
-              placeholder="Search documents..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
-              className="w-full pl-10 pr-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
-          </div>
-          
-          <select
-            value={selectedCategory}
-            onChange={(e) => setSelectedCategory(e.target.value)}
-            className="px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          >
-            {categories.map(category => (
-              <option key={category} value={category}>
-                {category === 'all' ? 'All Categories' : category.charAt(0).toUpperCase() + category.slice(1)}
-              </option>
-            ))}
-          </select>
-          
-          <Button onClick={handleSearch} disabled={ragSystem.isLoading}>
-            {ragSystem.isLoading ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
-            ) : (
-              <Search className="w-4 h-4" />
-            )}
-          </Button>
-        </div>
-      </Card>
-
-      {/* Bulk Actions */}
-      {enableBulkOperations && selectedDocuments.size > 0 && (
-        <Card className="p-4 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
-          <div className="flex items-center justify-between">
-            <span className="font-medium">
-              {selectedDocuments.size} document{selectedDocuments.size !== 1 ? 's' : ''} selected
-            </span>
-            
-            <div className="flex items-center gap-2">
-              <select
-                value={bulkAction}
-                onChange={(e) => setBulkAction(e.target.value as any)}
-                className="px-3 py-1 border border-gray-200 dark:border-gray-700 rounded"
-              >
-                <option value="none">Choose action...</option>
-                <option value="delete">Delete</option>
-                {enableExport && <option value="export">Export</option>}
-              </select>
-              
-              <Button
-                onClick={handleBulkAction}
-                disabled={bulkAction === 'none' || ragSystem.isLoading}
-                variant="outline"
-                size="sm"
-              >
-                Apply
-              </Button>
-              
-              <Button
-                onClick={() => setSelectedDocuments(new Set())}
-                variant="ghost"
-                size="sm"
-              >
-                Clear Selection
-              </Button>
-            </div>
-          </div>
-        </Card>
-      )}
-
-      {/* Documents List */}
-      <Card className="p-0">
-        {documents.length === 0 ? (
-          <div className="text-center py-12">
-            <FileText className="w-12 h-12 mx-auto mb-4 text-gray-300" />
-            <h3 className="text-lg font-medium mb-2">No documents found</h3>
-            <p className="text-gray-600 dark:text-gray-300 mb-4">
-              {searchQuery ? 'Try adjusting your search terms' : 'Start by adding your first document'}
-            </p>
-            <Button onClick={() => setIsAddingDocument(true)}>
-              <Plus className="w-4 h-4 mr-2" />
-              Add Document
-            </Button>
-          </div>
-        ) : (
-          <div className="divide-y divide-gray-200 dark:divide-gray-700">
-            {/* Header */}
-            {enableBulkOperations && (
-              <div className="px-6 py-3 bg-gray-50 dark:bg-gray-800/50">
-                <label className="flex items-center gap-3">
-                  <input
-                    type="checkbox"
-                    checked={selectedDocuments.size === documents.length && documents.length > 0}
-                    onChange={selectAllDocuments}
-                    className="rounded border-gray-300"
-                  />
-                  <span className="text-sm font-medium">Select All</span>
-                </label>
-              </div>
-            )}
-            
-            {/* Document Items */}
-            <AnimatePresence>
-              {documents.map((document) => (
-                <motion.div
-                  key={document.id}
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -20 }}
-                  className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50"
-                >
-                  <div className="flex items-start gap-4">
-                    {enableBulkOperations && (
-                      <input
-                        type="checkbox"
-                        checked={selectedDocuments.has(document.id)}
-                        onChange={() => toggleDocumentSelection(document.id)}
-                        className="mt-1 rounded border-gray-300"
-                      />
-                    )}
-                    
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-start justify-between">
-                        <div className="flex-1">
-                          <h4 className="font-medium line-clamp-1">
-                            {document.fields?.title || `Document ${document.id.slice(-8)}`}
-                          </h4>
-                          <p className="text-sm text-gray-600 dark:text-gray-300 line-clamp-2 mt-1">
-                            {document.content}
-                          </p>
-                          
-                          <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
-                            <span className="flex items-center gap-1">
-                              <Tag className="w-3 h-3" />
-                              {document.category}
-                            </span>
-                            <span className="flex items-center gap-1">
-                              <Calendar className="w-3 h-3" />
-                              {new Date(document.createdAt || Date.now()).toLocaleDateString()}
-                            </span>
-                            {document.metadata?.filename && (
-                              <span className="flex items-center gap-1">
-                                <FileText className="w-3 h-3" />
-                                {document.metadata.filename}
-                              </span>
-                            )}
-                          </div>
-                        </div>
-                        
-                        <div className="flex items-center gap-1 ml-4">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => setViewingDocument(document)}
-                          >
-                            <Eye className="w-4 h-4" />
-                          </Button>
-                          
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => setEditingDocument(document)}
-                          >
-                            <Edit className="w-4 h-4" />
-                          </Button>
-                          
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => handleDeleteDocument(document.id)}
-                            className="text-red-500 hover:text-red-700"
-                          >
-                            <Trash2 className="w-4 h-4" />
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </motion.div>
-              ))}
-            </AnimatePresence>
-          </div>
-        )}
-      </Card>
-
-      {/* Hidden file input */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        multiple
-        accept=".txt,.md,.json,.csv"
-        onChange={handleFileUpload}
-        className="hidden"
-      />
-
-      {/* Add Document Modal */}
-      {isAddingDocument && (
-        <DocumentModal
-          onSave={handleAddDocument}
-          onCancel={() => setIsAddingDocument(false)}
-        />
-      )}
-
-      {/* Edit Document Modal */}
-      {editingDocument && (
-        <DocumentModal
-          document={editingDocument}
-          onSave={(data) => handleUpdateDocument(editingDocument.id, data)}
-          onCancel={() => setEditingDocument(null)}
-        />
-      )}
-
-      {/* View Document Modal */}
-      {viewingDocument && (
-        <DocumentViewModal
-          document={viewingDocument}
-          onClose={() => setViewingDocument(null)}
-        />
-      )}
-    </div>
-  )
-}
-
-// Document Modal Component
-function DocumentModal({
-  document,
-  onSave,
-  onCancel
-}: {
-  document?: KnowledgeDocument
-  onSave: (data: Partial<RAGDocument<any>>) => void
-  onCancel: () => void
-}) {
-  const [formData, setFormData] = useState({
-    content: document?.content || '',
-    category: document?.category || 'general',
-    title: document?.fields?.title || '',
-    description: document?.fields?.description || ''
-  })
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    onSave({
-      content: formData.content,
-      category: formData.category,
-      fields: {
-        title: formData.title,
-        description: formData.description
-      }
-    })
-  }
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
-        <h3 className="text-lg font-semibold mb-4">
-          {document ? 'Edit Document' : 'Add New Document'}
-        </h3>
-        
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium mb-2">Title</label>
-            <input
-              type="text"
-              value={formData.title}
-              onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
-              className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="Document title..."
-            />
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-2">Category</label>
-            <select
-              value={formData.category}
-              onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))}
-              className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            >
-              <option value="general">General</option>
-              <option value="manual">Manual</option>
-              <option value="faq">FAQ</option>
-              <option value="guide">Guide</option>
-              <option value="reference">Reference</option>
-            </select>
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-2">Description</label>
-            <input
-              type="text"
-              value={formData.description}
-              onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
-              className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="Brief description..."
-            />
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-2">Content</label>
-            <textarea
-              value={formData.content}
-              onChange={(e) => setFormData(prev => ({ ...prev, content: e.target.value }))}
-              className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent h-32"
-              placeholder="Document content..."
-              required
-            />
-          </div>
-          
-          <div className="flex justify-end gap-3">
-            <Button type="button" variant="outline" onClick={onCancel}>
-              Cancel
-            </Button>
-            <Button type="submit">
-              {document ? 'Update' : 'Add'} Document
-            </Button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}
-
-// Document View Modal Component
-function DocumentViewModal({
-  document,
-  onClose
-}: {
-  document: KnowledgeDocument
-  onClose: () => void
-}) {
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-xl p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
-        <div className="flex items-start justify-between mb-4">
-          <div>
-            <h3 className="text-lg font-semibold">
-              {document.fields?.title || `Document ${document.id.slice(-8)}`}
-            </h3>
-            <p className="text-sm text-gray-600 dark:text-gray-300">
-              {document.category} • {new Date(document.createdAt || Date.now()).toLocaleDateString()}
-            </p>
-          </div>
-          <Button variant="ghost" onClick={onClose}>
-            ✕
-          </Button>
-        </div>
-        
-        {document.fields?.description && (
-          <p className="text-gray-700 dark:text-gray-300 mb-4">
-            {document.fields.description}
-          </p>
-        )}
-        
-        <div className="prose dark:prose-invert max-w-none">
-          <div className="whitespace-pre-wrap">
-            {document.content}
-          </div>
-        </div>
-        
-        {document.metadata && Object.keys(document.metadata).length > 0 && (
-          <div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
-            <h4 className="font-medium mb-2">Metadata</h4>
-            <pre className="text-xs bg-gray-50 dark:bg-gray-900 p-3 rounded overflow-x-auto">
-              {JSON.stringify(document.metadata, null, 2)}
-            </pre>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}