| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
|
|
| import React, { useState, useEffect, useCallback } from 'react';
|
| import {
|
| Database, Upload, FileText, Trash2, Play, Search,
|
| RefreshCw, Loader2, CheckCircle, XCircle, AlertCircle,
|
| BookOpen, Brain, Zap, BarChart2, FolderOpen, Download,
|
| ChevronDown, ChevronRight, Filter, Clock, Hash, Tag,
|
| GitBranch, Briefcase, Settings, X, PieChart, FileCheck, Eye,
|
| AlertTriangle, Shield, Lock
|
| } from 'lucide-react';
|
| import { getToken } from '../../services/api';
|
| import './RAGQuestionsPanel.css';
|
|
|
| const API_BASE = import.meta.env.VITE_API_URL || '';
|
|
|
| function RAGQuestionsPanel() {
|
|
|
| const [pdfs, setPdfs] = useState([]);
|
| const [pdfsLoading, setPdfsLoading] = useState(true);
|
| const [uploadProgress, setUploadProgress] = useState(null);
|
|
|
|
|
| const [ragStats, setRagStats] = useState(null);
|
| const [statsLoading, setStatsLoading] = useState(true);
|
|
|
|
|
| const [collections, setCollections] = useState([]);
|
|
|
|
|
| const [taxonomy, setTaxonomy] = useState({ branches: [], domains: [] });
|
| const [taxonomyLoading, setTaxonomyLoading] = useState(true);
|
|
|
|
|
| const [trainingPdfId, setTrainingPdfId] = useState(null);
|
| const [trainAllLoading, setTrainAllLoading] = useState(false);
|
| const [trainResult, setTrainResult] = useState(null);
|
| const [showTrainingSummary, setShowTrainingSummary] = useState(false);
|
| const [selectedPdfSummary, setSelectedPdfSummary] = useState(null);
|
| const [summaryLoading, setSummaryLoading] = useState(false);
|
|
|
|
|
| const [trainConfig, setTrainConfig] = useState({
|
| branch: '',
|
| domain: '',
|
| company: '',
|
| company_level: 'product',
|
| });
|
| const [showTrainConfig, setShowTrainConfig] = useState(false);
|
| const [configPdfId, setConfigPdfId] = useState(null);
|
|
|
|
|
| const [searchQuery, setSearchQuery] = useState('');
|
| const [searchResults, setSearchResults] = useState(null);
|
| const [searchLoading, setSearchLoading] = useState(false);
|
| const [searchFilters, setSearchFilters] = useState({
|
| question_type: '',
|
| difficulty: '',
|
| branch: '',
|
| domain: '',
|
| });
|
|
|
|
|
| const [activeView, setActiveView] = useState('upload');
|
| const [error, setError] = useState(null);
|
| const [success, setSuccess] = useState(null);
|
|
|
|
|
| const [showDeleteModal, setShowDeleteModal] = useState(false);
|
| const [showClearAllModal, setShowClearAllModal] = useState(false);
|
| const [allQuestions, setAllQuestions] = useState([]);
|
| const [questionsLoading, setQuestionsLoading] = useState(false);
|
| const [selectedQuestions, setSelectedQuestions] = useState(new Set());
|
| const [deleteLoading, setDeleteLoading] = useState(false);
|
| const [clearAllPassword, setClearAllPassword] = useState('');
|
| const [confirmDataLoss, setConfirmDataLoss] = useState(false);
|
| const [confirmNoBackup, setConfirmNoBackup] = useState(false);
|
| const [clearAllLoading, setClearAllLoading] = useState(false);
|
|
|
|
|
| const [lockoutStatus, setLockoutStatus] = useState({
|
| is_locked: false,
|
| remaining_attempts: 5,
|
| time_remaining_seconds: null,
|
| stage: 0,
|
| });
|
| const [lockoutCountdown, setLockoutCountdown] = useState(null);
|
|
|
| |
| |
|
|
| const fetchTaxonomy = useCallback(async () => {
|
| setTaxonomyLoading(true);
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/admin/rag/taxonomy`, {
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| }
|
| });
|
|
|
| if (response.ok) {
|
| const data = await response.json();
|
| if (data.success) {
|
| setTaxonomy({
|
| branches: data.branches || [],
|
| domains: data.domains || [],
|
| });
|
| }
|
| }
|
| } catch (err) {
|
| console.error('Error fetching taxonomy:', err);
|
| } finally {
|
| setTaxonomyLoading(false);
|
| }
|
| }, []);
|
|
|
| |
| |
|
|
| const getFilteredDomains = (branchId) => {
|
| if (!branchId) return taxonomy.domains;
|
| return taxonomy.domains.filter(d => d.branch === branchId);
|
| };
|
|
|
| |
| |
|
|
| const fetchPdfs = useCallback(async () => {
|
| setPdfsLoading(true);
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/admin/rag/pdfs`, {
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| }
|
| });
|
|
|
| if (response.ok) {
|
| const data = await response.json();
|
| if (data.success) {
|
| setPdfs(data.pdfs || []);
|
| }
|
| }
|
| } catch (err) {
|
| console.error('Error fetching PDFs:', err);
|
| setError('Failed to fetch PDFs');
|
| } finally {
|
| setPdfsLoading(false);
|
| }
|
| }, []);
|
|
|
| |
| |
|
|
| const fetchRagStats = useCallback(async () => {
|
| setStatsLoading(true);
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/admin/rag/stats`, {
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| }
|
| });
|
|
|
| if (response.ok) {
|
| const data = await response.json();
|
| if (data.success) {
|
| setRagStats(data);
|
| }
|
| }
|
| } catch (err) {
|
| console.error('Error fetching RAG stats:', err);
|
| } finally {
|
| setStatsLoading(false);
|
| }
|
| }, []);
|
|
|
| |
| |
|
|
| const fetchCollections = useCallback(async () => {
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/admin/rag/collections`, {
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| }
|
| });
|
|
|
| if (response.ok) {
|
| const data = await response.json();
|
| if (data.success) {
|
| setCollections(data.collections || []);
|
| }
|
| }
|
| } catch (err) {
|
| console.error('Error fetching collections:', err);
|
| }
|
| }, []);
|
|
|
| |
| |
|
|
| const handleUpload = async (event) => {
|
| const file = event.target.files[0];
|
| if (!file) return;
|
|
|
| if (!file.name.endsWith('.pdf')) {
|
| setError('Please upload a PDF file');
|
| return;
|
| }
|
|
|
| setUploadProgress({ status: 'uploading', filename: file.name });
|
| setError(null);
|
| setSuccess(null);
|
|
|
| try {
|
| const token = getToken();
|
| const formData = new FormData();
|
| formData.append('file', file);
|
|
|
| const response = await fetch(`${API_BASE}/api/admin/rag/upload-pdf`, {
|
| method: 'POST',
|
| headers: {
|
| 'Authorization': `Bearer ${token}`
|
| },
|
| body: formData
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (response.ok && data.success) {
|
| setUploadProgress({ status: 'success', filename: file.name });
|
| setSuccess(`PDF "${file.name}" uploaded successfully!`);
|
| fetchPdfs();
|
| } else {
|
| setUploadProgress({ status: 'error', filename: file.name });
|
| setError(data.detail || 'Upload failed');
|
| }
|
| } catch (err) {
|
| console.error('Upload error:', err);
|
| setUploadProgress({ status: 'error', filename: file.name });
|
| setError('Upload failed: ' + err.message);
|
| }
|
|
|
|
|
| event.target.value = '';
|
|
|
|
|
| setTimeout(() => setUploadProgress(null), 3000);
|
| };
|
|
|
| |
| |
|
|
| const trainPdf = async (pdfId, config = null) => {
|
| const useConfig = config || trainConfig;
|
| setTrainingPdfId(pdfId);
|
| setTrainResult(null);
|
| setError(null);
|
| setShowTrainConfig(false);
|
|
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/admin/rag/train`, {
|
| method: 'POST',
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| },
|
| body: JSON.stringify({
|
| pdf_id: pdfId,
|
| branch: useConfig.branch || null,
|
| domain: useConfig.domain || null,
|
| company: useConfig.company || null,
|
| company_level: useConfig.company_level || 'product',
|
| })
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (response.ok && data.success) {
|
| setTrainResult(data);
|
| setShowTrainingSummary(true);
|
|
|
|
|
| let msg = `Training complete! Found ${data.questions_found} questions, stored ${data.questions_stored}.`;
|
|
|
| setSuccess(msg);
|
| fetchPdfs();
|
| fetchRagStats();
|
| fetchCollections();
|
| } else {
|
| setError(data.detail || 'Training failed');
|
| }
|
| } catch (err) {
|
| console.error('Training error:', err);
|
| setError('Training failed: ' + err.message);
|
| } finally {
|
| setTrainingPdfId(null);
|
| setConfigPdfId(null);
|
|
|
| setTrainConfig({
|
| branch: '',
|
| domain: '',
|
| company: '',
|
| company_level: 'product',
|
| });
|
| }
|
| };
|
|
|
| |
| |
|
|
| const openTrainConfig = (pdfId) => {
|
| setConfigPdfId(pdfId);
|
| setShowTrainConfig(true);
|
| setTrainConfig({
|
| branch: '',
|
| domain: '',
|
| company: '',
|
| company_level: 'product',
|
| });
|
| };
|
|
|
| |
| |
|
|
| const trainAllPdfs = async () => {
|
| setTrainAllLoading(true);
|
| setTrainResult(null);
|
| setError(null);
|
|
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/admin/rag/train-all`, {
|
| method: 'POST',
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| }
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (response.ok && data.success) {
|
| setTrainResult(data);
|
| setShowTrainingSummary(true);
|
| setSuccess(`Batch training complete! Processed ${data.pdfs_processed} PDFs, found ${data.total_questions_found} questions.`);
|
| fetchPdfs();
|
| fetchRagStats();
|
| fetchCollections();
|
| } else {
|
| setError(data.detail || 'Batch training failed');
|
| }
|
| } catch (err) {
|
| console.error('Batch training error:', err);
|
| setError('Batch training failed: ' + err.message);
|
| } finally {
|
| setTrainAllLoading(false);
|
| }
|
| };
|
|
|
| |
| |
|
|
| const deletePdf = async (pdfId) => {
|
| if (!window.confirm('Are you sure you want to delete this PDF?')) return;
|
|
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/admin/rag/pdfs/${pdfId}`, {
|
| method: 'DELETE',
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| }
|
| });
|
|
|
| if (response.ok) {
|
| setSuccess('PDF deleted successfully');
|
| fetchPdfs();
|
| } else {
|
| const data = await response.json();
|
| setError(data.detail || 'Delete failed');
|
| }
|
| } catch (err) {
|
| console.error('Delete error:', err);
|
| setError('Delete failed: ' + err.message);
|
| }
|
| };
|
|
|
| |
| |
|
|
| const fetchAllQuestions = async () => {
|
| setQuestionsLoading(true);
|
| setError(null);
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/admin/rag/questions/list?limit=500`, {
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| }
|
| });
|
|
|
| if (response.ok) {
|
| const data = await response.json();
|
| console.log('Fetched questions:', data);
|
| setAllQuestions(data.questions || []);
|
| } else {
|
| const errorData = await response.json().catch(() => ({}));
|
| console.error('Error response:', response.status, errorData);
|
| setError(`Failed to fetch questions: ${errorData.detail || response.statusText}`);
|
| }
|
| } catch (err) {
|
| console.error('Error fetching questions:', err);
|
| setError(`Failed to fetch questions: ${err.message}`);
|
| } finally {
|
| setQuestionsLoading(false);
|
| }
|
| };
|
|
|
| |
| |
|
|
| const openDeleteModal = () => {
|
| setShowDeleteModal(true);
|
| setSelectedQuestions(new Set());
|
| fetchAllQuestions();
|
| };
|
|
|
| |
| |
|
|
| const toggleQuestionSelection = (chunkId) => {
|
| const newSelected = new Set(selectedQuestions);
|
| if (newSelected.has(chunkId)) {
|
| newSelected.delete(chunkId);
|
| } else {
|
| newSelected.add(chunkId);
|
| }
|
| setSelectedQuestions(newSelected);
|
| };
|
|
|
| |
| |
|
|
| const selectAllQuestions = () => {
|
| if (selectedQuestions.size === allQuestions.length) {
|
| setSelectedQuestions(new Set());
|
| } else {
|
| setSelectedQuestions(new Set(allQuestions.map(q => q.chunk_id)));
|
| }
|
| };
|
|
|
| |
| |
|
|
| const deleteSelectedQuestions = async () => {
|
| if (selectedQuestions.size === 0) return;
|
|
|
| if (!window.confirm(`Are you sure you want to delete ${selectedQuestions.size} questions?`)) return;
|
|
|
| setDeleteLoading(true);
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/admin/rag/questions/bulk`, {
|
| method: 'DELETE',
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| },
|
| body: JSON.stringify({
|
| chunk_ids: Array.from(selectedQuestions)
|
| })
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (response.ok && data.success) {
|
| setSuccess(`Successfully deleted ${data.deleted_count} questions`);
|
| setSelectedQuestions(new Set());
|
| fetchAllQuestions();
|
| fetchRagStats();
|
| } else {
|
| setError(data.detail || 'Failed to delete questions');
|
| }
|
| } catch (err) {
|
| console.error('Delete error:', err);
|
| setError('Failed to delete questions: ' + err.message);
|
| } finally {
|
| setDeleteLoading(false);
|
| }
|
| };
|
|
|
| |
| |
|
|
| const fetchLockoutStatus = async () => {
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/admin/rag/clear-all/status`, {
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| }
|
| });
|
| if (response.ok) {
|
| const data = await response.json();
|
| setLockoutStatus(data);
|
| if (data.is_locked && data.time_remaining_seconds) {
|
| setLockoutCountdown(data.time_remaining_seconds);
|
| }
|
| }
|
| } catch (err) {
|
| console.error('Error fetching lockout status:', err);
|
| }
|
| };
|
|
|
| |
| |
|
|
| const openClearAllModal = () => {
|
| setShowClearAllModal(true);
|
| setClearAllPassword('');
|
| setConfirmDataLoss(false);
|
| setConfirmNoBackup(false);
|
| fetchLockoutStatus();
|
| };
|
|
|
| |
| |
|
|
| const clearAllVectorDatabase = async () => {
|
|
|
| if (lockoutStatus.is_locked) {
|
| setError('You are currently locked out. Please wait.');
|
| return;
|
| }
|
|
|
| setClearAllLoading(true);
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/admin/rag/clear-all`, {
|
| method: 'POST',
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| },
|
| body: JSON.stringify({
|
| password: clearAllPassword,
|
| confirm_data_loss: confirmDataLoss,
|
| confirm_no_backup: confirmNoBackup
|
| })
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (response.ok && data.success) {
|
| setSuccess(`Vector database cleared! ${data.questions_deleted} questions deleted. ${data.pdfs_reset || 0} PDFs reset.`);
|
| setShowClearAllModal(false);
|
| setClearAllPassword('');
|
| setConfirmDataLoss(false);
|
| setConfirmNoBackup(false);
|
| setLockoutStatus({ is_locked: false, remaining_attempts: 5, time_remaining_seconds: null, stage: 0 });
|
|
|
| fetchRagStats();
|
| fetchCollections();
|
| fetchPdfs();
|
| setAllQuestions([]);
|
| } else {
|
|
|
| if (response.status === 429) {
|
| const timeRemaining = response.headers.get('X-Lockout-Remaining');
|
| if (timeRemaining) {
|
| setLockoutCountdown(parseInt(timeRemaining));
|
| setLockoutStatus(prev => ({
|
| ...prev,
|
| is_locked: true,
|
| time_remaining_seconds: parseInt(timeRemaining),
|
| remaining_attempts: 0,
|
| }));
|
| }
|
| } else if (response.status === 403) {
|
|
|
| const remaining = response.headers.get('X-Remaining-Attempts');
|
| if (remaining !== null) {
|
| setLockoutStatus(prev => ({
|
| ...prev,
|
| remaining_attempts: parseInt(remaining),
|
| }));
|
| }
|
| }
|
| setError(data.detail || 'Failed to clear vector database');
|
| setClearAllPassword('');
|
| }
|
| } catch (err) {
|
| console.error('Clear error:', err);
|
| setError('Failed to clear vector database: ' + err.message);
|
| } finally {
|
| setClearAllLoading(false);
|
| }
|
| };
|
|
|
|
|
| React.useEffect(() => {
|
| if (lockoutCountdown && lockoutCountdown > 0) {
|
| const timer = setInterval(() => {
|
| setLockoutCountdown(prev => {
|
| if (prev <= 1) {
|
| clearInterval(timer);
|
| setLockoutStatus(prevStatus => ({
|
| ...prevStatus,
|
| is_locked: false,
|
| }));
|
| fetchLockoutStatus();
|
| return null;
|
| }
|
| return prev - 1;
|
| });
|
| }, 1000);
|
| return () => clearInterval(timer);
|
| }
|
| }, [lockoutCountdown]);
|
|
|
| |
| |
|
|
| const viewPdfSummary = async (pdfId) => {
|
| setSummaryLoading(true);
|
| setSelectedPdfSummary(null);
|
| setShowTrainingSummary(true);
|
|
|
| try {
|
| const token = getToken();
|
| const response = await fetch(`${API_BASE}/api/admin/rag/pdfs/${pdfId}/details`, {
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| }
|
| });
|
|
|
| if (response.ok) {
|
| const data = await response.json();
|
| console.log('PDF Details Response:', data);
|
| console.log('Classification:', data.classification);
|
| console.log('Questions Detail:', data.classification?.questions_detail);
|
|
|
| setSelectedPdfSummary({
|
| pdfName: data.original_filename,
|
| questions_found: data.questions_extracted,
|
| questions_stored: data.questions_extracted,
|
| trained_at: data.trained_at,
|
| branch: data.branch,
|
| domain: data.domain,
|
| classification: data.classification,
|
| question_types: data.question_types,
|
| difficulties: data.difficulties,
|
| });
|
| } else {
|
| const data = await response.json();
|
| setError(data.detail || 'Failed to load PDF details');
|
| setShowTrainingSummary(false);
|
| }
|
| } catch (err) {
|
| console.error('Error fetching PDF details:', err);
|
| setError('Failed to load PDF details: ' + err.message);
|
| setShowTrainingSummary(false);
|
| } finally {
|
| setSummaryLoading(false);
|
| }
|
| };
|
|
|
| |
| |
|
|
| const searchQuestions = async () => {
|
| if (!searchQuery.trim()) return;
|
|
|
| setSearchLoading(true);
|
| setSearchResults(null);
|
|
|
| try {
|
| const token = getToken();
|
| const params = new URLSearchParams({
|
| query: searchQuery,
|
| top_k: '10'
|
| });
|
|
|
| if (searchFilters.question_type) {
|
| params.append('question_type', searchFilters.question_type);
|
| }
|
| if (searchFilters.difficulty) {
|
| params.append('difficulty', searchFilters.difficulty);
|
| }
|
|
|
| const response = await fetch(`${API_BASE}/api/admin/rag/search?${params}`, {
|
| headers: {
|
| 'Authorization': `Bearer ${token}`,
|
| 'Content-Type': 'application/json'
|
| }
|
| });
|
|
|
| if (response.ok) {
|
| const data = await response.json();
|
| setSearchResults(data);
|
| }
|
| } catch (err) {
|
| console.error('Search error:', err);
|
| setError('Search failed: ' + err.message);
|
| } finally {
|
| setSearchLoading(false);
|
| }
|
| };
|
|
|
|
|
| useEffect(() => {
|
| fetchPdfs();
|
| fetchRagStats();
|
| fetchCollections();
|
| fetchTaxonomy();
|
| }, [fetchPdfs, fetchRagStats, fetchCollections, fetchTaxonomy]);
|
|
|
|
|
| useEffect(() => {
|
| if (success) {
|
| const timer = setTimeout(() => setSuccess(null), 5000);
|
| return () => clearTimeout(timer);
|
| }
|
| }, [success]);
|
|
|
| useEffect(() => {
|
| if (error) {
|
| const timer = setTimeout(() => setError(null), 5000);
|
| return () => clearTimeout(timer);
|
| }
|
| }, [error]);
|
|
|
| |
| |
|
|
| const formatFileSize = (bytes) => {
|
| if (bytes < 1024) return bytes + ' B';
|
| if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
| return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
| };
|
|
|
| |
| |
|
|
| const formatName = (name) => {
|
| if (!name) return '';
|
| return name
|
| .split('_')
|
| .map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
| .join(' ');
|
| };
|
|
|
| |
| |
|
|
| const getBranchForDomain = (domainId) => {
|
| const domain = taxonomy.domains.find(d => d.id === domainId);
|
| if (domain) {
|
| const branch = taxonomy.branches.find(b => b.id === domain.branch);
|
| return branch ? branch.name : formatName(domain.branch);
|
| }
|
| return null;
|
| };
|
|
|
| const untrainedPdfs = pdfs.filter(p => !p.is_trained);
|
|
|
| return (
|
| <div className="panel-container rag-panel">
|
| {/* Header */}
|
| <header className="panel-header">
|
| <div className="header-content">
|
| <div className="header-title">
|
| <div className="header-icon-wrapper brain">
|
| <Brain size={28} />
|
| </div>
|
| <div>
|
| <h1>RAG Question Manager</h1>
|
| <p>Upload PDFs, train RAG, and manage interview questions</p>
|
| </div>
|
| </div>
|
| <button
|
| type="button"
|
| className="btn btn-secondary"
|
| onClick={(e) => { e.stopPropagation(); fetchPdfs(); fetchRagStats(); fetchCollections(); fetchTaxonomy(); }}
|
| >
|
| <RefreshCw size={18} />
|
| Refresh
|
| </button>
|
| </div>
|
| </header>
|
|
|
| {/* Alerts */}
|
| {error && (
|
| <div className="alert alert-error">
|
| <XCircle size={18} />
|
| <span>{error}</span>
|
| </div>
|
| )}
|
| {success && (
|
| <div className="alert alert-success">
|
| <CheckCircle size={18} />
|
| <span>{success}</span>
|
| </div>
|
| )}
|
|
|
| {/* Stats Cards */}
|
| <div className="stats-grid rag-stats">
|
| <div className="stat-card">
|
| <div className="stat-icon upload">
|
| <FileText size={24} />
|
| </div>
|
| <div className="stat-content">
|
| <span className="stat-value">{pdfs.length}</span>
|
| <span className="stat-label">PDFs Uploaded</span>
|
| </div>
|
| </div>
|
| <div className="stat-card">
|
| <div className="stat-icon trained">
|
| <CheckCircle size={24} />
|
| </div>
|
| <div className="stat-content">
|
| <span className="stat-value">{pdfs.filter(p => p.is_trained).length}</span>
|
| <span className="stat-label">PDFs Trained</span>
|
| </div>
|
| </div>
|
| <div className="stat-card">
|
| <div className="stat-icon questions">
|
| <BookOpen size={24} />
|
| </div>
|
| <div className="stat-content">
|
| <span className="stat-value">
|
| {ragStats?.total_documents || pdfs.reduce((sum, p) => sum + (p.questions_extracted || 0), 0)}
|
| </span>
|
| <span className="stat-label">Questions in RAG</span>
|
| </div>
|
| </div>
|
| <div className="stat-card">
|
| <div className="stat-icon collections">
|
| <Database size={24} />
|
| </div>
|
| <div className="stat-content">
|
| <span className="stat-value">{collections.length}</span>
|
| <span className="stat-label">Collections</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| {/* Danger Zone - Delete Actions */}
|
| <div className="danger-zone">
|
| <div className="danger-zone-header">
|
| <AlertTriangle size={20} />
|
| <span>Danger Zone</span>
|
| </div>
|
| <div className="danger-zone-actions">
|
| <button
|
| type="button"
|
| className="btn btn-warning"
|
| onClick={(e) => { e.stopPropagation(); openDeleteModal(); }}
|
| >
|
| <Trash2 size={16} />
|
| Delete Specific Questions
|
| </button>
|
| <button
|
| type="button"
|
| className="btn btn-danger"
|
| onClick={(e) => { e.stopPropagation(); openClearAllModal(); }}
|
| >
|
| <AlertTriangle size={16} />
|
| Clear Entire Vector Database
|
| </button>
|
| </div>
|
| </div>
|
|
|
| {/* View Tabs */}
|
| <div className="view-tabs">
|
| <button
|
| type="button"
|
| className={`tab-btn ${activeView === 'upload' ? 'active' : ''}`}
|
| onClick={(e) => { e.stopPropagation(); setActiveView('upload'); }}
|
| >
|
| <Upload size={18} />
|
| Upload & Train
|
| </button>
|
| <button
|
| type="button"
|
| className={`tab-btn ${activeView === 'stats' ? 'active' : ''}`}
|
| onClick={(e) => { e.stopPropagation(); setActiveView('stats'); }}
|
| >
|
| <BarChart2 size={18} />
|
| RAG Statistics
|
| </button>
|
| <button
|
| type="button"
|
| className={`tab-btn ${activeView === 'search' ? 'active' : ''}`}
|
| onClick={(e) => { e.stopPropagation(); setActiveView('search'); }}
|
| >
|
| <Search size={18} />
|
| Search Questions
|
| </button>
|
| </div>
|
|
|
| {/* Upload & Train View */}
|
| {activeView === 'upload' && (
|
| <div className="rag-content">
|
| {/* Upload Section */}
|
| <section className="upload-section">
|
| <h3><Upload size={20} /> Upload Interview PDFs</h3>
|
| <div className="upload-zone">
|
| <input
|
| type="file"
|
| id="pdf-upload"
|
| accept=".pdf"
|
| onChange={handleUpload}
|
| style={{ display: 'none' }}
|
| />
|
| <label htmlFor="pdf-upload" className="upload-label">
|
| <FileText size={48} />
|
| <span className="upload-text">Click to upload PDF</span>
|
| <span className="upload-hint">Interview questions will be automatically extracted</span>
|
| </label>
|
| {uploadProgress && (
|
| <div className={`upload-progress ${uploadProgress.status}`}>
|
| {uploadProgress.status === 'uploading' && <Loader2 size={18} className="spin" />}
|
| {uploadProgress.status === 'success' && <CheckCircle size={18} />}
|
| {uploadProgress.status === 'error' && <XCircle size={18} />}
|
| <span>{uploadProgress.filename}</span>
|
| </div>
|
| )}
|
| </div>
|
| </section>
|
|
|
| {/* Train All Button */}
|
| {untrainedPdfs.length > 0 && (
|
| <div className="train-all-section">
|
| <button
|
| type="button"
|
| className="btn btn-primary train-all-btn"
|
| onClick={(e) => { e.stopPropagation(); trainAllPdfs(); }}
|
| disabled={trainAllLoading}
|
| >
|
| {trainAllLoading ? (
|
| <><Loader2 size={18} className="spin" /> Training All...</>
|
| ) : (
|
| <><Zap size={18} /> Train All Untrained PDFs ({untrainedPdfs.length})</>
|
| )}
|
| </button>
|
| </div>
|
| )}
|
|
|
| {}
|
| <section className="pdf-list-section">
|
| <h3><FolderOpen size={20} /> Uploaded PDFs</h3>
|
| {pdfsLoading ? (
|
| <div className="loading-state">
|
| <Loader2 size={32} className="spin" />
|
| <p>Loading PDFs...</p>
|
| </div>
|
| ) : pdfs.length === 0 ? (
|
| <div className="empty-state">
|
| <FileText size={48} />
|
| <p>No PDFs uploaded yet</p>
|
| <span>Upload interview question PDFs to train RAG</span>
|
| </div>
|
| ) : (
|
| <div className="pdf-grid">
|
| {pdfs.map((pdf) => (
|
| <div key={pdf.pdf_id} className={`pdf-card ${pdf.is_trained ? 'trained' : 'untrained'}`}>
|
| <div className="pdf-icon">
|
| <FileText size={32} />
|
| {pdf.is_trained && (
|
| <span className="trained-badge">
|
| <CheckCircle size={14} />
|
| </span>
|
| )}
|
| </div>
|
| <div className="pdf-info">
|
| <h4 title={pdf.original_filename}>{pdf.original_filename}</h4>
|
| <div className="pdf-meta">
|
| <span><Hash size={12} /> {formatFileSize(pdf.size_bytes)}</span>
|
| {pdf.is_trained && (
|
| <span><BookOpen size={12} /> {pdf.questions_extracted} questions</span>
|
| )}
|
| </div>
|
| </div>
|
| <div className="pdf-actions">
|
| {!pdf.is_trained ? (
|
| <>
|
| <button
|
| type="button"
|
| className="btn btn-sm btn-primary"
|
| onClick={(e) => { e.stopPropagation(); trainPdf(pdf.pdf_id); }}
|
| disabled={trainingPdfId === pdf.pdf_id}
|
| title="Train with auto-classification"
|
| >
|
| {trainingPdfId === pdf.pdf_id ? (
|
| <><Loader2 size={14} className="spin" /> Training...</>
|
| ) : (
|
| <><Play size={14} /> Train</>
|
| )}
|
| </button>
|
| <button
|
| type="button"
|
| className="btn btn-sm btn-secondary"
|
| onClick={(e) => { e.stopPropagation(); openTrainConfig(pdf.pdf_id); }}
|
| disabled={trainingPdfId === pdf.pdf_id}
|
| title="Configure classification options"
|
| >
|
| <Settings size={14} />
|
| </button>
|
| </>
|
| ) : (
|
| <>
|
| <button
|
| type="button"
|
| className="btn btn-sm btn-info"
|
| onClick={(e) => { e.stopPropagation(); viewPdfSummary(pdf.pdf_id); }}
|
| title="View training summary"
|
| >
|
| <Eye size={14} /> Summary
|
| </button>
|
| <span className="status-trained">
|
| <CheckCircle size={14} /> Trained
|
| </span>
|
| </>
|
| )}
|
| <button
|
| type="button"
|
| className="btn btn-sm btn-danger"
|
| onClick={(e) => { e.stopPropagation(); deletePdf(pdf.pdf_id); }}
|
| >
|
| <Trash2 size={14} />
|
| </button>
|
| </div>
|
| </div>
|
| ))}
|
| </div>
|
| )}
|
| </section>
|
|
|
| {}
|
| {showTrainConfig && configPdfId && (
|
| <div className="modal-overlay" onClick={() => setShowTrainConfig(false)}>
|
| <div className="train-config-modal" onClick={e => e.stopPropagation()}>
|
| <h3><Settings size={20} /> Training Configuration</h3>
|
| <p className="modal-subtitle">Configure classification for this PDF. Leave empty for auto-detection.</p>
|
|
|
| <div className="config-form">
|
| <div className="form-group">
|
| <label><GitBranch size={14} /> Branch (optional)</label>
|
| <select
|
| value={trainConfig.branch}
|
| onChange={(e) => setTrainConfig({
|
| ...trainConfig,
|
| branch: e.target.value,
|
| domain: '' // Reset domain when branch changes
|
| })}
|
| >
|
| <option value="">Auto-detect branch</option>
|
| {taxonomy.branches.map(b => (
|
| <option key={b.id} value={b.id}>{b.name} ({b.shortName})</option>
|
| ))}
|
| </select>
|
| </div>
|
|
|
| <div className="form-group">
|
| <label><Briefcase size={14} /> Domain/Role (optional)</label>
|
| <select
|
| value={trainConfig.domain}
|
| onChange={(e) => setTrainConfig({
|
| ...trainConfig,
|
| domain: e.target.value
|
| })}
|
| >
|
| <option value="">Auto-detect domain</option>
|
| {getFilteredDomains(trainConfig.branch).map(d => (
|
| <option key={d.id} value={d.id}>{d.name}</option>
|
| ))}
|
| </select>
|
| </div>
|
|
|
| <div className="form-group">
|
| <label><Tag size={14} /> Company (optional)</label>
|
| <input
|
| type="text"
|
| value={trainConfig.company}
|
| onChange={(e) => setTrainConfig({
|
| ...trainConfig,
|
| company: e.target.value
|
| })}
|
| placeholder="e.g., Google, Amazon"
|
| />
|
| </div>
|
|
|
| <div className="form-group">
|
| <label><BarChart2 size={14} /> Company Level</label>
|
| <select
|
| value={trainConfig.company_level}
|
| onChange={(e) => setTrainConfig({
|
| ...trainConfig,
|
| company_level: e.target.value
|
| })}
|
| >
|
| <option value="product">Product-based</option>
|
| <option value="service">Service-based</option>
|
| <option value="startup">Startup</option>
|
| </select>
|
| </div>
|
| </div>
|
|
|
| <div className="modal-actions">
|
| <button
|
| type="button"
|
| className="btn btn-secondary"
|
| onClick={(e) => { e.stopPropagation(); setShowTrainConfig(false); }}
|
| >
|
| Cancel
|
| </button>
|
| <button
|
| type="button"
|
| className="btn btn-primary"
|
| onClick={(e) => { e.stopPropagation(); trainPdf(configPdfId, trainConfig); }}
|
| >
|
| <Play size={14} /> Train PDF
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| )}
|
|
|
| {}
|
| {trainResult && (
|
| <section className="train-result">
|
| <h3><CheckCircle size={20} /> Training Result</h3>
|
| <div className="result-grid">
|
| <div className="result-item">
|
| <span className="result-label">Questions Found</span>
|
| <span className="result-value">{trainResult.questions_found}</span>
|
| </div>
|
| <div className="result-item">
|
| <span className="result-label">Questions Stored</span>
|
| <span className="result-value">{trainResult.questions_stored}</span>
|
| </div>
|
| {trainResult.question_types && Object.keys(trainResult.question_types).length > 0 && (
|
| <div className="result-breakdown">
|
| <span className="result-label">By Type:</span>
|
| <div className="breakdown-tags">
|
| {Object.entries(trainResult.question_types).map(([type, count]) => (
|
| <span key={type} className="tag">{type}: {count}</span>
|
| ))}
|
| </div>
|
| </div>
|
| )}
|
| {/* Classification breakdown */}
|
| {trainResult.classification && (
|
| <>
|
| {trainResult.classification.branches && Object.keys(trainResult.classification.branches).length > 0 && (
|
| <div className="result-breakdown classification">
|
| <span className="result-label"><GitBranch size={14} /> By Branch:</span>
|
| <div className="breakdown-tags">
|
| {Object.entries(trainResult.classification.branches).map(([branch, count]) => (
|
| <span key={branch} className="tag tag-branch">{branch}: {count}</span>
|
| ))}
|
| </div>
|
| </div>
|
| )}
|
| {trainResult.classification.domains && Object.keys(trainResult.classification.domains).length > 0 && (
|
| <div className="result-breakdown classification">
|
| <span className="result-label"><Briefcase size={14} /> By Domain:</span>
|
| <div className="breakdown-tags">
|
| {Object.entries(trainResult.classification.domains)
|
| .sort((a, b) => b[1] - a[1])
|
| .slice(0, 6)
|
| .map(([domain, count]) => (
|
| <span key={domain} className="tag tag-domain">{domain}: {count}</span>
|
| ))}
|
| {Object.keys(trainResult.classification.domains).length > 6 && (
|
| <span className="tag tag-more">+{Object.keys(trainResult.classification.domains).length - 6} more</span>
|
| )}
|
| </div>
|
| </div>
|
| )}
|
| </>
|
| )}
|
| </div>
|
| </section>
|
| )}
|
| </div>
|
| )}
|
|
|
| {}
|
| {activeView === 'stats' && (
|
| <div className="rag-content">
|
| <section className="stats-section">
|
| <h3><BarChart2 size={20} /> RAG Configuration</h3>
|
| {statsLoading ? (
|
| <div className="loading-state">
|
| <Loader2 size={32} className="spin" />
|
| <p>Loading statistics...</p>
|
| </div>
|
| ) : ragStats ? (
|
| <div className="stats-details">
|
| <div className="stat-row">
|
| <span>Vector Store</span>
|
| <span className="stat-value-text">{ragStats.vector_store?.type || 'FAISS'}</span>
|
| </div>
|
| <div className="stat-row">
|
| <span>Questions Collection</span>
|
| <span className="stat-value-text">{ragStats.questions_collection || 'interview_questions'}</span>
|
| </div>
|
| <div className="stat-row">
|
| <span>Embedding Model</span>
|
| <span className="stat-value-text">{ragStats.embedding_model || 'models/embedding-001'}</span>
|
| </div>
|
| <div className="stat-row">
|
| <span>Total Documents</span>
|
| <span className="stat-value-text">{ragStats.total_documents || 0}</span>
|
| </div>
|
| </div>
|
| ) : (
|
| <div className="empty-state">
|
| <AlertCircle size={48} />
|
| <p>Could not load RAG statistics</p>
|
| </div>
|
| )}
|
| </section>
|
|
|
| <section className="collections-section">
|
| <h3><Database size={20} /> Vector Collections</h3>
|
| {collections.length === 0 ? (
|
| <div className="empty-state small">
|
| <Database size={32} />
|
| <p>No collections yet</p>
|
| </div>
|
| ) : (
|
| <div className="collections-list">
|
| {collections.map((col) => (
|
| <div key={col.name} className="collection-item">
|
| <div className="collection-info">
|
| <span className="collection-name">{col.name}</span>
|
| <span className="collection-count">{col.document_count} documents</span>
|
| </div>
|
| </div>
|
| ))}
|
| </div>
|
| )}
|
| </section>
|
| </div>
|
| )}
|
|
|
| {}
|
| {activeView === 'search' && (
|
| <div className="rag-content">
|
| <section className="search-section">
|
| <h3><Search size={20} /> Search Questions in RAG</h3>
|
| <div className="search-form">
|
| <div className="search-input-wrap">
|
| <Search size={18} />
|
| <input
|
| type="text"
|
| placeholder="Search for interview questions..."
|
| value={searchQuery}
|
| onChange={(e) => setSearchQuery(e.target.value)}
|
| onKeyDown={(e) => e.key === 'Enter' && searchQuestions()}
|
| />
|
| </div>
|
| <div className="search-filters">
|
| <select
|
| value={searchFilters.question_type}
|
| onChange={(e) => setSearchFilters(f => ({ ...f, question_type: e.target.value }))}
|
| >
|
| <option value="">All Types</option>
|
| <option value="technical">Technical</option>
|
| <option value="behavioral">Behavioral</option>
|
| <option value="system_design">System Design</option>
|
| <option value="coding">Coding</option>
|
| </select>
|
| <select
|
| value={searchFilters.difficulty}
|
| onChange={(e) => setSearchFilters(f => ({ ...f, difficulty: e.target.value }))}
|
| >
|
| <option value="">All Difficulties</option>
|
| <option value="easy">Easy</option>
|
| <option value="medium">Medium</option>
|
| <option value="hard">Hard</option>
|
| <option value="extreme">Extreme</option>
|
| </select>
|
| </div>
|
| <button
|
| type="button"
|
| className="btn btn-primary"
|
| onClick={(e) => { e.stopPropagation(); searchQuestions(); }}
|
| disabled={searchLoading || !searchQuery.trim()}
|
| >
|
| {searchLoading ? (
|
| <><Loader2 size={18} className="spin" /> Searching...</>
|
| ) : (
|
| <><Search size={18} /> Search</>
|
| )}
|
| </button>
|
| </div>
|
|
|
| {}
|
| {searchResults && (
|
| <div className="search-results">
|
| <h4>Found {searchResults.results?.length || 0} questions</h4>
|
| {searchResults.results?.map((result, index) => (
|
| <div key={index} className="result-card">
|
| <div className="result-question">
|
| <BookOpen size={16} />
|
| <span>{result.question || result.content}</span>
|
| </div>
|
| <div className="result-meta">
|
| {result.score && (
|
| <span className="score">
|
| Relevance: {(result.score * 100).toFixed(1)}%
|
| </span>
|
| )}
|
| {result.metadata?.question_type && (
|
| <span className="tag type">{result.metadata.question_type}</span>
|
| )}
|
| {result.metadata?.difficulty && (
|
| <span className="tag difficulty">{result.metadata.difficulty}</span>
|
| )}
|
| </div>
|
| </div>
|
| ))}
|
| </div>
|
| )}
|
| </section>
|
| </div>
|
| )}
|
|
|
| {}
|
| {showTrainingSummary && (trainResult || selectedPdfSummary) && (
|
| <div className="modal-overlay" onClick={() => { setShowTrainingSummary(false); setSelectedPdfSummary(null); }}>
|
| <div className="modal training-summary-modal" onClick={(e) => e.stopPropagation()}>
|
| <div className="modal-header">
|
| <div className="modal-title">
|
| <FileCheck size={24} />
|
| <h2>{selectedPdfSummary ? 'PDF Summary' : 'Training Summary'}</h2>
|
| {selectedPdfSummary?.pdfName && (
|
| <span className="modal-subtitle-inline">{selectedPdfSummary.pdfName}</span>
|
| )}
|
| </div>
|
| <button
|
| type="button"
|
| className="modal-close"
|
| onClick={() => { setShowTrainingSummary(false); setSelectedPdfSummary(null); }}
|
| >
|
| <X size={20} />
|
| </button>
|
| </div>
|
|
|
| <div className="modal-body">
|
| {summaryLoading ? (
|
| <div className="loading-state">
|
| <Loader2 size={48} className="spin" />
|
| <p>Loading summary...</p>
|
| </div>
|
| ) : (() => {
|
| const summary = selectedPdfSummary || trainResult;
|
| if (!summary) return null;
|
| return (
|
| <>
|
| {/* Quick Stats */}
|
| <div className="summary-stats">
|
| <div className="summary-stat-card highlight">
|
| <div className="summary-stat-icon">
|
| <BookOpen size={32} />
|
| </div>
|
| <div className="summary-stat-content">
|
| <span className="summary-stat-value">{summary.questions_stored || summary.total_questions_stored || 0}</span>
|
| <span className="summary-stat-label">Questions Extracted</span>
|
| </div>
|
| </div>
|
| <div className="summary-stat-card">
|
| <div className="summary-stat-icon">
|
| <FileText size={28} />
|
| </div>
|
| <div className="summary-stat-content">
|
| <span className="summary-stat-value">{summary.questions_found || summary.total_questions_found || 0}</span>
|
| <span className="summary-stat-label">Questions Found</span>
|
| </div>
|
| </div>
|
| {summary.pdfs_processed && (
|
| <div className="summary-stat-card">
|
| <div className="summary-stat-icon">
|
| <FolderOpen size={28} />
|
| </div>
|
| <div className="summary-stat-content">
|
| <span className="summary-stat-value">{summary.pdfs_processed}</span>
|
| <span className="summary-stat-label">PDFs Processed</span>
|
| </div>
|
| </div>
|
| )}
|
| </div>
|
|
|
| {/* Domain Breakdown */}
|
| {summary.classification?.domains && Object.keys(summary.classification.domains).length > 0 && (
|
| <div className="summary-section">
|
| <h3>
|
| <Briefcase size={18} />
|
| Questions by Domain
|
| </h3>
|
| <div className="domain-breakdown">
|
| {Object.entries(summary.classification.domains)
|
| .sort((a, b) => b[1] - a[1])
|
| .map(([domain, count]) => {
|
| const total = summary.questions_stored || summary.total_questions_stored || 1;
|
| const percentage = Math.round((count / total) * 100);
|
| return (
|
| <div key={domain} className="domain-item">
|
| <div className="domain-info">
|
| <span className="domain-name">{formatName(domain)}</span>
|
| <span className="domain-count">{count} questions</span>
|
| </div>
|
| <div className="domain-bar">
|
| <div
|
| className="domain-bar-fill"
|
| style={{ width: `${percentage}%` }}
|
| />
|
| </div>
|
| <span className="domain-percentage">{percentage}%</span>
|
| </div>
|
| );
|
| })}
|
| </div>
|
| </div>
|
| )}
|
|
|
| {/* Branch Breakdown */}
|
| {summary.classification?.branches && Object.keys(summary.classification.branches).length > 0 && (
|
| <div className="summary-section">
|
| <h3>
|
| <GitBranch size={18} />
|
| Questions by Branch
|
| </h3>
|
| <div className="branch-breakdown">
|
| {Object.entries(summary.classification.branches)
|
| .sort((a, b) => b[1] - a[1])
|
| .map(([branch, count]) => (
|
| <div key={branch} className="branch-badge">
|
| <span className="branch-name">{formatName(branch)}</span>
|
| <span className="branch-count">{count}</span>
|
| </div>
|
| ))}
|
| </div>
|
| </div>
|
| )}
|
|
|
| {/* Question Types */}
|
| {summary.question_types && Object.keys(summary.question_types).length > 0 && (
|
| <div className="summary-section">
|
| <h3>
|
| <Tag size={18} />
|
| Question Types
|
| </h3>
|
| <div className="type-breakdown">
|
| {Object.entries(summary.question_types)
|
| .sort((a, b) => b[1] - a[1])
|
| .map(([type, count]) => (
|
| <div key={type} className="type-badge">
|
| <span className="type-name">{formatName(type)}</span>
|
| <span className="type-count">{count}</span>
|
| </div>
|
| ))}
|
| </div>
|
| </div>
|
| )}
|
|
|
| {/* Difficulty Distribution */}
|
| {summary.difficulties && Object.keys(summary.difficulties).length > 0 && (
|
| <div className="summary-section">
|
| <h3>
|
| <BarChart2 size={18} />
|
| Difficulty Distribution
|
| </h3>
|
| <div className="difficulty-breakdown">
|
| {Object.entries(summary.difficulties)
|
| .map(([difficulty, count]) => (
|
| <div key={difficulty} className={`difficulty-badge ${difficulty}`}>
|
| <span className="difficulty-name">{formatName(difficulty)}</span>
|
| <span className="difficulty-count">{count}</span>
|
| </div>
|
| ))}
|
| </div>
|
| </div>
|
| )}
|
|
|
| {/* Extracted Questions List */}
|
| {summary.classification?.questions_detail && summary.classification.questions_detail.length > 0 && (
|
| <div className="summary-section questions-list-section">
|
| <h3>
|
| <BookOpen size={18} />
|
| Extracted Questions ({summary.classification.questions_detail.length})
|
| </h3>
|
| <div className="questions-list">
|
| {summary.classification.questions_detail.map((q, idx) => (
|
| <div key={idx} className="question-item">
|
| {/* Source Badge: R = RAG (always R since these are from PDFs) */}
|
| <span
|
| className="source-badge source-rag"
|
| title="R = RAG Question (from trained PDF)"
|
| >
|
| R
|
| </span>
|
| <div className="question-number">{q.question_number}</div>
|
| <div className="question-content">
|
| <p className="question-text">{q.question_text}</p>
|
| <div className="question-meta">
|
| <span className="tag tag-branch">{q.branch_name}</span>
|
| <span className="tag tag-domain">{q.domain_name}</span>
|
| <span className={`tag tag-type ${q.question_type}`}>{formatName(q.question_type)}</span>
|
| <span className={`tag tag-difficulty ${q.difficulty}`}>{formatName(q.difficulty)}</span>
|
| </div>
|
| </div>
|
| </div>
|
| ))}
|
| </div>
|
| </div>
|
| )}
|
|
|
| {/* No Classification Data Message */}
|
| {(!summary.classification ||
|
| ((!summary.classification.domains || Object.keys(summary.classification.domains).length === 0) &&
|
| (!summary.classification.branches || Object.keys(summary.classification.branches).length === 0))) && (
|
| <div className="empty-state small">
|
| <AlertCircle size={32} />
|
| <p>No classification data available</p>
|
| <span>This PDF may have been trained before classification was added</span>
|
| </div>
|
| )}
|
| </>
|
| );
|
| })()}
|
| </div>
|
|
|
| <div className="modal-footer">
|
| <button
|
| type="button"
|
| className="btn btn-primary"
|
| onClick={() => { setShowTrainingSummary(false); setSelectedPdfSummary(null); }}
|
| >
|
| <CheckCircle size={16} />
|
| Done
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| )}
|
|
|
| {}
|
| {showDeleteModal && (
|
| <div className="modal-overlay" onClick={() => setShowDeleteModal(false)}>
|
| <div className="modal-content delete-modal large" onClick={(e) => e.stopPropagation()}>
|
| <div className="modal-header">
|
| <h2>
|
| <Trash2 size={24} />
|
| Delete Questions
|
| </h2>
|
| <button
|
| type="button"
|
| className="close-btn"
|
| onClick={() => setShowDeleteModal(false)}
|
| >
|
| <X size={20} />
|
| </button>
|
| </div>
|
|
|
| <div className="modal-body">
|
| {error && (
|
| <div className="alert alert-error" style={{ marginBottom: '16px' }}>
|
| <AlertCircle size={18} />
|
| {error}
|
| </div>
|
| )}
|
| {questionsLoading ? (
|
| <div className="loading-state">
|
| <Loader2 size={32} className="spin" />
|
| <p>Loading questions...</p>
|
| </div>
|
| ) : allQuestions.length === 0 ? (
|
| <div className="empty-state">
|
| <Database size={48} />
|
| <p>No questions in vector database</p>
|
| <span style={{ fontSize: '12px', color: 'var(--text-muted)' }}>
|
| Train a PDF first to add questions
|
| </span>
|
| </div>
|
| ) : (
|
| <>
|
| <div className="delete-modal-toolbar">
|
| <div className="selection-info">
|
| <span>{selectedQuestions.size} of {allQuestions.length} selected</span>
|
| </div>
|
| <button
|
| type="button"
|
| className="btn btn-secondary btn-sm"
|
| onClick={(e) => { e.stopPropagation(); selectAllQuestions(); }}
|
| >
|
| {selectedQuestions.size === allQuestions.length ? 'Deselect All' : 'Select All'}
|
| </button>
|
| </div>
|
|
|
| <div className="questions-delete-list">
|
| {allQuestions.map((q) => (
|
| <div
|
| key={q.chunk_id}
|
| className={`question-delete-item ${selectedQuestions.has(q.chunk_id) ? 'selected' : ''}`}
|
| onClick={() => toggleQuestionSelection(q.chunk_id)}
|
| >
|
| <input
|
| type="checkbox"
|
| checked={selectedQuestions.has(q.chunk_id)}
|
| onChange={() => toggleQuestionSelection(q.chunk_id)}
|
| onClick={(e) => e.stopPropagation()}
|
| />
|
| {/* Source Badge: R = RAG (always R since these are from PDFs) */}
|
| <span
|
| className="source-badge source-rag"
|
| title="R = RAG Question (from trained PDF)"
|
| >
|
| R
|
| </span>
|
| <div className="question-delete-content">
|
| <p className="question-text">{q.content}</p>
|
| <div className="question-meta">
|
| <span className="tag tag-branch">{q.branch_name}</span>
|
| <span className="tag tag-domain">{q.domain_name}</span>
|
| <span className="tag tag-source">{q.source_file}</span>
|
| </div>
|
| </div>
|
| </div>
|
| ))}
|
| </div>
|
| </>
|
| )}
|
| </div>
|
|
|
| <div className="modal-footer">
|
| <button
|
| type="button"
|
| className="btn btn-secondary"
|
| onClick={() => setShowDeleteModal(false)}
|
| >
|
| Cancel
|
| </button>
|
| <button
|
| type="button"
|
| className="btn btn-danger"
|
| onClick={(e) => { e.stopPropagation(); deleteSelectedQuestions(); }}
|
| disabled={selectedQuestions.size === 0 || deleteLoading}
|
| >
|
| {deleteLoading ? (
|
| <>
|
| <Loader2 size={16} className="spin" />
|
| Deleting...
|
| </>
|
| ) : (
|
| <>
|
| <Trash2 size={16} />
|
| Delete {selectedQuestions.size} Questions
|
| </>
|
| )}
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| )}
|
|
|
| {}
|
| {showClearAllModal && (
|
| <div className="modal-overlay" onClick={() => setShowClearAllModal(false)}>
|
| <div className="modal-content clear-all-modal" onClick={(e) => e.stopPropagation()}>
|
| <div className="modal-header danger">
|
| <h2>
|
| <AlertTriangle size={24} />
|
| Clear Entire Vector Database
|
| </h2>
|
| <button
|
| type="button"
|
| className="close-btn"
|
| onClick={() => setShowClearAllModal(false)}
|
| >
|
| <X size={20} />
|
| </button>
|
| </div>
|
|
|
| <div className="modal-body">
|
| <div className="danger-warning">
|
| <div className="warning-icon">
|
| <Shield size={48} />
|
| </div>
|
| <h3>⚠️ This action is IRREVERSIBLE!</h3>
|
| <p>
|
| You are about to delete <strong>ALL questions</strong> from the vector database.
|
| This includes all questions extracted from PDFs.
|
| </p>
|
| <p>
|
| Current database contains approximately <strong>{ragStats?.total_documents || 0} questions</strong>.
|
| </p>
|
| </div>
|
|
|
| <div className="confirmation-checkboxes">
|
| <label className="checkbox-label danger">
|
| <input
|
| type="checkbox"
|
| checked={confirmDataLoss}
|
| onChange={(e) => setConfirmDataLoss(e.target.checked)}
|
| />
|
| <span>I understand that all RAG questions will be permanently deleted</span>
|
| </label>
|
|
|
| <label className="checkbox-label danger">
|
| <input
|
| type="checkbox"
|
| checked={confirmNoBackup}
|
| onChange={(e) => setConfirmNoBackup(e.target.checked)}
|
| />
|
| <span>I understand that this action cannot be undone and there is no backup</span>
|
| </label>
|
| </div>
|
|
|
| <div className="password-section">
|
| <label>
|
| <Lock size={16} />
|
| Enter admin password to confirm:
|
| </label>
|
| <input
|
| type="password"
|
| value={clearAllPassword}
|
| onChange={(e) => setClearAllPassword(e.target.value)}
|
| placeholder="Enter deletion password"
|
| className="password-input"
|
| disabled={lockoutStatus.is_locked}
|
| />
|
|
|
| {/* Lockout Warning */}
|
| {lockoutStatus.is_locked && lockoutCountdown ? (
|
| <div className="lockout-warning" style={{
|
| marginTop: '12px',
|
| padding: '12px',
|
| background: 'rgba(239, 68, 68, 0.15)',
|
| border: '1px solid rgba(239, 68, 68, 0.4)',
|
| borderRadius: '8px',
|
| color: '#ef4444',
|
| fontSize: '14px',
|
| display: 'flex',
|
| alignItems: 'center',
|
| gap: '8px',
|
| }}>
|
| <AlertTriangle size={18} />
|
| <div>
|
| <strong>🔒 Account Locked</strong>
|
| <p style={{ margin: '4px 0 0 0', fontSize: '13px' }}>
|
| Too many failed attempts. Try again in: <strong>
|
| {lockoutCountdown >= 3600
|
| ? `${Math.floor(lockoutCountdown / 3600)}h ${Math.floor((lockoutCountdown % 3600) / 60)}m`
|
| : lockoutCountdown >= 60
|
| ? `${Math.floor(lockoutCountdown / 60)}m ${lockoutCountdown % 60}s`
|
| : `${lockoutCountdown}s`
|
| }
|
| </strong>
|
| </p>
|
| </div>
|
| </div>
|
| ) : lockoutStatus.remaining_attempts < 5 && (
|
| <div className="attempts-warning" style={{
|
| marginTop: '12px',
|
| padding: '10px 12px',
|
| background: lockoutStatus.remaining_attempts <= 2
|
| ? 'rgba(239, 68, 68, 0.1)'
|
| : 'rgba(245, 158, 11, 0.1)',
|
| border: `1px solid ${lockoutStatus.remaining_attempts <= 2
|
| ? 'rgba(239, 68, 68, 0.3)'
|
| : 'rgba(245, 158, 11, 0.3)'}`,
|
| borderRadius: '6px',
|
| color: lockoutStatus.remaining_attempts <= 2 ? '#ef4444' : '#f59e0b',
|
| fontSize: '13px',
|
| display: 'flex',
|
| alignItems: 'center',
|
| gap: '8px',
|
| }}>
|
| <AlertTriangle size={16} />
|
| <span>
|
| <strong>{lockoutStatus.remaining_attempts}</strong> attempt{lockoutStatus.remaining_attempts !== 1 ? 's' : ''} remaining
|
| {lockoutStatus.stage === 0 && ' (then 2 min lockout)'}
|
| {lockoutStatus.stage === 1 && ' (then 10 min lockout)'}
|
| {lockoutStatus.stage >= 2 && ' (then 24 hour lockout)'}
|
| </span>
|
| </div>
|
| )}
|
| </div>
|
| </div>
|
|
|
| <div className="modal-footer">
|
| <button
|
| type="button"
|
| className="btn btn-secondary"
|
| onClick={() => setShowClearAllModal(false)}
|
| >
|
| Cancel
|
| </button>
|
| <button
|
| type="button"
|
| className="btn btn-danger"
|
| onClick={(e) => { e.stopPropagation(); clearAllVectorDatabase(); }}
|
| disabled={!confirmDataLoss || !confirmNoBackup || !clearAllPassword || clearAllLoading || lockoutStatus.is_locked}
|
| >
|
| {clearAllLoading ? (
|
| <>
|
| <Loader2 size={16} className="spin" />
|
| Clearing...
|
| </>
|
| ) : lockoutStatus.is_locked ? (
|
| <>
|
| <Lock size={16} />
|
| Locked
|
| </>
|
| ) : (
|
| <>
|
| <AlertTriangle size={16} />
|
| Clear All Data
|
| </>
|
| )}
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| )}
|
| </div>
|
| );
|
| }
|
|
|
| export default RAGQuestionsPanel; |
