feat: implement QuestionBank CRUD with pagination and template query
- Add pagination support to findAll (page, limit query params) - Add findByTemplateId method to service - Add GET /by-template/:templateId endpoint to controller - Service already includes CRUD for QuestionBank and QuestionBankItem
This commit is contained in:
Developer
@@ -0,0 +1,343 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { ModelConfig, RawFile, IndexingConfig } from '../types';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import { Layers, FileText, Database, X, ArrowRight, Files, Info } from 'lucide-react';
|
||||
import { formatBytes } from '../utils/fileUtils';
|
||||
import { chunkConfigService } from '../services/chunkConfigService';
|
||||
|
||||
interface IndexingModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
files: RawFile[];
|
||||
embeddingModels: ModelConfig[];
|
||||
defaultEmbeddingId: string;
|
||||
onConfirm: (config: IndexingConfig) => void;
|
||||
isReconfiguring?: boolean;
|
||||
}
|
||||
|
||||
const IndexingModal: React.FC<IndexingModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
files,
|
||||
embeddingModels,
|
||||
defaultEmbeddingId,
|
||||
onConfirm,
|
||||
isReconfiguring = false
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const { showWarning } = useToast();
|
||||
|
||||
// Configuration state
|
||||
const [chunkSize, setChunkSize] = useState(200);
|
||||
const [chunkOverlap, setChunkOverlap] = useState(40);
|
||||
const [selectedEmbedding, setSelectedEmbedding] = useState('');
|
||||
|
||||
// Limit info state
|
||||
const [limits, setLimits] = useState<{
|
||||
maxChunkSize: number;
|
||||
maxOverlapSize: number;
|
||||
defaultChunkSize: number;
|
||||
defaultOverlapSize: number;
|
||||
modelInfo: {
|
||||
name: string;
|
||||
maxInputTokens: number;
|
||||
maxBatchSize: number;
|
||||
expectedDimensions: number;
|
||||
};
|
||||
} | null>(null);
|
||||
|
||||
const [isLoadingLimits, setIsLoadingLimits] = useState(false);
|
||||
|
||||
// Get auth token
|
||||
const getAuthToken = () => {
|
||||
return localStorage.getItem('authToken') || '';
|
||||
};
|
||||
|
||||
// Load config limits when selected model changes
|
||||
useEffect(() => {
|
||||
if (!isOpen || !selectedEmbedding) {
|
||||
setLimits(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadLimits = async () => {
|
||||
setIsLoadingLimits(true);
|
||||
try {
|
||||
const token = getAuthToken();
|
||||
if (!token) return;
|
||||
|
||||
const limitData = await chunkConfigService.getLimits(selectedEmbedding, token);
|
||||
setLimits(limitData);
|
||||
|
||||
// Auto-adjust if current values exceed new limits
|
||||
if (chunkSize > limitData.maxChunkSize) {
|
||||
setChunkSize(limitData.maxChunkSize);
|
||||
showWarning(t('autoAdjustChunk', limitData.maxChunkSize));
|
||||
}
|
||||
if (chunkOverlap > limitData.maxOverlapSize) {
|
||||
setChunkOverlap(limitData.maxOverlapSize);
|
||||
showWarning(t('autoAdjustOverlap', limitData.maxOverlapSize));
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to read configuration limits:', error);
|
||||
showWarning(t('loadLimitsFailed'));
|
||||
} finally {
|
||||
setIsLoadingLimits(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadLimits();
|
||||
}, [isOpen, selectedEmbedding]);
|
||||
|
||||
// Initialize modal
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// Set default embedding model
|
||||
const validDefault = embeddingModels.find(m => m.id === defaultEmbeddingId);
|
||||
if (validDefault) {
|
||||
setSelectedEmbedding(defaultEmbeddingId);
|
||||
} else if (embeddingModels.length > 0) {
|
||||
setSelectedEmbedding(embeddingModels[0].id);
|
||||
} else {
|
||||
setSelectedEmbedding('');
|
||||
}
|
||||
|
||||
// Reset to defaults
|
||||
setChunkSize(200);
|
||||
setChunkOverlap(40);
|
||||
}
|
||||
}, [isOpen, defaultEmbeddingId, embeddingModels]);
|
||||
|
||||
// Handle chunk size change
|
||||
const handleChunkSizeChange = (value: number) => {
|
||||
if (limits && value > limits.maxChunkSize) {
|
||||
showWarning(t('maxValueMsg', limits.maxChunkSize));
|
||||
setChunkSize(limits.maxChunkSize);
|
||||
return;
|
||||
}
|
||||
setChunkSize(value);
|
||||
|
||||
// Auto-adjust overlap if it exceeds 50% of new chunk size
|
||||
if (chunkOverlap > value * 0.5) {
|
||||
setChunkOverlap(Math.floor(value * 0.5));
|
||||
}
|
||||
};
|
||||
|
||||
// Handle overlap size change
|
||||
const handleChunkOverlapChange = (value: number) => {
|
||||
if (limits && value > limits.maxOverlapSize) {
|
||||
showWarning(t('maxValueMsg', limits.maxOverlapSize));
|
||||
setChunkOverlap(limits.maxOverlapSize);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if it exceeds 50% of chunk size
|
||||
const maxOverlapByRatio = Math.floor(chunkSize * 0.5);
|
||||
if (value > maxOverlapByRatio) {
|
||||
showWarning(t('overlapRatioLimit', maxOverlapByRatio));
|
||||
setChunkOverlap(maxOverlapByRatio);
|
||||
return;
|
||||
}
|
||||
|
||||
setChunkOverlap(value);
|
||||
};
|
||||
|
||||
// Render limits info
|
||||
const renderLimitsInfo = () => {
|
||||
if (!limits || isLoadingLimits) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-blue-50/50 backdrop-blur-sm border border-blue-100 rounded-xl p-4 text-xs">
|
||||
<div className="flex items-center gap-2 mb-2 font-bold text-blue-900">
|
||||
<Info className="w-4 h-4 text-blue-600" />
|
||||
{t('modelLimitsInfo')}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-y-2 gap-x-4 text-slate-600">
|
||||
<div>{t('model')}: <span className="font-semibold text-slate-900">{limits.modelInfo.name}</span></div>
|
||||
<div>{t('maxChunkSize')}: <span className="font-semibold text-slate-900">{limits.maxChunkSize} tokens</span></div>
|
||||
<div>{t('maxOverlapSize')}: <span className="font-semibold text-slate-900">{limits.maxOverlapSize} tokens</span></div>
|
||||
<div>{t('maxBatchSize')}: <span className="font-semibold text-slate-900">{limits.modelInfo.maxBatchSize}</span></div>
|
||||
</div>
|
||||
{limits.modelInfo.maxInputTokens > limits.maxChunkSize && (
|
||||
<div className="mt-2 text-blue-600/80 text-[10px] flex items-center gap-1">
|
||||
<Info size={10} />
|
||||
{t('envLimitWeaker')}: {limits.maxChunkSize} < {limits.modelInfo.maxInputTokens}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/40 backdrop-blur-md p-4 animate-in fade-in duration-300">
|
||||
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col max-h-[90vh] border border-white/20">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-slate-50 bg-white">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-slate-900 flex items-center gap-2.5">
|
||||
<div className="p-2 bg-blue-50 rounded-xl">
|
||||
<Database className="w-5 h-5 text-blue-600" />
|
||||
</div>
|
||||
{isReconfiguring ? t('reconfigureFile') : t('idxModalTitle')}
|
||||
</h2>
|
||||
<p className="text-[13px] text-slate-500 mt-1 ml-12">
|
||||
{isReconfiguring ? t('modifySettings') : t('idxDesc')}
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-xl transition-all active:scale-95">
|
||||
<X className="w-5 h-5 text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-5 space-y-6">
|
||||
|
||||
{/* Pending Files */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
|
||||
<Files className="w-4 h-4 text-slate-500" />
|
||||
{t('idxFiles')}
|
||||
</h3>
|
||||
<div className="space-y-1 max-h-32 overflow-y-auto bg-slate-50/50 rounded-xl p-3 border border-slate-100">
|
||||
{files.map((file, index) => (
|
||||
<div key={index} className="text-xs text-slate-600 flex items-center justify-between py-1.5 px-2 hover:bg-white/80 rounded-lg transition-colors">
|
||||
<span className="truncate flex-1">{file.name}</span>
|
||||
<span className="text-slate-400 ml-2 font-medium">{formatBytes(file.size)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Embedding Model Selection */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
|
||||
<Layers className="w-4 h-4 text-slate-500" />
|
||||
{t('idxEmbeddingModel')}
|
||||
</h3>
|
||||
<select
|
||||
className="w-full text-sm border border-slate-100 bg-slate-50/50 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-blue-100 focus:border-blue-400 outline-none transition-all cursor-pointer"
|
||||
value={selectedEmbedding}
|
||||
onChange={(e) => setSelectedEmbedding(e.target.value)}
|
||||
>
|
||||
<option value="">{t('pleaseSelect')}</option>
|
||||
{embeddingModels.map(model => (
|
||||
<option key={model.id} value={model.id}>
|
||||
{model.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Chunk Configuration */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
|
||||
<FileText className="w-4 h-4 text-slate-500" />
|
||||
{t('idxMethod')}
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{/* Chunk Size */}
|
||||
<div>
|
||||
<div className="flex justify-between mb-1 text-xs">
|
||||
<span className="text-slate-600">{t('chunkSize')}</span>
|
||||
<span className="font-mono font-semibold text-blue-600">{chunkSize}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="50"
|
||||
max={limits?.maxChunkSize || 8191}
|
||||
value={chunkSize}
|
||||
onChange={(e) => handleChunkSizeChange(Number(e.target.value))}
|
||||
className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
||||
disabled={!selectedEmbedding || isLoadingLimits}
|
||||
/>
|
||||
<div className="flex justify-between text-[10px] text-slate-400 mt-1">
|
||||
<span>{t('min')}: 50</span>
|
||||
<span>{t('max')}: {limits?.maxChunkSize || '—'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overlap Size */}
|
||||
<div>
|
||||
<div className="flex justify-between mb-1 text-xs">
|
||||
<span className="text-slate-600">{t('chunkOverlap')}</span>
|
||||
<span className="font-mono font-semibold text-blue-600">{chunkOverlap}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={limits?.maxOverlapSize || 200}
|
||||
value={chunkOverlap}
|
||||
onChange={(e) => handleChunkOverlapChange(Number(e.target.value))}
|
||||
className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
||||
disabled={!selectedEmbedding || isLoadingLimits}
|
||||
/>
|
||||
<div className="flex justify-between text-[10px] text-slate-400 mt-1">
|
||||
<span>{t('min')}: 0</span>
|
||||
<span>{t('max')}: {limits?.maxOverlapSize || '—'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Model Limits Info */}
|
||||
{renderLimitsInfo()}
|
||||
|
||||
{/* Optimization Tips */}
|
||||
{limits && (
|
||||
<div className="bg-amber-50/50 backdrop-blur-sm border border-amber-100 rounded-xl p-4 text-xs text-amber-900">
|
||||
<p className="font-bold mb-2 flex items-center gap-1.5">
|
||||
<span className="text-amber-500">💡</span>
|
||||
{t('optimizationTips')}
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-1.5 text-[11px] text-amber-800/80">
|
||||
{chunkSize > 800 && <li>{t('tipChunkTooLarge')}</li>}
|
||||
{chunkOverlap < chunkSize * 0.1 && <li>{t('tipOverlapSmall').replace('$1', String(Math.floor(chunkSize * 0.1)))}</li>}
|
||||
{chunkSize === limits.maxChunkSize && <li>{t('tipMaxValues')}</li>}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Footer Buttons */}
|
||||
<div className="p-6 border-t border-slate-50 bg-white flex justify-end gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-6 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-50 rounded-xl transition-all active:scale-95"
|
||||
>
|
||||
{t('idxCancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (!selectedEmbedding) {
|
||||
showWarning(t('selectEmbeddingFirst'));
|
||||
return;
|
||||
}
|
||||
onConfirm({
|
||||
chunkSize,
|
||||
chunkOverlap,
|
||||
embeddingModelId: selectedEmbedding
|
||||
});
|
||||
}}
|
||||
disabled={!selectedEmbedding || isLoadingLimits}
|
||||
className="px-8 py-2.5 text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 rounded-xl shadow-lg shadow-blue-200 flex items-center gap-2 transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
{t('idxStart')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default IndexingModal;
|
||||
Reference in New Issue
Block a user