@digilogiclabs/create-saas-app 1.17.1 → 1.18.0

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

@@ -0,0 +1,642 @@
+'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>
+  )
+}