forked from hangshuo652/aurak
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,328 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Users, FileText, Award, TrendingUp, Calendar, Filter, Download, ChevronDown } from 'lucide-react';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import { useAuth } from '../../src/contexts/AuthContext';
|
||||
import { assessmentStatsService, AssessmentStats, StatsQueryParams } from '../../src/services/assessmentStatsService';
|
||||
import { templateService } from '../../services/templateService';
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService';
|
||||
import { AssessmentTemplate } from '../../types';
|
||||
import { KnowledgeGroup } from '../../types';
|
||||
import { cn } from '../../src/utils/cn';
|
||||
|
||||
interface StatCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
subtitle?: string;
|
||||
icon: React.ElementType;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const StatCard: React.FC<StatCardProps> = ({ title, value, subtitle, icon: Icon, color }) => (
|
||||
<div className="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-500">{title}</p>
|
||||
<p className="text-3xl font-bold mt-1" style={{ color }}>{value}</p>
|
||||
{subtitle && <p className="text-xs text-slate-400 mt-1">{subtitle}</p>}
|
||||
</div>
|
||||
<div className={cn("w-12 h-12 rounded-xl flex items-center justify-center", `bg-${color}/10`)}>
|
||||
<Icon className={cn("w-6 h-6", `text-${color}`)} style={{ color }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const AssessmentStatsView: React.FC = () => {
|
||||
const { language, t } = useLanguage();
|
||||
const { user } = useAuth();
|
||||
const [stats, setStats] = useState<AssessmentStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filters, setFilters] = useState<StatsQueryParams>({});
|
||||
const [templates, setTemplates] = useState<AssessmentTemplate[]>([]);
|
||||
const [groups, setGroups] = useState<KnowledgeGroup[]>([]);
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
const isAdmin = user?.role === 'admin' || user?.role === 'super_admin';
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [templatesData, groupsData] = await Promise.all([
|
||||
templateService.getAll(),
|
||||
knowledgeGroupService.getGroups(),
|
||||
]);
|
||||
setTemplates(templatesData);
|
||||
setGroups(groupsData);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch options:', err);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchStats = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await assessmentStatsService.getStats(filters);
|
||||
setStats(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch stats:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchStats();
|
||||
}, [filters]);
|
||||
|
||||
const handleFilterChange = (key: keyof StatsQueryParams, value: string) => {
|
||||
setFilters(prev => ({ ...prev, [key]: value || undefined }));
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
if (!stats?.recentRecords) return;
|
||||
const csv = [
|
||||
['ID', 'Knowledge Base/Group', 'Template', 'Score', 'Status', 'Created At'].join(','),
|
||||
...stats.recentRecords.map(r => [
|
||||
r.id,
|
||||
r.knowledgeBase,
|
||||
r.template,
|
||||
r.score ?? '',
|
||||
r.status,
|
||||
r.createdAt,
|
||||
].join(',')),
|
||||
].join('\n');
|
||||
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `assessment-stats-${new Date().toISOString().split('T')[0]}.csv`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString(language === 'zh' ? 'zh-CN' : language === 'ja' ? 'ja-JP' : 'en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
const isZh = language === 'zh';
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center p-8">
|
||||
<p className="text-slate-500">{isZh ? '仅管理员可查看统计' : 'Statistics only available for admins'}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full p-6 space-y-6 overflow-hidden">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900">
|
||||
{isZh ? '评估统计' : 'Assessment Statistics'}
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">
|
||||
{isZh ? '查看所有用户评估数据' : 'View assessment data for all users'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-4 py-2 rounded-xl border transition-colors",
|
||||
showFilters ? "bg-blue-50 border-blue-200 text-blue-700" : "bg-white border-slate-200 text-slate-600 hover:bg-slate-50"
|
||||
)}
|
||||
>
|
||||
<Filter size={16} />
|
||||
{isZh ? '筛选' : 'Filters'}
|
||||
</button>
|
||||
{stats && (
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-blue-600 text-white hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<Download size={16} />
|
||||
{isZh ? '导出' : 'Export'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showFilters && (
|
||||
<div className="bg-white rounded-2xl p-4 border border-slate-100 shadow-sm">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">
|
||||
{isZh ? '开始日期' : 'Start Date'}
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={filters.startDate || ''}
|
||||
onChange={(e) => handleFilterChange('startDate', e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">
|
||||
{isZh ? '结束日期' : 'End Date'}
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={filters.endDate || ''}
|
||||
onChange={(e) => handleFilterChange('endDate', e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">
|
||||
{isZh ? '模板' : 'Template'}
|
||||
</label>
|
||||
<select
|
||||
value={filters.templateId || ''}
|
||||
onChange={(e) => handleFilterChange('templateId', e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">{isZh ? '全部' : 'All'}</option>
|
||||
{templates.map(t => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">
|
||||
{isZh ? '知识库' : 'Knowledge Group'}
|
||||
</label>
|
||||
<select
|
||||
value={filters.knowledgeGroupId || ''}
|
||||
onChange={(e) => handleFilterChange('knowledgeGroupId', e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">{isZh ? '全部' : 'All'}</option>
|
||||
{groups.map(g => (
|
||||
<option key={g.id} value={g.id}>{g.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
title={isZh ? '总评估次数' : 'Total Attempts'}
|
||||
value={stats?.totalAttempts ?? 0}
|
||||
icon={FileText}
|
||||
color="#6366f1"
|
||||
/>
|
||||
<StatCard
|
||||
title={isZh ? '最高分' : 'Highest Score'}
|
||||
value={stats?.highestScore ?? 0}
|
||||
subtitle={isZh ? '分' : 'points'}
|
||||
icon={Award}
|
||||
color="#f59e0b"
|
||||
/>
|
||||
<StatCard
|
||||
title={isZh ? '平均分' : 'Average Score'}
|
||||
value={stats?.averageScore ?? 0}
|
||||
subtitle={isZh ? '分' : 'points'}
|
||||
icon={TrendingUp}
|
||||
color="#10b981"
|
||||
/>
|
||||
<StatCard
|
||||
title={isZh ? '完成率' : 'Completion Rate'}
|
||||
value={`${stats?.completionRate ?? 0}%`}
|
||||
icon={Users}
|
||||
color="#8b5cf6"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden flex flex-col">
|
||||
<div className="p-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-900">
|
||||
{isZh ? '历史记录' : 'Recent Records'}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
) : stats?.recentRecords?.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full text-slate-400">
|
||||
{isZh ? '暂无记录' : 'No records found'}
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-50 sticky top-0">
|
||||
<tr>
|
||||
<th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
|
||||
{isZh ? '知识库' : 'Knowledge Base'}
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
|
||||
{isZh ? '模板' : 'Template'}
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
|
||||
{isZh ? '分数' : 'Score'}
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
|
||||
{isZh ? '状态' : 'Status'}
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
|
||||
{isZh ? '时间' : 'Created At'}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{stats?.recentRecords?.map((record) => (
|
||||
<tr key={record.id} className="hover:bg-slate-50">
|
||||
<td className="px-4 py-3 text-sm text-slate-900">
|
||||
{record.knowledgeBase}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-600">
|
||||
{record.template}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm font-medium">
|
||||
{record.score !== null ? (
|
||||
<span className={record.score >= 90 ? 'text-green-600' : record.score >= 60 ? 'text-yellow-600' : 'text-red-600'}>
|
||||
{record.score}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-slate-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={cn(
|
||||
"inline-flex px-2 py-0.5 text-xs font-medium rounded-full",
|
||||
record.status === 'COMPLETED'
|
||||
? "bg-green-50 text-green-700"
|
||||
: "bg-yellow-50 text-yellow-700"
|
||||
)}>
|
||||
{record.status === 'COMPLETED' ? (isZh ? '已完成' : 'Completed') : (isZh ? '进行中' : 'In Progress')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-500">
|
||||
{formatDate(record.createdAt)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssessmentStatsView;
|
||||
@@ -0,0 +1,414 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Plus, Edit2, Trash2, FileText, Loader2, X, Sparkles, Sliders, Hash, Type, Brain, Copy, Check } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import { useToast } from '../../contexts/ToastContext';
|
||||
import { useConfirm } from '../../contexts/ConfirmContext';
|
||||
import { templateService } from '../../services/templateService';
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService';
|
||||
import { AssessmentTemplate, CreateTemplateData, UpdateTemplateData, KnowledgeGroup } from '../../types';
|
||||
|
||||
export const AssessmentTemplateManager: React.FC = () => {
|
||||
const { t } = useLanguage();
|
||||
const { showSuccess, showError } = useToast();
|
||||
const { confirm } = useConfirm();
|
||||
const [templates, setTemplates] = useState<AssessmentTemplate[]>([]);
|
||||
const [groups, setGroups] = useState<KnowledgeGroup[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingTemplate, setEditingTemplate] = useState<AssessmentTemplate | null>(null);
|
||||
|
||||
// UI state uses strings for easy input
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
keywords: '',
|
||||
questionCount: 5,
|
||||
difficultyDistribution: 'Basic: 30%, Intermediate: 40%, Advanced: 30%',
|
||||
style: 'Professional',
|
||||
knowledgeGroupId: '',
|
||||
});
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||
|
||||
const fetchTemplates = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await templateService.getAll();
|
||||
setTemplates(data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch templates:', error);
|
||||
showError(t('actionFailed'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchGroups = async () => {
|
||||
try {
|
||||
const data = await knowledgeGroupService.getGroups();
|
||||
setGroups(data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch groups:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTemplates();
|
||||
fetchGroups();
|
||||
}, []);
|
||||
|
||||
const handleOpenModal = (template?: AssessmentTemplate) => {
|
||||
if (template) {
|
||||
setEditingTemplate(template);
|
||||
setFormData({
|
||||
name: template.name,
|
||||
description: template.description || '',
|
||||
keywords: Array.isArray(template.keywords) ? template.keywords.join(', ') : '',
|
||||
questionCount: template.questionCount,
|
||||
difficultyDistribution: typeof template.difficultyDistribution === 'object'
|
||||
? JSON.stringify(template.difficultyDistribution)
|
||||
: (template.difficultyDistribution || ''),
|
||||
style: template.style || 'Professional',
|
||||
knowledgeGroupId: template.knowledgeGroupId || '',
|
||||
});
|
||||
} else {
|
||||
setEditingTemplate(null);
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
keywords: '',
|
||||
questionCount: 5,
|
||||
difficultyDistribution: '{"Basic": 3, "Intermediate": 4, "Advanced": 3}',
|
||||
style: 'Professional',
|
||||
knowledgeGroupId: '',
|
||||
});
|
||||
}
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleSave = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSaving(true);
|
||||
try {
|
||||
// Convert UI strings back to required types
|
||||
const keywordsArray = formData.keywords.split(',').map(k => k.trim()).filter(k => k !== '');
|
||||
let diffDist: any = formData.difficultyDistribution;
|
||||
try {
|
||||
if (formData.difficultyDistribution.startsWith('{')) {
|
||||
diffDist = JSON.parse(formData.difficultyDistribution);
|
||||
}
|
||||
} catch (e) {
|
||||
// Keep as string if parsing fails
|
||||
}
|
||||
|
||||
const payload: CreateTemplateData = {
|
||||
name: formData.name,
|
||||
description: formData.description,
|
||||
keywords: keywordsArray,
|
||||
questionCount: formData.questionCount,
|
||||
difficultyDistribution: diffDist,
|
||||
style: formData.style,
|
||||
knowledgeGroupId: formData.knowledgeGroupId || undefined,
|
||||
};
|
||||
|
||||
if (editingTemplate) {
|
||||
await templateService.update(editingTemplate.id, payload as UpdateTemplateData);
|
||||
showSuccess(t('featureUpdated'));
|
||||
} else {
|
||||
await templateService.create(payload);
|
||||
showSuccess(t('confirm'));
|
||||
}
|
||||
setShowModal(false);
|
||||
fetchTemplates();
|
||||
} catch (error) {
|
||||
console.error('Save failed:', error);
|
||||
showError(t('actionFailed'));
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyId = async (id: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(id);
|
||||
setCopiedId(id);
|
||||
showSuccess(t('copySuccess') || 'ID copied to clipboard');
|
||||
setTimeout(() => setCopiedId(null), 2000);
|
||||
} catch (err) {
|
||||
showError(t('actionFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!(await confirm(t('confirmTitle')))) return;
|
||||
try {
|
||||
await templateService.delete(id);
|
||||
showSuccess(t('confirm'));
|
||||
fetchTemplates();
|
||||
} catch (error) {
|
||||
showError(t('actionFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const renderDifficulty = (dist: any) => {
|
||||
if (typeof dist === 'string') return dist;
|
||||
if (typeof dist === 'object' && dist !== null) {
|
||||
return Object.entries(dist).map(([k, v]) => `${k}: ${v}`).join(', ');
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center">
|
||||
<FileText size={22} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-slate-900">{t('assessmentTemplates')}</h3>
|
||||
<p className="text-xs text-slate-500">{t('assessmentTemplatesSubtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleOpenModal()}
|
||||
className="px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-black flex items-center gap-2 shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95"
|
||||
>
|
||||
<Plus size={18} />
|
||||
{t('createTemplate')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-indigo-600 opacity-20" />
|
||||
</div>
|
||||
) : templates.length === 0 ? (
|
||||
<div className="bg-slate-50 rounded-[2rem] border-2 border-dashed border-slate-200 p-16 text-center">
|
||||
<FileText className="w-12 h-12 text-slate-200 mx-auto mb-4" />
|
||||
<p className="text-slate-400 font-bold uppercase tracking-widest text-xs">{t('mmEmpty')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{templates.map((template) => (
|
||||
<motion.div
|
||||
key={template.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="bg-white border border-slate-200 rounded-3xl p-5 shadow-sm hover:shadow-md transition-all group relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-indigo-500/5 rounded-full blur-3xl -mr-12 -mt-12" />
|
||||
|
||||
<div className="flex justify-between items-start mb-4 relative z-10">
|
||||
<h4 className="text-base font-black text-slate-900 truncate pr-8">{template.name}</h4>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => handleOpenModal(template)}
|
||||
className="p-1.5 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-all"
|
||||
>
|
||||
<Edit2 size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(template.id)}
|
||||
className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-500 mb-4 line-clamp-2 h-8">{template.description || t('noDescription')}</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 mb-2">
|
||||
<div className="bg-slate-50 rounded-xl p-2 border border-slate-100">
|
||||
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">{t('questionCount')}</span>
|
||||
<span className="text-xs font-bold text-slate-700">{template.questionCount}</span>
|
||||
</div>
|
||||
<div className="bg-slate-50 rounded-xl p-2 border border-slate-100 overflow-hidden">
|
||||
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">{t('difficultyDistribution')}</span>
|
||||
<span className="text-xs font-bold text-slate-700 truncate block">
|
||||
{renderDifficulty(template.difficultyDistribution)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 rounded-xl p-2 border border-slate-100 mb-2 flex items-center justify-between group/id">
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">Template ID</span>
|
||||
<span className="text-[10px] font-mono font-medium text-slate-500 truncate">{template.id}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleCopyId(template.id)}
|
||||
className="p-1.5 text-slate-400 hover:text-indigo-600 hover:bg-white rounded-lg transition-all opacity-0 group-hover/id:opacity-100"
|
||||
title="Copy ID"
|
||||
>
|
||||
{copiedId === template.id ? <Check size={12} className="text-emerald-500" /> : <Copy size={12} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-indigo-50/30 rounded-xl p-2 border border-indigo-100/50 mb-4 flex items-center gap-2">
|
||||
<Brain size={12} className="text-indigo-500" />
|
||||
<span className="text-[10px] font-bold text-indigo-700 truncate">
|
||||
{template.knowledgeGroup?.name || t('selectKnowledgeGroup')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5 pt-4 border-t border-slate-50">
|
||||
{Array.isArray(template.keywords) && template.keywords.map((kw, i) => (
|
||||
<span key={i} className="px-2 py-0.5 bg-indigo-50 text-indigo-600 text-[10px] font-bold rounded-full border border-indigo-100/50">
|
||||
{kw}
|
||||
</span>
|
||||
))}
|
||||
{(!template.keywords || template.keywords.length === 0) && <span className="text-[10px] text-slate-400 italic">No keywords</span>}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{createPortal(
|
||||
<AnimatePresence>
|
||||
{showModal && (
|
||||
<div key="assessment-template-modal" className="fixed inset-0 z-[1000] flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setShowModal(false)}
|
||||
className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
className="w-full max-w-xl bg-white rounded-[2.5rem] shadow-2xl relative z-10 overflow-hidden"
|
||||
>
|
||||
<div className="p-8 pb-4 flex items-center justify-between border-b border-slate-100">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center">
|
||||
{editingTemplate ? <Edit2 size={24} /> : <Plus size={24} />}
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-slate-900">
|
||||
{editingTemplate ? t('editTemplate') : t('createTemplate')}
|
||||
</h3>
|
||||
</div>
|
||||
<button onClick={() => setShowModal(false)} className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded-xl transition-all">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSave} className="p-8 space-y-5">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<div className="space-y-1.5 md:col-span-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 ml-1 flex items-center gap-2">
|
||||
<Type size={12} className="text-indigo-500" />
|
||||
{t('templateName')} *
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-[1.25rem] text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all placeholder:text-slate-300"
|
||||
value={formData.name}
|
||||
onChange={e => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="e.g. Senior Frontend Engineer Technical Interview"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5 md:col-span-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 ml-1 flex items-center gap-2">
|
||||
<Sparkles size={12} className="text-indigo-500" />
|
||||
{t('keywords')} ({t('keywordsHint')})
|
||||
</label>
|
||||
<input
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-[1.25rem] text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all placeholder:text-slate-300"
|
||||
value={formData.keywords}
|
||||
onChange={e => setFormData({ ...formData, keywords: e.target.value })}
|
||||
placeholder={t('keywordsHint')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 ml-1 flex items-center gap-2">
|
||||
<Hash size={12} className="text-indigo-500" />
|
||||
{t('questionCount')}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-[1.25rem] text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
value={formData.questionCount}
|
||||
onChange={e => setFormData({ ...formData, questionCount: parseInt(e.target.value) })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 ml-1 flex items-center gap-2">
|
||||
<Sliders size={12} className="text-indigo-500" />
|
||||
{t('difficultyDistribution')}
|
||||
</label>
|
||||
<input
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-[1.25rem] text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
value={formData.difficultyDistribution}
|
||||
onChange={e => setFormData({ ...formData, difficultyDistribution: e.target.value })}
|
||||
placeholder='{"Basic": 3, "Inter": 4, "Adv": 3}'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5 md:col-span-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 ml-1 flex items-center gap-2">
|
||||
<Sliders size={12} className="text-indigo-500" />
|
||||
{t('selectKnowledgeGroup')} *
|
||||
</label>
|
||||
<select
|
||||
required
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-[1.25rem] text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all appearance-none cursor-pointer"
|
||||
value={formData.knowledgeGroupId}
|
||||
onChange={e => setFormData({ ...formData, knowledgeGroupId: e.target.value })}
|
||||
>
|
||||
<option value="" disabled>{t('selectKnowledgeGroup')}</option>
|
||||
{groups.map(group => (
|
||||
<option key={group.id} value={group.id}>{group.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5 md:col-span-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 ml-1 flex items-center gap-2">
|
||||
<Sliders size={12} className="text-indigo-500" />
|
||||
{t('style')}
|
||||
</label>
|
||||
<input
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-[1.25rem] text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
value={formData.style}
|
||||
onChange={e => setFormData({ ...formData, style: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowModal(false)}
|
||||
className="px-6 py-4 text-sm font-black text-slate-500 hover:text-slate-700 transition-colors"
|
||||
>
|
||||
{t('mmCancel')}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSaving}
|
||||
className="px-10 py-4 bg-indigo-600 text-white rounded-[1.25rem] font-black uppercase tracking-widest text-xs shadow-xl shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
{isSaving && <Loader2 size={16} className="animate-spin" />}
|
||||
{t('save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,791 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
Brain,
|
||||
Send,
|
||||
Loader2,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
ChevronRight,
|
||||
History,
|
||||
ClipboardCheck,
|
||||
RefreshCcw,
|
||||
FileText,
|
||||
Star,
|
||||
Award,
|
||||
Trophy,
|
||||
Trash2
|
||||
} from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import { useConfirm } from '../../contexts/ConfirmContext';
|
||||
import { assessmentService, AssessmentSession, AssessmentState } from '../../services/assessmentService';
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService';
|
||||
import { templateService } from '../../services/templateService';
|
||||
import { KnowledgeGroup, AssessmentTemplate } from '../../types';
|
||||
import { cn } from '../../src/utils/cn';
|
||||
|
||||
interface AssessmentViewProps {
|
||||
onLogout: () => void;
|
||||
onNavigate: (path: string) => void;
|
||||
isAdmin: boolean;
|
||||
}
|
||||
|
||||
export const AssessmentView: React.FC<AssessmentViewProps> = ({
|
||||
onLogout,
|
||||
onNavigate,
|
||||
isAdmin
|
||||
}) => {
|
||||
const { language, t } = useLanguage();
|
||||
const { confirm } = useConfirm();
|
||||
const [groups, setGroups] = useState<KnowledgeGroup[]>([]);
|
||||
const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
|
||||
const [session, setSession] = useState<AssessmentSession | null>(null);
|
||||
const [state, setState] = useState<AssessmentState | null>(null);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [processStep, setProcessStep] = useState<string>('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [history, setHistory] = useState<AssessmentSession[]>([]);
|
||||
const [loadingHistoryId, setLoadingHistoryId] = useState<string | null>(null);
|
||||
const [showBasis, setShowBasis] = useState(false);
|
||||
const [templates, setTemplates] = useState<AssessmentTemplate[]>([]);
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchGroups = async () => {
|
||||
try {
|
||||
const data = await knowledgeGroupService.getGroups();
|
||||
setGroups(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch groups:', err);
|
||||
}
|
||||
};
|
||||
const fetchTemplates = async () => {
|
||||
try {
|
||||
const data = await templateService.getAll();
|
||||
setTemplates(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch templates:', err);
|
||||
}
|
||||
};
|
||||
fetchGroups();
|
||||
fetchTemplates();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [state?.messages, isLoading]);
|
||||
|
||||
const fetchHistory = async () => {
|
||||
try {
|
||||
const data = await assessmentService.getHistory();
|
||||
setHistory(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch history:', err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchHistory();
|
||||
}, []);
|
||||
|
||||
const isZh = language === 'zh';
|
||||
const isJa = language === 'ja';
|
||||
|
||||
const getStatusText = (node: string) => {
|
||||
const mapping: Record<string, any> = {
|
||||
generator: 'statusGeneratingQuestions',
|
||||
grader: 'statusEvaluatingAnswer',
|
||||
interviewer: 'statusPreparingQuestion',
|
||||
analyzer: 'statusGeneratingReport',
|
||||
};
|
||||
return t(mapping[node]) || t('statusProcessing');
|
||||
};
|
||||
|
||||
const handleSelectHistory = async (histSession: AssessmentSession) => {
|
||||
if (isLoading) return;
|
||||
|
||||
setLoadingHistoryId(histSession.id);
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const histState = await assessmentService.getSessionState(histSession.id);
|
||||
setState(histState);
|
||||
setSession(histSession);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to load historical assessment');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setLoadingHistoryId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteHistory = async (e: React.MouseEvent, histId: string) => {
|
||||
e.stopPropagation();
|
||||
const confirmed = await confirm(t('confirmDeleteAssessment'));
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
await assessmentService.deleteSession(histId);
|
||||
setHistory(prev => prev.filter(h => h.id !== histId));
|
||||
if (session?.id === histId) {
|
||||
setSession(null);
|
||||
setState(null);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Failed to delete history:', err);
|
||||
setError(t('deleteAssessmentFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleStartAssessment = async () => {
|
||||
if (!selectedTemplate) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setProcessStep(isZh ? '正在初始化...' : isJa ? '初期化中...' : 'Initializing...');
|
||||
|
||||
try {
|
||||
const newSession = await assessmentService.startSession(selectedGroup || undefined, language, selectedTemplate || undefined);
|
||||
setSession(newSession);
|
||||
|
||||
for await (const event of assessmentService.startSessionStream(newSession.id)) {
|
||||
if (event.type === 'node') {
|
||||
setProcessStep(getStatusText(event.node));
|
||||
if (event.data) {
|
||||
setState(prev => {
|
||||
if (!prev) return event.data;
|
||||
const prevMessages = prev.messages || [];
|
||||
return {
|
||||
...prev,
|
||||
...event.data,
|
||||
messages: event.data.messages
|
||||
? [...prevMessages, ...event.data.messages.filter((m: any) => !prevMessages.some((pm: any) => pm.content === m.content && pm.role === m.role))]
|
||||
: prevMessages,
|
||||
feedbackHistory: event.data.feedbackHistory
|
||||
? [...(prev.feedbackHistory || []), ...event.data.feedbackHistory.filter((fh: any) => !(prev.feedbackHistory || []).some((pfh: any) => pfh.content === fh.content))]
|
||||
: (prev.feedbackHistory || []),
|
||||
scores: { ...(prev.scores || {}), ...(event.data.scores || {}) }
|
||||
} as any;
|
||||
});
|
||||
}
|
||||
} else if (event.type === 'final') {
|
||||
setState(event.data);
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to start assessment');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setProcessStep('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRetry = async () => {
|
||||
if (!session) return;
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setProcessStep(isZh ? '正在重新尝试生成...' : isJa ? '再生成中...' : 'Retrying generation...');
|
||||
try {
|
||||
for await (const event of assessmentService.startSessionStream(session.id)) {
|
||||
if (event.type === 'node') {
|
||||
setProcessStep(getStatusText(event.node));
|
||||
} else if (event.type === 'final') {
|
||||
setState(event.data);
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Retry failed');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setProcessStep('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmitAnswer = async () => {
|
||||
if (!session || !inputValue.trim() || isLoading) return;
|
||||
|
||||
const answer = inputValue.trim();
|
||||
setInputValue('');
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setProcessStep(isZh ? '正在准备发送...' : isJa ? '送信準備中...' : 'Preparing to send...');
|
||||
|
||||
try {
|
||||
setState(prev => ({
|
||||
...prev!,
|
||||
messages: [
|
||||
...(prev?.messages || []),
|
||||
{ role: 'user' as const, content: answer, timestamp: Date.now() }
|
||||
]
|
||||
}));
|
||||
|
||||
for await (const event of assessmentService.submitAnswerStream(session.id, answer, language)) {
|
||||
if (event.type === 'node') {
|
||||
setProcessStep(getStatusText(event.node));
|
||||
if (event.data) {
|
||||
setState(prev => {
|
||||
if (!prev) return event.data;
|
||||
const prevMessages = prev.messages || [];
|
||||
const mergedMessages = event.data.messages
|
||||
? [...prevMessages, ...event.data.messages.filter((m: any) => !prevMessages.some((pm: any) => pm.content === m.content && pm.role === m.role))]
|
||||
: prevMessages;
|
||||
|
||||
return {
|
||||
...prev,
|
||||
...event.data,
|
||||
messages: mergedMessages,
|
||||
feedbackHistory: event.data.feedbackHistory
|
||||
? [...(prev.feedbackHistory || []), ...event.data.feedbackHistory.filter((fh: any) => !(prev.feedbackHistory || []).some((pfh: any) => pfh.content === fh.content))]
|
||||
: (prev.feedbackHistory || []),
|
||||
scores: { ...(prev.scores || {}), ...(event.data.scores || {}) }
|
||||
} as any;
|
||||
});
|
||||
}
|
||||
} else if (event.type === 'final') {
|
||||
setState(event.data);
|
||||
if (event.data.status === 'COMPLETED') {
|
||||
setSession(prev => prev ? { ...prev, status: 'COMPLETED' } : null);
|
||||
fetchHistory();
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to submit answer');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setProcessStep('');
|
||||
}
|
||||
};
|
||||
|
||||
const renderHeader = () => (
|
||||
<div className="flex-none h-16 px-6 border-b border-slate-200/60 flex items-center justify-between bg-white/80 backdrop-blur-md relative z-40">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-200">
|
||||
<Brain size={22} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-slate-900 leading-tight">{t('assessmentTitle')}</h2>
|
||||
<p className="text-xs text-slate-500 font-medium">{t('assessmentDesc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{session && (
|
||||
<div className="px-3 py-1.5 bg-slate-100 rounded-full flex items-center gap-2">
|
||||
<div className={cn(
|
||||
"w-2 h-2 rounded-full animate-pulse",
|
||||
session.status === 'IN_PROGRESS' ? "bg-green-500" : "bg-blue-500"
|
||||
)} />
|
||||
<span className="text-xs font-bold text-slate-600 uppercase tracking-wider">
|
||||
{session.status === 'IN_PROGRESS' ? t('inProgress') : t('statusReadyFragment')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
setSession(null);
|
||||
setState(null);
|
||||
setSelectedGroup(null);
|
||||
}}
|
||||
className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all"
|
||||
title={t('newChat')}
|
||||
>
|
||||
<RefreshCcw size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderSetup = () => (
|
||||
<div className="flex-1 flex bg-[#F8FAFC] overflow-hidden">
|
||||
{/* Main Setup Content */}
|
||||
<div className="flex-1 overflow-y-auto p-8 flex flex-col items-center justify-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-xl w-full"
|
||||
>
|
||||
<div className="bg-white rounded-3xl shadow-xl shadow-slate-200/50 border border-slate-100 p-8">
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-20 h-20 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-inner">
|
||||
<Brain size={40} />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-slate-900 mb-2">{t('readyForAssessment')}</h3>
|
||||
<p className="text-slate-500 font-medium">{t('readyForAssessmentDesc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-slate-700 mb-2 ml-1">
|
||||
{t('assessmentTemplates')}
|
||||
</label>
|
||||
<div className="grid grid-cols-1 gap-2 max-h-48 overflow-y-auto pr-2 custom-scrollbar">
|
||||
{templates.map(template => (
|
||||
<button
|
||||
key={template.id}
|
||||
onClick={() => setSelectedTemplate(template.id)}
|
||||
className={cn(
|
||||
"w-full text-left px-4 py-3 rounded-xl border-2 transition-all flex items-center justify-between",
|
||||
selectedTemplate === template.id
|
||||
? "border-indigo-600 bg-indigo-50/50 text-indigo-700 shadow-sm"
|
||||
: "border-slate-100 hover:border-slate-200 text-slate-500 hover:bg-slate-50"
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-bold truncate max-w-[240px]">{template.name}</span>
|
||||
<span className="text-[10px] opacity-40 font-mono mt-0.5 mb-1">{template.id}</span>
|
||||
<span className="text-[10px] opacity-60 font-medium">
|
||||
{template.questionCount} {t('questionsCountLabel')} • {
|
||||
template.difficultyDistribution
|
||||
? (typeof template.difficultyDistribution === 'object'
|
||||
? Object.entries(template.difficultyDistribution).map(([k, v]) => `${k}:${v}`).join(', ')
|
||||
: String(template.difficultyDistribution))
|
||||
: ''
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
{selectedTemplate === template.id && <div className="w-1.5 h-1.5 bg-indigo-600 rounded-full" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleStartAssessment}
|
||||
disabled={!selectedTemplate || isLoading}
|
||||
className={cn(
|
||||
"w-full py-4 rounded-2xl font-black text-white transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg flex items-center justify-center gap-3",
|
||||
!selectedTemplate || isLoading
|
||||
? "bg-slate-300 shadow-none cursor-not-allowed"
|
||||
: "bg-indigo-600 hover:bg-indigo-700 shadow-indigo-200"
|
||||
)}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={20} className="animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<ClipboardCheck size={20} />
|
||||
<span>{t('startProfessionalEvaluation')}</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 p-4 bg-rose-50 border border-rose-100 rounded-2xl flex items-start gap-3 animate-shake">
|
||||
<AlertCircle size={20} className="text-rose-500 shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-bold text-rose-700">{error}</p>
|
||||
<button
|
||||
onClick={handleRetry}
|
||||
className="mt-1 text-xs font-bold text-rose-600 hover:text-rose-800 underline flex items-center gap-1"
|
||||
>
|
||||
<RefreshCcw size={12} />
|
||||
{t('retry')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex gap-4 justify-center">
|
||||
<div className="flex items-center gap-2 text-[13px] font-bold text-slate-400 uppercase tracking-widest">
|
||||
<CheckCircle size={14} className="text-emerald-500" />
|
||||
{t('aiPoweredAnalysis')}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-[13px] font-bold text-slate-400 uppercase tracking-widest">
|
||||
<CheckCircle size={14} className="text-emerald-500" />
|
||||
{t('masteryScoring')}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Assessment History Sidebar */}
|
||||
{history.length > 0 && (
|
||||
<div className="w-80 flex-none bg-white p-6 overflow-y-auto hidden lg:flex flex-col border-l border-slate-200/60 shadow-[4px_0_24px_rgba(0,0,0,0.02)]">
|
||||
<h3 className="text-sm font-black text-slate-900 mb-6 flex items-center gap-2 uppercase tracking-widest">
|
||||
<History size={18} className="text-indigo-600" />
|
||||
{t('recentAssessments')}
|
||||
</h3>
|
||||
<div className="space-y-3 custom-scrollbar">
|
||||
{history.map(hist => (
|
||||
<div
|
||||
key={hist.id}
|
||||
className="w-full text-left p-4 rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-between group"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-bold text-slate-800 truncate max-w-[180px]">
|
||||
{hist.knowledgeBase?.name || hist.knowledgeGroup?.name || t('assessmentTitle')}
|
||||
</span>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-[10px] font-black text-indigo-400 px-1.5 py-0.5 bg-indigo-50 rounded">
|
||||
{hist.finalScore !== null && hist.finalScore !== undefined ? `${Math.round(hist.finalScore * 10) / 10}/10` : t('inProgress')}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">
|
||||
{new Date(hist.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleDeleteHistory(e, hist.id)}
|
||||
className="w-8 h-8 rounded-full bg-white border border-slate-100 flex items-center justify-center text-slate-400 hover:text-rose-600 hover:border-rose-100 transition-all opacity-0 group-hover:opacity-100"
|
||||
title={t('delete')}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => !isLoading && handleSelectHistory(hist)}
|
||||
disabled={isLoading}
|
||||
className={cn(
|
||||
"w-8 h-8 rounded-full bg-white border border-slate-100 flex items-center justify-center transition-all shrink-0",
|
||||
isLoading ? "opacity-50 cursor-not-allowed" : "hover:bg-indigo-600 hover:text-white"
|
||||
)}
|
||||
title={t('view')}
|
||||
>
|
||||
{loadingHistoryId === hist.id ? (
|
||||
<Loader2 size={14} className="animate-spin text-indigo-600 group-hover:text-white" />
|
||||
) : (
|
||||
<FileText size={14} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderAssessment = () => {
|
||||
const currentIndex = state?.currentQuestionIndex || 0;
|
||||
const totalQuestions = state?.questions?.length || 0;
|
||||
// 如果currentIndex已达到或超过题目数量，说明已完成
|
||||
const displayNo = currentIndex >= totalQuestions ? totalQuestions : currentIndex + 1;
|
||||
console.log('[AssessmentView] Counter:', { displayNo, totalQuestions, currentIndex });
|
||||
const progressLabel = totalQuestions > 0
|
||||
? t('questionProgress', displayNo, totalQuestions)
|
||||
: t('initializingQuestion', displayNo);
|
||||
|
||||
const messages = state?.messages || [];
|
||||
const filteredMessages = messages.filter(m =>
|
||||
m.role !== 'system' &&
|
||||
!(m.role === 'assistant' && (m.content?.toString().startsWith('Score:') || m.content?.toString().startsWith('得分:')))
|
||||
);
|
||||
|
||||
const feedbackHistory = state?.feedbackHistory || [];
|
||||
const lastFeedbackMessage = feedbackHistory[feedbackHistory.length - 1];
|
||||
|
||||
const feedbackMatch = lastFeedbackMessage?.content?.toString().match(/(?:Score|得分): (\d+)\/10\n\n(?:Feedback|反馈): ([\s\S]*)/i);
|
||||
const latestScore = feedbackMatch ? feedbackMatch[1] : null;
|
||||
const latestFeedback = feedbackMatch ? feedbackMatch[2] : (lastFeedbackMessage?.content || null);
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex bg-[#F8FAFC] overflow-hidden">
|
||||
{/* Left: Chat Area */}
|
||||
<div className="flex-1 flex flex-col border-r border-slate-200/60 transition-all duration-500">
|
||||
<div className="flex-none px-6 py-3 bg-white/50 border-b border-slate-100 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-full uppercase tracking-wider">
|
||||
{progressLabel}
|
||||
</span>
|
||||
{isLoading && (
|
||||
<span className="text-[10px] font-bold text-slate-400 animate-pulse flex items-center gap-1.5 uppercase tracking-widest">
|
||||
<div className="w-1 h-1 bg-indigo-400 rounded-full animate-bounce" />
|
||||
{processStep || t('aiIsProcessing')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-8 custom-scrollbar">
|
||||
<div className="max-w-3xl mx-auto space-y-8">
|
||||
{filteredMessages.map((msg, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, x: msg.role === 'user' ? 20 : -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
className={cn(
|
||||
"flex flex-col max-w-[85%]",
|
||||
msg.role === 'user' ? "ml-auto items-end" : "mr-auto items-start"
|
||||
)}
|
||||
>
|
||||
<div className={cn(
|
||||
"px-5 py-4 rounded-2xl shadow-sm text-[15px] leading-relaxed",
|
||||
msg.role === 'user'
|
||||
? "bg-indigo-600 text-white rounded-tr-none"
|
||||
: "bg-white text-slate-800 border border-slate-100 rounded-tl-none"
|
||||
)}>
|
||||
{msg.content}
|
||||
</div>
|
||||
<span className="mt-1.5 text-[10px] items-center uppercase tracking-widest font-bold text-slate-400">
|
||||
{new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex items-start mr-auto max-w-[85%]">
|
||||
<div className="px-5 py-4 bg-white border border-slate-100 rounded-2xl rounded-tl-none shadow-sm">
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:-0.3s]" />
|
||||
<div className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:-0.15s]" />
|
||||
<div className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-white border-t border-slate-200/60 shadow-[0_-4px_20px_-10px_rgba(0,0,0,0.05)]">
|
||||
<div className="max-w-3xl mx-auto flex items-end gap-3">
|
||||
<textarea
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSubmitAnswer();
|
||||
}
|
||||
}}
|
||||
placeholder={t('typeAnswerPlaceholder')}
|
||||
className="flex-1 max-h-32 p-4 bg-slate-50 border-none rounded-2xl focus:bg-white focus:ring-2 focus:ring-indigo-500/20 text-sm font-medium resize-none transition-all placeholder:text-slate-400 outline-none shadow-inner"
|
||||
rows={1}
|
||||
/>
|
||||
<button
|
||||
onClick={handleSubmitAnswer}
|
||||
disabled={!inputValue.trim() || isLoading}
|
||||
className={cn(
|
||||
"w-14 h-14 flex items-center justify-center rounded-2xl transition-all shadow-lg",
|
||||
!inputValue.trim() || isLoading
|
||||
? "bg-slate-100 text-slate-400 shadow-none"
|
||||
: "bg-indigo-600 text-white hover:bg-indigo-700 shadow-indigo-200 active:scale-95"
|
||||
)}
|
||||
>
|
||||
<Send size={22} className={isLoading ? "animate-pulse" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Feedback Panel */}
|
||||
<div className="w-80 flex-none bg-white p-6 overflow-y-auto hidden lg:flex flex-col border-l border-slate-100">
|
||||
<h3 className="text-sm font-black text-slate-900 mb-6 flex items-center gap-2 uppercase tracking-widest">
|
||||
<ClipboardCheck size={18} className="text-indigo-600" />
|
||||
{t('liveFeedback')}
|
||||
</h3>
|
||||
|
||||
{latestScore ? (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-indigo-50/50 rounded-3xl p-6 text-center border border-indigo-100">
|
||||
<span className="text-[10px] font-black text-indigo-400 uppercase tracking-[0.2em] mb-2 block">{t('currentScore')}</span>
|
||||
<div className="text-5xl font-black text-indigo-600">{latestScore}<span className="text-xl opacity-40">/10</span></div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
|
||||
<History size={14} />
|
||||
{t('aiExplanation')}
|
||||
</h4>
|
||||
<div className="text-sm text-slate-600 leading-relaxed font-medium bg-slate-50 rounded-2xl p-5 border border-slate-100">
|
||||
{latestFeedback}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-emerald-50 rounded-2xl p-4 border border-emerald-100 flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-emerald-500 text-white rounded-lg flex items-center justify-center shrink-0">
|
||||
<Star size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-black text-emerald-800">{t('masteryProgress')}</div>
|
||||
<div className="text-[10px] text-emerald-600 font-bold opacity-80">{t('trackedInRealTime')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 flex flex-col items-center justify-center text-center opacity-40 space-y-4">
|
||||
<div className="w-16 h-16 bg-slate-100 rounded-2xl flex items-center justify-center">
|
||||
<History size={32} className="text-slate-400" />
|
||||
</div>
|
||||
<div className="text-xs font-bold text-slate-500">
|
||||
{t('submitAnswerToSeeFeedback')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state?.questions && state.questions[state.currentQuestionIndex] && (
|
||||
<div className="mt-6 pt-6 border-t border-slate-100">
|
||||
<h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<ClipboardCheck size={14} />
|
||||
{t('questionBasis')}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowBasis(!showBasis)}
|
||||
className="text-indigo-600 hover:text-indigo-800 lowercase tracking-normal font-bold"
|
||||
>
|
||||
{showBasis ? t('hideBasis') : t('viewBasis')}
|
||||
</button>
|
||||
</h4>
|
||||
|
||||
<AnimatePresence>
|
||||
{showBasis && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="text-sm text-slate-600 leading-relaxed font-medium bg-indigo-50/30 rounded-2xl p-4 border border-indigo-100/50">
|
||||
{state.questions[state.currentQuestionIndex].basis || "No basis provided."}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-auto pt-6 border-t border-slate-100">
|
||||
<div className="bg-amber-50 rounded-2xl p-4 border border-amber-100 flex items-start gap-3">
|
||||
<AlertCircle size={16} className="text-amber-500 mt-0.5 shrink-0" />
|
||||
<div className="text-[11px] text-amber-800 font-medium leading-relaxed">
|
||||
<strong>{t('assessmentGuide')}</strong> {t('assessmentGuideDesc')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderCompletion = () => (
|
||||
<div className="flex-1 overflow-y-auto bg-[#F8FAFC] p-8 custom-scrollbar">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="max-w-4xl mx-auto space-y-8"
|
||||
>
|
||||
<div className="bg-white rounded-[40px] shadow-2xl shadow-indigo-100/50 border border-slate-100 overflow-hidden">
|
||||
<div className="bg-indigo-600 p-10 text-white relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32 blur-3xl" />
|
||||
<div className="relative z-10 flex flex-col items-center text-center">
|
||||
<div className="w-20 h-20 bg-white/20 backdrop-blur-md rounded-3xl flex items-center justify-center mb-6 border border-white/30 shadow-2xl">
|
||||
<Trophy size={40} className="text-yellow-300" />
|
||||
</div>
|
||||
<h3 className="text-4xl font-black mb-2 tracking-tight">{t('level')} {state?.report?.match(/LEVEL:\s*(\w+)/i)?.[1] || 'Pending'}</h3>
|
||||
<p className="text-indigo-100 font-bold uppercase tracking-[0.2em] text-sm opacity-80">{t('assessmentResultsAvailable')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 -mt-20 relative z-20 mb-12">
|
||||
<div className="bg-white p-6 rounded-3xl shadow-xl shadow-slate-200/50 border border-slate-100 flex flex-col items-center text-center group transition-all hover:-translate-y-1">
|
||||
<div className="w-12 h-12 bg-amber-50 text-amber-600 rounded-xl flex items-center justify-center mb-3">
|
||||
<Star size={24} />
|
||||
</div>
|
||||
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{t('knowledgeCoverage')}</span>
|
||||
<span className="text-2xl font-black text-slate-900">
|
||||
{state?.questions && state.questions.length > 0
|
||||
? `${Math.round((Object.keys(state.scores || {}).length / state.questions.length) * 100)}%`
|
||||
: '0%'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-3xl shadow-xl shadow-slate-200/50 border border-slate-100 flex flex-col items-center text-center group transition-all hover:-translate-y-1">
|
||||
<div className="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center mb-3">
|
||||
<Award size={24} />
|
||||
</div>
|
||||
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{t('precisionScore')}</span>
|
||||
<span className="text-2xl font-black text-slate-900">
|
||||
{state?.finalScore !== undefined ? (Math.round(state.finalScore * 10) / 10) : '0'}/10
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-3xl shadow-xl shadow-slate-200/50 border border-slate-100 flex flex-col items-center text-center group transition-all hover:-translate-y-1">
|
||||
<div className="w-12 h-12 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center mb-3">
|
||||
<CheckCircle size={24} />
|
||||
</div>
|
||||
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{t('status')}</span>
|
||||
<span className={cn(
|
||||
"text-2xl font-black uppercase tracking-tighter",
|
||||
(state?.finalScore || 0) >= 6 ? "text-emerald-600" : "text-rose-600"
|
||||
)}>
|
||||
{(state?.finalScore || 0) >= 6 ? t('verified') : t('fail')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h4 className="flex items-center gap-2.5 text-lg font-black text-slate-900 mb-4">
|
||||
<FileText size={20} className="text-indigo-600" />
|
||||
{t('comprehensiveMasteryReport')}
|
||||
</h4>
|
||||
<div className="bg-slate-50 border border-slate-100 rounded-3xl p-8 text-slate-800 leading-relaxed font-medium assessment-report overflow-hidden whitespace-pre-wrap">
|
||||
{state?.report}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSession(null);
|
||||
setState(null);
|
||||
}}
|
||||
className="flex-1 py-4 bg-indigo-600 text-white rounded-2xl font-black shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition-all active:scale-[0.98]"
|
||||
>
|
||||
{t('newAssessmentSession')}
|
||||
</button>
|
||||
<button
|
||||
className="px-8 py-4 bg-white border-2 border-slate-100 text-slate-700 rounded-2xl font-bold hover:bg-slate-50 transition-all active:scale-[0.98]"
|
||||
>
|
||||
{t('downloadPdfReport')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-white animate-in flex-1">
|
||||
{renderHeader()}
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="absolute top-20 left-1/2 -translate-x-1/2 z-50 min-w-[320px] max-w-lg"
|
||||
>
|
||||
<div className="mx-6 p-4 bg-red-50 border border-red-100 rounded-2xl flex items-center gap-3 shadow-xl">
|
||||
<AlertCircle size={20} className="text-red-500 shrink-0" />
|
||||
<p className="text-sm font-bold text-red-800 pr-2">{error}</p>
|
||||
<button
|
||||
onClick={() => setError(null)}
|
||||
className="ml-auto p-1.5 text-red-400 hover:text-red-500 rounded-lg transition-colors"
|
||||
>
|
||||
<AlertCircle size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{!session && renderSetup()}
|
||||
{session && session.status === 'IN_PROGRESS' && renderAssessment()}
|
||||
{session && session.status === 'COMPLETED' && renderCompletion()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,459 @@
|
||||
import React, { useCallback, useEffect, useState, useRef } from 'react'
|
||||
import ChatInterface from '../../components/ChatInterface'
|
||||
import IndexingModalWithMode from '../../components/IndexingModalWithMode'
|
||||
import { GroupManager } from '../../components/GroupManager'
|
||||
import { GroupSelector } from '../../components/GroupSelector'
|
||||
import { SearchHistoryList } from '../../components/SearchHistoryList'
|
||||
import { HistoryDrawer } from '../../components/HistoryDrawer'
|
||||
import { GroupSelectionDrawer } from '../../components/GroupSelectionDrawer'
|
||||
import { PDFPreview } from '../../components/PDFPreview'
|
||||
import { SourcePreviewDrawer } from '../../components/SourcePreviewDrawer'
|
||||
import { ChatSource } from '../../services/chatService'
|
||||
import {
|
||||
AppSettings,
|
||||
DEFAULT_MODELS,
|
||||
DEFAULT_SETTINGS,
|
||||
IndexingConfig,
|
||||
KnowledgeFile,
|
||||
ModelConfig,
|
||||
ModelType,
|
||||
RawFile,
|
||||
KnowledgeGroup,
|
||||
} from '../../types'
|
||||
import { readFile, formatBytes } from '../../utils/fileUtils'
|
||||
import { isFormatSupportedForPreview } from '../../constants/fileSupport'
|
||||
import { Key, LogOut, Menu, Users, X, Folder, History, Plus, Sparkles, Settings } from 'lucide-react'
|
||||
import { useLanguage } from '../../contexts/LanguageContext'
|
||||
import { useToast } from '../../contexts/ToastContext'
|
||||
import { modelConfigService } from '../../services/modelConfigService'
|
||||
import { userSettingService } from '../../services/userSettingService'
|
||||
import { uploadService } from '../../services/uploadService'
|
||||
import { knowledgeBaseService } from '../../services/knowledgeBaseService'
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService'
|
||||
import { searchHistoryService } from '../../services/searchHistoryService'
|
||||
import { userService } from '../../services/userService'
|
||||
|
||||
interface ChatViewProps {
|
||||
authToken: string;
|
||||
onLogout: () => void;
|
||||
modelConfigs?: ModelConfig[]; // Optional to allow backward compat while refactoring
|
||||
onNavigate: (view: any) => void;
|
||||
initialChatContext?: { selectedGroups?: string[], selectedFiles?: string[] } | null;
|
||||
onClearContext?: () => void;
|
||||
isAdmin?: boolean;
|
||||
}
|
||||
|
||||
export const ChatView: React.FC<ChatViewProps> = ({
|
||||
authToken,
|
||||
onLogout,
|
||||
modelConfigs = DEFAULT_MODELS,
|
||||
onNavigate,
|
||||
initialChatContext,
|
||||
onClearContext,
|
||||
isAdmin = false
|
||||
}) => {
|
||||
const { showError, showWarning } = useToast()
|
||||
|
||||
const [files, setFiles] = useState<KnowledgeFile[]>([])
|
||||
const [groups, setGroups] = useState<KnowledgeGroup[]>([])
|
||||
const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS)
|
||||
const [isLoadingSettings, setIsLoadingSettings] = useState(true)
|
||||
|
||||
const [isGroupManagerOpen, setIsGroupManagerOpen] = useState(false)
|
||||
const [isHistoryOpen, setIsHistoryOpen] = useState(false)
|
||||
const [isGroupSelectionOpen, setIsGroupSelectionOpen] = useState(false) // New state
|
||||
const [currentHistoryId, setCurrentHistoryId] = useState<string | undefined>()
|
||||
const [historyMessages, setHistoryMessages] = useState<any[] | null>(null)
|
||||
const [selectedGroups, setSelectedGroups] = useState<string[]>([])
|
||||
const [selectedFiles, setSelectedFiles] = useState<string[]>([])
|
||||
const [pdfPreview, setPdfPreview] = useState<{ fileId: string; fileName: string } | null>(null)
|
||||
const [previewSource, setPreviewSource] = useState<ChatSource | null>(null)
|
||||
|
||||
const [isIndexingModalOpen, setIsIndexingModalOpen] = useState(false)
|
||||
const [pendingFiles, setPendingFiles] = useState<RawFile[]>([])
|
||||
|
||||
// Modals state removed as they are moved to Settings
|
||||
const [isLanguageLoading, setIsLanguageLoading] = useState(false)
|
||||
|
||||
const { t, language, setLanguage } = useLanguage()
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
|
||||
const handleNewChat = () => {
|
||||
const currentLanguage = language
|
||||
localStorage.removeItem('chatHistory')
|
||||
localStorage.removeItem('chatMessages')
|
||||
localStorage.removeItem('chatSources')
|
||||
localStorage.setItem('userLanguage', currentLanguage)
|
||||
setCurrentHistoryId(undefined)
|
||||
setHistoryMessages(null)
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
// Function to fetch user settings from backend
|
||||
const fetchAndSetSettings = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
const [personalSettings, tenantSettings] = await Promise.all([
|
||||
userSettingService.getPersonal(authToken).catch(() => null),
|
||||
userSettingService.get(authToken).catch(() => ({} as Partial<AppSettings>))
|
||||
]);
|
||||
|
||||
const appSettings: AppSettings = {
|
||||
...DEFAULT_SETTINGS,
|
||||
...tenantSettings,
|
||||
language: personalSettings?.language || tenantSettings?.language || DEFAULT_SETTINGS.language,
|
||||
};
|
||||
setSettings(appSettings)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch settings:', error)
|
||||
setSettings(DEFAULT_SETTINGS)
|
||||
} finally {
|
||||
setIsLoadingSettings(false)
|
||||
}
|
||||
}, [authToken])
|
||||
|
||||
const fetchAndSetFiles = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
const data = await knowledgeBaseService.getAll(authToken)
|
||||
setFiles(data.items)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch files:', error)
|
||||
}
|
||||
}, [authToken])
|
||||
|
||||
// Function to fetch groups from backend
|
||||
const fetchAndSetGroups = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
const remoteGroups = await knowledgeGroupService.getGroups()
|
||||
setGroups(remoteGroups)
|
||||
|
||||
// Filter out selected groups that no longer exist
|
||||
setSelectedGroups(prev => {
|
||||
const validGroupIds = new Set(remoteGroups.map(g => g.id))
|
||||
return prev.filter(id => validGroupIds.has(id))
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch groups:', error)
|
||||
}
|
||||
}, [authToken])
|
||||
|
||||
useEffect(() => {
|
||||
if (authToken) {
|
||||
fetchAndSetSettings()
|
||||
fetchAndSetFiles()
|
||||
fetchAndSetGroups()
|
||||
}
|
||||
}, [authToken, fetchAndSetSettings, fetchAndSetFiles, fetchAndSetGroups])
|
||||
|
||||
// Handle Initial Context
|
||||
useEffect(() => {
|
||||
if (initialChatContext) {
|
||||
if (initialChatContext.selectedGroups) {
|
||||
setSelectedGroups(initialChatContext.selectedGroups)
|
||||
}
|
||||
if (initialChatContext.selectedFiles) {
|
||||
setSelectedFiles(initialChatContext.selectedFiles)
|
||||
}
|
||||
}
|
||||
}, [initialChatContext])
|
||||
|
||||
// Load chat history from localStorage on mount
|
||||
useEffect(() => {
|
||||
const savedHistory = localStorage.getItem('chatMessages');
|
||||
if (savedHistory) {
|
||||
try {
|
||||
const parsedHistory = JSON.parse(savedHistory);
|
||||
if (Array.isArray(parsedHistory) && parsedHistory.length > 0) {
|
||||
setHistoryMessages(parsedHistory);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to parse saved chat history:', error);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleFileUpload = async (fileList: FileList) => {
|
||||
if (!authToken) {
|
||||
showWarning(t('loginToUpload'))
|
||||
return
|
||||
}
|
||||
|
||||
const MAX_FILE_SIZE = 104857600
|
||||
const MAX_SIZE_MB = 100
|
||||
const rawFiles: RawFile[] = []
|
||||
const errors: string[] = []
|
||||
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
const file = fileList[i]
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
errors.push(t('fileSizeLimitExceeded').replace('$1', file.name).replace('$2', formatBytes(file.size)).replace('$3', MAX_SIZE_MB.toString()))
|
||||
continue
|
||||
}
|
||||
|
||||
const allowedTypes = [
|
||||
'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
|
||||
'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.spreadsheet',
|
||||
'application/vnd.oasis.opendocument.presentation', 'application/vnd.oasis.opendocument.graphics',
|
||||
'text/plain', 'text/markdown', 'text/html', 'text/csv', 'text/xml', 'application/xml', 'application/json',
|
||||
'text/x-python', 'text/x-java', 'text/x-c', 'text/x-c++', 'text/javascript', 'text/typescript',
|
||||
'image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/tiff', 'image/bmp', 'image/svg+xml',
|
||||
'application/zip', 'application/x-tar', 'application/gzip', 'application/x-7z-compressed',
|
||||
'application/rtf', 'application/epub+zip', 'application/x-mobipocket-ebook',
|
||||
]
|
||||
|
||||
const ext = file.name.toLowerCase().split('.').pop()
|
||||
const allowedExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'md', 'html', 'csv', 'rtf', 'odt', 'ods', 'odp', 'json', 'xml']
|
||||
|
||||
const isAllowed = allowedTypes.includes(file.type) ||
|
||||
file.type.startsWith('text/') ||
|
||||
file.type.startsWith('application/vnd.') ||
|
||||
file.type.startsWith('application/x-') ||
|
||||
file.type === '' ||
|
||||
allowedExtensions.includes(ext || '')
|
||||
|
||||
if (!isAllowed) {
|
||||
errors.push(t('unsupportedFileType').replace('$1', file.name).replace('$2', file.type || 'unknown'))
|
||||
continue
|
||||
}
|
||||
|
||||
try {
|
||||
const rawFile = await readFile(file)
|
||||
rawFiles.push(rawFile)
|
||||
} catch (error) {
|
||||
console.error(`Error reading file ${file.name}:`, error)
|
||||
errors.push(t('readFailed').replace('$1', file.name))
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
showError(`${t('uploadErrors')}:\n${errors.join('\n')}`)
|
||||
}
|
||||
|
||||
if (rawFiles.length === 0) return
|
||||
|
||||
if (errors.length > 0 && rawFiles.length > 0) {
|
||||
showWarning(t('uploadWarning').replace('$1', rawFiles.length.toString()).replace('$2', errors.length.toString()))
|
||||
}
|
||||
|
||||
setPendingFiles(rawFiles);
|
||||
setIsIndexingModalOpen(true);
|
||||
}
|
||||
|
||||
const handleConfirmIndexing = async (config: IndexingConfig) => {
|
||||
if (!authToken) return
|
||||
let hasSuccess = false
|
||||
for (const rawFile of pendingFiles) {
|
||||
try {
|
||||
await uploadService.uploadFileWithConfig(rawFile.file, config, authToken)
|
||||
hasSuccess = true
|
||||
} catch (error) {
|
||||
console.error(`Error uploading file ${rawFile.name}:`, error)
|
||||
showError(t('uploadFailed').replace('$1', rawFile.name).replace('$2', error.message))
|
||||
}
|
||||
}
|
||||
if (hasSuccess) {
|
||||
await fetchAndSetFiles()
|
||||
}
|
||||
setPendingFiles([])
|
||||
setIsIndexingModalOpen(false)
|
||||
}
|
||||
|
||||
const handleCancelIndexing = () => {
|
||||
setPendingFiles([])
|
||||
setIsIndexingModalOpen(false)
|
||||
}
|
||||
|
||||
const handleGroupsChange = (newGroups: KnowledgeGroup[]) => {
|
||||
setGroups(newGroups)
|
||||
}
|
||||
|
||||
const handleSelectHistory = async (historyId: string) => {
|
||||
try {
|
||||
const historyDetail = await searchHistoryService.getHistoryDetail(historyId)
|
||||
setCurrentHistoryId(historyId)
|
||||
setIsHistoryOpen(false)
|
||||
setHistoryMessages(historyDetail.messages)
|
||||
} catch (error) {
|
||||
console.error('Failed to load history detail:', error)
|
||||
showError(t('loadHistoryFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
const handleShowHistory = () => {
|
||||
setIsHistoryOpen(true)
|
||||
}
|
||||
|
||||
const handleInputFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
handleFileUpload(e.target.files)
|
||||
}
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoadingSettings) {
|
||||
return (
|
||||
<div className='flex items-center justify-center min-h-screen bg-slate-50 w-full'>
|
||||
<div className='text-blue-600 animate-spin rounded-full h-12 w-12 border-4 border-t-4 border-blue-300'></div>
|
||||
<p className='ml-4 text-slate-700'>{t('loadingUserData')}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex h-full w-full bg-transparent overflow-hidden relative'>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleInputFileChange}
|
||||
multiple
|
||||
className="hidden"
|
||||
accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.md,.html,.csv,.rtf,.odt,.ods,.odp,.json,.js,.jsx,.ts,.tsx,.css,.xml,image/*"
|
||||
/>
|
||||
{/* Main Content */}
|
||||
<div className='flex-1 flex flex-col h-full w-full relative overflow-hidden'>
|
||||
{/* Header */}
|
||||
<div className="px-8 pt-8 pb-4 flex items-start justify-between shrink-0 z-20">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 leading-tight">
|
||||
{t('chatTitle')}
|
||||
</h1>
|
||||
<p className="text-[15px] text-slate-500 mt-1">{t('chatDesc')}</p>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-3 flex-shrink-0'>
|
||||
{/* History button */}
|
||||
<button
|
||||
onClick={handleShowHistory}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 text-slate-700 hover:text-blue-600 hover:bg-slate-50 rounded-lg font-semibold text-sm transition-all shadow-sm"
|
||||
>
|
||||
<History size={18} />
|
||||
{t('viewHistory')}
|
||||
</button>
|
||||
|
||||
{/* New chat button */}
|
||||
<button
|
||||
onClick={handleNewChat}
|
||||
className="flex items-center gap-2 px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-sm shadow-blue-100 transition-all font-semibold text-sm active:scale-95"
|
||||
>
|
||||
<Plus size={18} />
|
||||
{t('newChat')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex-1 overflow-hidden'>
|
||||
<ChatInterface
|
||||
files={files}
|
||||
settings={settings}
|
||||
models={modelConfigs}
|
||||
groups={groups}
|
||||
selectedGroups={selectedGroups}
|
||||
onGroupSelectionChange={setSelectedGroups}
|
||||
onOpenGroupSelection={() => setIsGroupSelectionOpen(true)} // Pass handler
|
||||
selectedFiles={selectedFiles}
|
||||
onClearFileSelection={() => setSelectedFiles([])}
|
||||
onMobileUploadClick={() => {
|
||||
fileInputRef.current?.click()
|
||||
}}
|
||||
currentHistoryId={currentHistoryId}
|
||||
historyMessages={historyMessages}
|
||||
onHistoryMessagesLoaded={() => setHistoryMessages(null)}
|
||||
onHistoryIdCreated={setCurrentHistoryId}
|
||||
onPreviewSource={setPreviewSource}
|
||||
authToken={authToken}
|
||||
onOpenFile={(source) => {
|
||||
if (source.fileId) {
|
||||
if (isFormatSupportedForPreview(source.fileName)) {
|
||||
setPdfPreview({ fileId: source.fileId, fileName: source.fileName });
|
||||
} else {
|
||||
showWarning(t('previewNotSupported'));
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
|
||||
<IndexingModalWithMode
|
||||
isOpen={isIndexingModalOpen}
|
||||
onClose={handleCancelIndexing}
|
||||
files={pendingFiles}
|
||||
embeddingModels={modelConfigs.filter(m => m.type === ModelType.EMBEDDING)}
|
||||
defaultEmbeddingId={settings.selectedEmbeddingId}
|
||||
onConfirm={handleConfirmIndexing}
|
||||
/>
|
||||
|
||||
{/* Group Selection Drawer */}
|
||||
<GroupSelectionDrawer
|
||||
isOpen={isGroupSelectionOpen}
|
||||
onClose={() => setIsGroupSelectionOpen(false)}
|
||||
groups={groups}
|
||||
selectedGroups={selectedGroups}
|
||||
onSelectionChange={setSelectedGroups}
|
||||
/>
|
||||
|
||||
{/* Knowledge base enhancement features modal (Legacy) */}
|
||||
{isGroupManagerOpen && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-semibold">{t('notebooks')}</h2>
|
||||
<button
|
||||
onClick={() => setIsGroupManagerOpen(false)}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<GroupManager
|
||||
groups={groups}
|
||||
onGroupsChange={handleGroupsChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<HistoryDrawer
|
||||
isOpen={isHistoryOpen}
|
||||
onClose={() => setIsHistoryOpen(false)}
|
||||
groups={groups}
|
||||
onSelectHistory={handleSelectHistory}
|
||||
/>
|
||||
|
||||
{pdfPreview && (
|
||||
<PDFPreview
|
||||
fileId={pdfPreview.fileId}
|
||||
fileName={pdfPreview.fileName}
|
||||
authToken={authToken}
|
||||
onClose={() => setPdfPreview(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<SourcePreviewDrawer
|
||||
isOpen={!!previewSource}
|
||||
onClose={() => setPreviewSource(null)}
|
||||
source={previewSource}
|
||||
onOpenFile={(source) => {
|
||||
if (source.fileId) {
|
||||
if (isFormatSupportedForPreview(source.fileName)) {
|
||||
setPdfPreview({ fileId: source.fileId, fileName: source.fileName });
|
||||
} else {
|
||||
showWarning(t('previewNotSupported'));
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,952 @@
|
||||
import React, { useCallback, useEffect, useState, useMemo } from 'react'
|
||||
import IndexingModalWithMode from '../../components/IndexingModalWithMode'
|
||||
import { PDFPreview } from '../../components/PDFPreview'
|
||||
import { DragDropUpload } from '../../components/DragDropUpload'
|
||||
import { GlobalDragDropOverlay } from '../../components/GlobalDragDropOverlay'
|
||||
import {
|
||||
AppSettings,
|
||||
DEFAULT_MODELS,
|
||||
DEFAULT_SETTINGS,
|
||||
IndexingConfig,
|
||||
KnowledgeFile,
|
||||
ModelConfig,
|
||||
ModelType,
|
||||
RawFile,
|
||||
KnowledgeGroup,
|
||||
} from '../../types'
|
||||
import { readFile, formatBytes } from '../../utils/fileUtils'
|
||||
import { useLanguage } from '../../contexts/LanguageContext'
|
||||
import { useToast } from '../../contexts/ToastContext'
|
||||
import { userSettingService } from '../../services/userSettingService'
|
||||
import { uploadService } from '../../services/uploadService'
|
||||
import { knowledgeBaseService } from '../../services/knowledgeBaseService'
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService'
|
||||
import { useConfirm } from '../../contexts/ConfirmContext'
|
||||
import { ChunkInfoDrawer } from '../../components/ChunkInfoDrawer'
|
||||
import {
|
||||
Search,
|
||||
Plus,
|
||||
FileText,
|
||||
Image as ImageIcon,
|
||||
FileType,
|
||||
CheckCircle2,
|
||||
CircleDashed,
|
||||
RefreshCw,
|
||||
Eye,
|
||||
Trash2,
|
||||
Settings,
|
||||
Folder,
|
||||
Hash,
|
||||
Tag,
|
||||
Layers,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
FolderInput,
|
||||
Box,
|
||||
} from 'lucide-react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { KB_ALLOWED_EXTENSIONS, IMAGE_MIME_TYPES, isExtensionAllowed, isFormatSupportedForPreview } from '../../constants/fileSupport'
|
||||
import { ImportFolderDrawer } from '../../components/ImportFolderDrawer'
|
||||
import { ImportTasksDrawer } from '../../components/drawers/ImportTasksDrawer'
|
||||
|
||||
interface KnowledgeBaseViewProps {
|
||||
authToken: string;
|
||||
onLogout: () => void;
|
||||
modelConfigs?: ModelConfig[];
|
||||
onNavigate: (view: any) => void;
|
||||
isAdmin?: boolean;
|
||||
}
|
||||
|
||||
/** Flatten a tree of groups into a flat list (for file counts, filtering, etc.) */
|
||||
function flattenGroups(groups: KnowledgeGroup[]): (KnowledgeGroup & { depth?: number })[] {
|
||||
const result: (KnowledgeGroup & { depth?: number })[] = [];
|
||||
function walk(items: KnowledgeGroup[], depth = 0) {
|
||||
for (const g of items) {
|
||||
result.push({ ...g, depth });
|
||||
if (g.children?.length) walk(g.children, depth + 1);
|
||||
}
|
||||
}
|
||||
walk(groups);
|
||||
return result;
|
||||
}
|
||||
|
||||
/** Recursively collect all descendant group IDs (including self) */
|
||||
function collectGroupIds(group: KnowledgeGroup): string[] {
|
||||
const ids = [group.id];
|
||||
if (group.children?.length) {
|
||||
for (const child of group.children) {
|
||||
ids.push(...collectGroupIds(child));
|
||||
}
|
||||
}
|
||||
return ids;
|
||||
}
|
||||
|
||||
// ---- Tree node component ----
|
||||
interface GroupTreeNodeProps {
|
||||
group: KnowledgeGroup;
|
||||
selectedGroupId?: string;
|
||||
onSelect: (groupId: string) => void;
|
||||
isAdmin: boolean;
|
||||
onEdit: (group: KnowledgeGroup) => void;
|
||||
onDelete: (group: KnowledgeGroup) => void;
|
||||
depth?: number;
|
||||
}
|
||||
|
||||
const GroupTreeNode: React.FC<GroupTreeNodeProps> = ({
|
||||
group,
|
||||
selectedGroupId,
|
||||
onSelect,
|
||||
isAdmin,
|
||||
onEdit,
|
||||
onDelete,
|
||||
depth = 0,
|
||||
}) => {
|
||||
const hasChildren = group.children && group.children.length > 0;
|
||||
const isSelected = selectedGroupId === group.id ||
|
||||
(hasChildren && group.children!.some(c => collectGroupIds(c).includes(selectedGroupId || '')));
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
// Auto-expand if a child is selected
|
||||
useEffect(() => {
|
||||
if (selectedGroupId && hasChildren) {
|
||||
const allIds = collectGroupIds(group);
|
||||
if (allIds.includes(selectedGroupId)) setCollapsed(false);
|
||||
}
|
||||
}, [selectedGroupId]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className={`group flex items-center justify-between rounded-lg transition-colors ${selectedGroupId === group.id ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
|
||||
style={{ paddingLeft: `${depth * 12 + 12}px` }}
|
||||
>
|
||||
{/* Expand/collapse toggle */}
|
||||
<div className="flex items-center flex-1">
|
||||
{hasChildren ? (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setCollapsed(c => !c); }}
|
||||
className="p-0.5 mr-1 shrink-0 text-slate-400 hover:text-slate-700"
|
||||
>
|
||||
{collapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
|
||||
</button>
|
||||
) : (
|
||||
<span className="w-5 shrink-0" />
|
||||
)}
|
||||
<button
|
||||
onClick={() => onSelect(group.id)}
|
||||
className="flex-1 flex items-center gap-1.5 py-1.5 text-sm font-medium text-left whitespace-nowrap"
|
||||
>
|
||||
<Folder size={14} className={selectedGroupId === group.id ? 'text-blue-500 shrink-0' : 'text-slate-400 shrink-0'} />
|
||||
<span>{group.name}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isAdmin && (
|
||||
<div className="opacity-0 group-hover:opacity-100 flex items-center gap-0.5 pr-2 shrink-0">
|
||||
<button
|
||||
onClick={() => onEdit(group)}
|
||||
className="p-1 text-slate-400 hover:text-blue-600 rounded"
|
||||
>
|
||||
<Settings size={11} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(group)}
|
||||
className="p-1 text-slate-400 hover:text-red-500 rounded"
|
||||
>
|
||||
<Trash2 size={11} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Children */}
|
||||
{hasChildren && !collapsed && (
|
||||
<div>
|
||||
{group.children!.map(child => (
|
||||
<GroupTreeNode
|
||||
key={child.id}
|
||||
group={child}
|
||||
selectedGroupId={selectedGroupId}
|
||||
onSelect={onSelect}
|
||||
isAdmin={isAdmin}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
depth={depth + 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ---- Pagination component ----
|
||||
interface PaginationProps {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
totalItems: number;
|
||||
pageSize: number;
|
||||
onPageChange: (page: number) => void;
|
||||
t: (key: string, ...args: any[]) => string;
|
||||
}
|
||||
|
||||
const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, totalItems, pageSize, onPageChange, t }) => {
|
||||
if (totalItems === 0) return null;
|
||||
const start = (currentPage - 1) * pageSize + 1;
|
||||
const end = Math.min(currentPage * pageSize, totalItems);
|
||||
return (
|
||||
<div className="px-8 py-4 border-t border-slate-200/60 bg-white/50 backdrop-blur-md flex items-center justify-center gap-2 shrink-0">
|
||||
<button
|
||||
onClick={() => onPageChange(Math.max(1, currentPage - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-30 transition-all font-medium text-slate-600 text-sm"
|
||||
>
|
||||
{t('previous')}
|
||||
</button>
|
||||
<div className="px-3 py-2 text-sm font-semibold text-slate-700">
|
||||
{t('showingRange', start, end, totalItems)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-30 transition-all font-medium text-slate-600 text-sm"
|
||||
>
|
||||
{t('next')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const KnowledgeBaseView: React.FC<KnowledgeBaseViewProps> = (props) => {
|
||||
const { authToken, modelConfigs = DEFAULT_MODELS, isAdmin = false } = props;
|
||||
const { showError, showWarning, showSuccess } = useToast()
|
||||
const { confirm } = useConfirm()
|
||||
const { t } = useLanguage()
|
||||
|
||||
// Data State
|
||||
const [files, setFiles] = useState<KnowledgeFile[]>([])
|
||||
// groups is now a tree; flatGroups is the flattened version for lookups
|
||||
const [groups, setGroups] = useState<KnowledgeGroup[]>([])
|
||||
const flatGroups = useMemo(() => flattenGroups(groups), [groups])
|
||||
const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS)
|
||||
const [globalStats, setGlobalStats] = useState<{ total: number, uncategorized: number }>({ total: 0, uncategorized: 0 })
|
||||
const [isLoadingSettings, setIsLoadingSettings] = useState(true)
|
||||
const [isLoadingFiles, setIsLoadingFiles] = useState(true)
|
||||
|
||||
// UI State
|
||||
const [pdfPreview, setPdfPreview] = useState<{ fileId: string; fileName: string } | null>(null)
|
||||
const [isIndexingModalOpen, setIsIndexingModalOpen] = useState(false)
|
||||
const [pendingFiles, setPendingFiles] = useState<RawFile[]>([])
|
||||
const [fileInputRef] = useState<React.RefObject<HTMLInputElement>>(React.createRef())
|
||||
const [shouldOpenModal, setShouldOpenModal] = useState(false)
|
||||
|
||||
// Filter & Pagination State
|
||||
const [filterName, setFilterName] = useState('')
|
||||
const [filterStatus, setFilterStatus] = useState<'all' | 'ready' | 'indexing' | 'failed'>('all')
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const pageSize = 12
|
||||
const [chunkDrawer, setChunkDrawer] = useState<{ isOpen: boolean; fileId: string; fileName: string } | null>(null)
|
||||
|
||||
const [isAutoRefreshEnabled] = useState(false)
|
||||
const [autoRefreshInterval] = useState<number>(5000)
|
||||
|
||||
// Sidebar State
|
||||
const [selectedSidebarFilter, setSelectedSidebarFilter] = useState<{ type: 'all' | 'uncategorized' | 'group'; groupId?: string }>({ type: 'all' })
|
||||
const [isGroupModalOpen, setIsGroupModalOpen] = useState(false)
|
||||
const [isImportDrawerOpen, setIsImportDrawerOpen] = useState(false);
|
||||
const [isImportTasksDrawerOpen, setIsImportTasksDrawerOpen] = useState(false);
|
||||
const [editingGroup, setEditingGroup] = useState<KnowledgeGroup | null>(null)
|
||||
const [newGroupName, setNewGroupName] = useState('')
|
||||
const [newGroupParentId, setNewGroupParentId] = useState<string | null>(null)
|
||||
|
||||
const fetchAndSetSettings = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
const settingsData = await userSettingService.get(authToken);
|
||||
setSettings({ ...DEFAULT_SETTINGS, ...settingsData })
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch settings:', error)
|
||||
} finally {
|
||||
setIsLoadingSettings(false)
|
||||
}
|
||||
}, [authToken, isAdmin])
|
||||
|
||||
const fetchAndSetFiles = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
setIsLoadingFiles(true)
|
||||
const result = await knowledgeBaseService.getAll(authToken, {
|
||||
page: currentPage,
|
||||
limit: pageSize,
|
||||
name: filterName,
|
||||
status: filterStatus,
|
||||
groupId: selectedSidebarFilter.type === 'group' ? selectedSidebarFilter.groupId : undefined
|
||||
})
|
||||
setFiles(result.items)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch files:', error)
|
||||
} finally {
|
||||
setIsLoadingFiles(false)
|
||||
}
|
||||
}, [authToken, currentPage, filterName, filterStatus, selectedSidebarFilter])
|
||||
|
||||
const fetchAndSetGroups = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
const remoteGroups = await knowledgeGroupService.getGroups()
|
||||
setGroups(remoteGroups)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch groups:', error)
|
||||
}
|
||||
}, [authToken])
|
||||
|
||||
const fetchAndSetStats = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
const stats = await knowledgeBaseService.getStats(authToken)
|
||||
setGlobalStats(stats)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch stats:', error)
|
||||
}
|
||||
}, [authToken])
|
||||
|
||||
useEffect(() => {
|
||||
if (authToken) {
|
||||
fetchAndSetSettings()
|
||||
fetchAndSetGroups()
|
||||
fetchAndSetStats()
|
||||
}
|
||||
}, [authToken, fetchAndSetSettings, fetchAndSetGroups, fetchAndSetStats])
|
||||
|
||||
useEffect(() => {
|
||||
if (authToken) {
|
||||
fetchAndSetFiles()
|
||||
}
|
||||
}, [fetchAndSetFiles])
|
||||
|
||||
useEffect(() => {
|
||||
if (shouldOpenModal && pendingFiles.length > 0) {
|
||||
setIsIndexingModalOpen(true);
|
||||
setShouldOpenModal(false);
|
||||
}
|
||||
}, [shouldOpenModal, pendingFiles.length]);
|
||||
|
||||
const handleFileUpload = async (fileList: FileList) => {
|
||||
if (!authToken) {
|
||||
showWarning(t('loginRequired'))
|
||||
return
|
||||
}
|
||||
|
||||
const MAX_FILE_SIZE = 104857600;
|
||||
const rawFiles: RawFile[] = []
|
||||
const errors: string[] = []
|
||||
|
||||
const filesArray = Array.from(fileList);
|
||||
for (const file of filesArray) {
|
||||
const extension = file.name.split('.').pop() || ''
|
||||
if (!isExtensionAllowed(extension, 'kb')) {
|
||||
errors.push(t('unsupportedFileType', file.name, extension))
|
||||
continue
|
||||
}
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
errors.push(t('fileSizeLimitExceeded', file.name, formatBytes(file.size), 100))
|
||||
continue;
|
||||
}
|
||||
try {
|
||||
const rawFile = await readFile(file)
|
||||
rawFiles.push(rawFile)
|
||||
} catch (error) {
|
||||
errors.push(`${file.name} - ${t('readingFailed')}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length > 0) showError(`${t('uploadErrors')}:\n${errors.join('\n')}`);
|
||||
if (rawFiles.length === 0) return;
|
||||
|
||||
setPendingFiles(rawFiles);
|
||||
setShouldOpenModal(true);
|
||||
}
|
||||
|
||||
const handleConfirmIndexing = async (config: IndexingConfig) => {
|
||||
if (!authToken) return
|
||||
let hasSuccess = false
|
||||
|
||||
for (const rawFile of pendingFiles) {
|
||||
try {
|
||||
const indexingConfig = {
|
||||
...config,
|
||||
groupIds: selectedSidebarFilter.type === 'group' ? [selectedSidebarFilter.groupId!] : []
|
||||
};
|
||||
await uploadService.uploadFileWithConfig(rawFile.file, indexingConfig, authToken)
|
||||
hasSuccess = true
|
||||
} catch (error: any) {
|
||||
showError(`${t('uploadFailed')}: ${rawFile.name} - ${error.message}`)
|
||||
}
|
||||
}
|
||||
if (hasSuccess) await fetchAndSetFiles()
|
||||
setPendingFiles([])
|
||||
setIsIndexingModalOpen(false)
|
||||
}
|
||||
|
||||
const handleRemoveFile = async (id: string) => {
|
||||
if (!(await confirm(t('confirmDeleteFile')))) return
|
||||
if (!authToken) return
|
||||
try {
|
||||
await knowledgeBaseService.deleteFile(id, authToken)
|
||||
setFiles(prev => prev.filter(f => f.id !== id))
|
||||
showSuccess(t('fileDeleted'))
|
||||
} catch (error: any) {
|
||||
showError(`${t('deleteFailed')}: ` + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleFileCategory = async (file: KnowledgeFile, groupId: string) => {
|
||||
try {
|
||||
const currentGroupIds = file.groups?.map(g => g.id) || [];
|
||||
const isAssigned = currentGroupIds.includes(groupId);
|
||||
|
||||
let newGroupIds: string[];
|
||||
if (isAssigned) {
|
||||
newGroupIds = currentGroupIds.filter(id => id !== groupId);
|
||||
} else {
|
||||
newGroupIds = [...currentGroupIds, groupId];
|
||||
}
|
||||
|
||||
await knowledgeGroupService.addFileToGroups(file.id, newGroupIds);
|
||||
await fetchAndSetFiles();
|
||||
} catch (error: any) {
|
||||
console.error('Failed to toggle category:', error);
|
||||
showError(t('actionFailed') + ': ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
const handleClearAll = async () => {
|
||||
if (!(await confirm(t('confirmClearKB')))) return
|
||||
if (!authToken) return
|
||||
try {
|
||||
await knowledgeBaseService.clearAll(authToken)
|
||||
setFiles([])
|
||||
fetchAndSetStats()
|
||||
showSuccess(t('kbCleared'))
|
||||
} catch (error: any) {
|
||||
showError(`${t('clearFailed')}: ` + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
// Filtering: when a group is selected, include files in that group AND all descendant groups
|
||||
const filteredFiles = useMemo(() => {
|
||||
return files.filter(file => {
|
||||
const matchName = file.name.toLowerCase().includes(filterName.toLowerCase());
|
||||
|
||||
let matchGroup = true;
|
||||
if (selectedSidebarFilter.type === 'uncategorized') {
|
||||
matchGroup = !file.groups || file.groups.length === 0;
|
||||
} else if (selectedSidebarFilter.type === 'group' && selectedSidebarFilter.groupId) {
|
||||
// Find the selected group in the tree to collect all descendant IDs
|
||||
const selectedGroup = flatGroups.find(g => g.id === selectedSidebarFilter.groupId);
|
||||
const allIds = selectedGroup ? collectGroupIds(selectedGroup) : [selectedSidebarFilter.groupId];
|
||||
matchGroup = file.groups?.some(g => allIds.includes(g.id)) || false;
|
||||
}
|
||||
|
||||
const matchStatus = filterStatus === 'all' ||
|
||||
(filterStatus === 'ready' && (file.status === 'ready' || file.status === 'vectorized')) ||
|
||||
(filterStatus === 'indexing' && (file.status === 'indexing' || file.status === 'pending' || file.status === 'extracted')) ||
|
||||
(filterStatus === 'failed' && (file.status === 'failed' || file.status === 'error'));
|
||||
return matchName && matchGroup && matchStatus;
|
||||
});
|
||||
}, [files, filterName, selectedSidebarFilter, filterStatus, flatGroups]);
|
||||
|
||||
const totalPages = Math.ceil(filteredFiles.length / pageSize);
|
||||
const paginatedFiles = useMemo(() => {
|
||||
const start = (currentPage - 1) * pageSize;
|
||||
return filteredFiles.slice(start, start + pageSize);
|
||||
}, [filteredFiles, currentPage, pageSize]);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [filterName, filterStatus, selectedSidebarFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
let intervalId: NodeJS.Timeout | null = null;
|
||||
const hasIndexingFiles = files.some(file => ['pending', 'indexing', 'extracted', 'vectorized'].includes(file.status));
|
||||
|
||||
if (isAutoRefreshEnabled && hasIndexingFiles) {
|
||||
intervalId = setInterval(() => {
|
||||
fetchAndSetFiles();
|
||||
}, autoRefreshInterval);
|
||||
}
|
||||
|
||||
return () => { if (intervalId) clearInterval(intervalId); };
|
||||
}, [isAutoRefreshEnabled, files, autoRefreshInterval, fetchAndSetFiles]);
|
||||
|
||||
const getFileIcon = (file: KnowledgeFile) => {
|
||||
if (file.type.startsWith('image/')) return <ImageIcon size={20} className="text-slate-500" />;
|
||||
if (file.type === 'application/pdf') return <FileType size={20} className="text-blue-500" />;
|
||||
return <FileText size={20} className="text-blue-500" />;
|
||||
};
|
||||
|
||||
const handleCreateOrUpdateGroup = async () => {
|
||||
if (!newGroupName.trim()) return
|
||||
try {
|
||||
if (editingGroup) {
|
||||
await knowledgeGroupService.updateGroup(editingGroup.id, { name: newGroupName, parentId: newGroupParentId })
|
||||
showSuccess(t('groupUpdated'))
|
||||
} else {
|
||||
await knowledgeGroupService.createGroup({ name: newGroupName, parentId: newGroupParentId })
|
||||
showSuccess(t('groupCreated'))
|
||||
}
|
||||
fetchAndSetGroups()
|
||||
setIsGroupModalOpen(false)
|
||||
setEditingGroup(null)
|
||||
setNewGroupName('')
|
||||
setNewGroupParentId(null)
|
||||
} catch (error: any) {
|
||||
showError(t('actionFailed') + ': ' + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteGroup = async (group: KnowledgeGroup) => {
|
||||
if (!(await confirm(t('confirmDeleteGroup').replace('$1', group.name)))) return
|
||||
try {
|
||||
await knowledgeGroupService.deleteGroup(group.id)
|
||||
showSuccess(t('groupDeleted'))
|
||||
if (selectedSidebarFilter.groupId === group.id) {
|
||||
setSelectedSidebarFilter({ type: 'all' })
|
||||
}
|
||||
fetchAndSetGroups()
|
||||
} catch (error: any) {
|
||||
showError(t('deleteFailed') + ': ' + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
const openCreateGroup = (parentId?: string | null) => {
|
||||
setEditingGroup(null);
|
||||
setNewGroupName('');
|
||||
setNewGroupParentId(parentId ?? null);
|
||||
setIsGroupModalOpen(true);
|
||||
}
|
||||
|
||||
const openEditGroup = (group: KnowledgeGroup) => {
|
||||
setEditingGroup(group);
|
||||
setNewGroupName(group.name);
|
||||
setNewGroupParentId(group.parentId ?? null);
|
||||
setIsGroupModalOpen(true);
|
||||
}
|
||||
|
||||
const selectedGroupObj = selectedSidebarFilter.type === 'group'
|
||||
? flatGroups.find(g => g.id === selectedSidebarFilter.groupId)
|
||||
: null;
|
||||
|
||||
if (isLoadingSettings) {
|
||||
return (
|
||||
<div className='flex items-center justify-center min-h-[400px] w-full'>
|
||||
<div className='text-blue-600 animate-spin rounded-full h-8 w-8 border-2 border-t-transparent border-blue-600'></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex flex-row h-full w-full bg-slate-50 overflow-hidden'>
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 bg-white border-r border-slate-200 flex flex-col shrink-0">
|
||||
<div className="p-6 flex flex-col min-h-0">
|
||||
<h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">{t('navCatalog')}</h2>
|
||||
<nav className="space-y-1">
|
||||
<button
|
||||
onClick={() => setSelectedSidebarFilter({ type: 'all' })}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors ${selectedSidebarFilter.type === 'all' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Layers size={16} />
|
||||
<span>{t('allDocuments')}</span>
|
||||
</div>
|
||||
<span className="text-xs bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded-full">{files.length}</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedSidebarFilter({ type: 'uncategorized' })}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors ${selectedSidebarFilter.type === 'uncategorized' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText size={16} />
|
||||
<span>{t('uncategorized')}</span>
|
||||
</div>
|
||||
<span className="text-xs bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded-full">
|
||||
{files.filter(f => !f.groups || f.groups.length === 0).length}
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div className="mt-6 flex items-center justify-between mb-3">
|
||||
<h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider">{t('categories')}</h2>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => openCreateGroup(null)}
|
||||
className="p-1 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-all"
|
||||
title={t('createCategory') as string}
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-0.5 overflow-y-auto overflow-x-auto flex-1 pr-1 pb-4">
|
||||
{groups.map(group => (
|
||||
<GroupTreeNode
|
||||
key={group.id}
|
||||
group={group}
|
||||
selectedGroupId={selectedSidebarFilter.type === 'group' ? selectedSidebarFilter.groupId : undefined}
|
||||
onSelect={(gId) => setSelectedSidebarFilter({ type: 'group', groupId: gId })}
|
||||
isAdmin={isAdmin}
|
||||
onEdit={openEditGroup}
|
||||
onDelete={handleDeleteGroup}
|
||||
depth={0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className='flex flex-col flex-1 h-full w-full bg-transparent overflow-hidden'>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={(e) => {
|
||||
if (e.target.files && e.target.files.length > 0) handleFileUpload(e.target.files)
|
||||
}}
|
||||
multiple
|
||||
className="hidden"
|
||||
accept={KB_ALLOWED_EXTENSIONS.map(ext => `.${ext}`).join(',') + ',' + IMAGE_MIME_TYPES.join(',')}
|
||||
/>
|
||||
|
||||
<GlobalDragDropOverlay onFilesSelected={handleFileUpload} isAdmin={isAdmin} />
|
||||
|
||||
{/* Header Section */}
|
||||
<div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 leading-tight">
|
||||
{selectedSidebarFilter.type === 'all' ? t('kbManagement') :
|
||||
selectedSidebarFilter.type === 'uncategorized' ? t('uncategorizedFiles') :
|
||||
selectedGroupObj?.name || t('category')}
|
||||
</h1>
|
||||
<p className="text-[15px] text-slate-500 mt-1">
|
||||
{selectedSidebarFilter.type === 'group'
|
||||
? selectedGroupObj?.description || t('kbManagementDesc')
|
||||
: t('kbManagementDesc')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{isAdmin && (
|
||||
<>
|
||||
{selectedSidebarFilter.type === 'group' && (
|
||||
<button
|
||||
onClick={() => openCreateGroup(selectedSidebarFilter.groupId)}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg shadow-sm transition-all font-semibold text-sm active:scale-95 hover:bg-slate-50"
|
||||
>
|
||||
<Plus size={16} />
|
||||
{t('addSubcategory')}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setIsImportTasksDrawerOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg shadow-sm transition-all font-semibold text-sm active:scale-95 hover:bg-slate-50"
|
||||
>
|
||||
<Box size={18} className="text-indigo-600" />
|
||||
{t('importTasksTitle')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsImportDrawerOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg shadow-sm transition-all font-semibold text-sm active:scale-95 hover:bg-slate-50"
|
||||
>
|
||||
<FolderInput size={18} className="text-blue-600" />
|
||||
{t('importFolder')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-sm shadow-blue-100 transition-all font-semibold text-sm active:scale-95"
|
||||
>
|
||||
<Plus size={18} />
|
||||
{t('addFile')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Bar */}
|
||||
<div className="px-8 pb-6 flex items-center justify-between gap-4 shrink-0">
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
<div className="relative max-w-xs w-full">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('searchPlaceholder')}
|
||||
value={filterName}
|
||||
onChange={(e) => setFilterName(e.target.value)}
|
||||
className="w-full h-9 pl-9 pr-4 bg-white border border-slate-200 rounded-lg text-sm transition-all focus:ring-1 focus:ring-blue-500 focus:border-blue-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => fetchAndSetFiles()}
|
||||
className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all"
|
||||
title="Refresh"
|
||||
>
|
||||
<RefreshCw size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* File List */}
|
||||
<div className="flex-1 overflow-y-auto px-8 pb-4">
|
||||
{isLoadingFiles ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||
<div className="w-10 h-10 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
) : paginatedFiles.length > 0 ? (
|
||||
<div className="flex flex-col gap-3">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{paginatedFiles.map((file) => (
|
||||
<motion.div
|
||||
key={file.id}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="bg-white rounded-xl border border-slate-200/80 p-4 shadow-sm hover:shadow-md transition-all group relative flex items-center gap-4"
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="p-2.5 bg-blue-50 rounded-lg text-blue-600 shadow-sm border border-blue-100/30 shrink-0">
|
||||
{getFileIcon(file)}
|
||||
</div>
|
||||
|
||||
{/* Name & Desc */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<h3
|
||||
onClick={() => setChunkDrawer({ isOpen: true, fileId: file.id, fileName: file.name })}
|
||||
className="font-bold text-slate-900 text-[15px] cursor-pointer hover:text-blue-600 transition-colors truncate"
|
||||
>
|
||||
{file.name}
|
||||
</h3>
|
||||
<span className="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold tracking-wider uppercase shrink-0">
|
||||
{file.name.split('.').pop()?.toUpperCase() || 'FILE'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-[13px] text-slate-500 truncate">
|
||||
{file.status === 'ready' || file.status === 'vectorized'
|
||||
? t('statusReadyDesc')
|
||||
: t('statusIndexingDesc', file.status)
|
||||
}
|
||||
</p>
|
||||
{file.groups && file.groups.length > 0 && (
|
||||
<div className="flex gap-1 ml-2">
|
||||
{file.groups.map(g => (
|
||||
<span key={g.id} className="text-[10px] px-1.5 py-0.5 bg-blue-50 text-blue-600 rounded-full border border-blue-100">
|
||||
{g.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meta & Actions */}
|
||||
<div className="flex items-center gap-6 shrink-0">
|
||||
<div className="text-[12px] font-medium text-slate-400 flex flex-col items-end">
|
||||
<span>{new Date(file.createdAt || Date.now()).toLocaleDateString()}</span>
|
||||
<span>{formatBytes(file.size)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{file.status !== 'ready' && file.status !== 'vectorized' ? (
|
||||
<CircleDashed size={16} className="text-blue-400 animate-spin mr-2" />
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{isFormatSupportedForPreview(file.name) && (
|
||||
<button onClick={() => setPdfPreview({ fileId: file.id, fileName: file.name })} className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md bg-slate-50" title={t('preview') as string || 'Preview'}>
|
||||
<Eye size={16} />
|
||||
</button>
|
||||
)}
|
||||
<div className="relative group/tag">
|
||||
<button className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md bg-slate-50" title={t('groups') as string || 'Groups'}>
|
||||
<Tag size={16} />
|
||||
</button>
|
||||
<div className="absolute right-0 top-full mt-1 w-52 bg-white border border-slate-200 rounded-lg shadow-lg opacity-0 invisible group-hover/tag:opacity-100 group-hover/tag:visible transition-all z-20 overflow-hidden">
|
||||
<div className="p-2 border-b border-slate-100 bg-slate-50 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
|
||||
{t('selectCategory')}
|
||||
</div>
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
<button
|
||||
onClick={() => knowledgeGroupService.addFileToGroups(file.id, []).then(fetchAndSetFiles)}
|
||||
className="w-full text-left px-3 py-2 text-xs text-slate-600 hover:bg-slate-50 flex items-center gap-2"
|
||||
>
|
||||
<Layers size={12} />
|
||||
{t('noneUncategorized')}
|
||||
</button>
|
||||
{flatGroups.map(g => (
|
||||
<button
|
||||
key={g.id}
|
||||
onClick={() => handleToggleFileCategory(file, g.id)}
|
||||
style={{ paddingLeft: `${(g.depth || 0) * 12 + 12}px` }}
|
||||
className="w-full text-left pr-3 py-2 text-xs text-slate-600 hover:bg-slate-50 border-t border-slate-50 flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center gap-1.5 truncate">
|
||||
<Hash size={12} className={file.groups?.some(fg => fg.id === g.id) ? 'text-blue-500 shrink-0' : 'text-slate-400 shrink-0'} />
|
||||
<span className={file.groups?.some(fg => fg.id === g.id) ? 'text-blue-600 font-medium truncate' : 'truncate'}>{g.name}</span>
|
||||
</div>
|
||||
{file.groups?.some(fg => fg.id === g.id) && <CheckCircle2 size={12} className="text-blue-600 shrink-0 ml-2" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<button onClick={() => handleRemoveFile(file.id)} className="p-1.5 text-slate-400 hover:text-red-500 rounded-md bg-slate-50" title={t('delete') as string || 'Delete'}>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-w-4xl mx-auto w-full pt-12">
|
||||
<DragDropUpload onFilesSelected={handleFileUpload} isAdmin={isAdmin} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
totalItems={filteredFiles.length}
|
||||
pageSize={pageSize}
|
||||
onPageChange={setCurrentPage}
|
||||
t={t}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<IndexingModalWithMode
|
||||
isOpen={isIndexingModalOpen}
|
||||
onClose={() => { setPendingFiles([]); setIsIndexingModalOpen(false); }}
|
||||
files={pendingFiles}
|
||||
embeddingModels={modelConfigs.filter(m => m.type === ModelType.EMBEDDING)}
|
||||
defaultEmbeddingId={settings.selectedEmbeddingId}
|
||||
onConfirm={handleConfirmIndexing}
|
||||
authToken={authToken}
|
||||
/>
|
||||
|
||||
{/* Group Create/Edit Modal */}
|
||||
<AnimatePresence>
|
||||
{isGroupModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden"
|
||||
>
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-bold text-slate-900 mb-2">
|
||||
{editingGroup ? t('editCategory') : t('createCategory')}
|
||||
</h2>
|
||||
<p className="text-slate-500 text-sm mb-6">
|
||||
{t('categoryDesc')}
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">{t('categoryName')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newGroupName}
|
||||
onChange={(e) => setNewGroupName(e.target.value)}
|
||||
placeholder={t('exampleResearch')}
|
||||
className="w-full h-11 px-4 bg-slate-50 border border-slate-200 rounded-xl outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
|
||||
autoFocus
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleCreateOrUpdateGroup()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Parent category selector */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">{t('parentCategory')}</label>
|
||||
<select
|
||||
value={newGroupParentId ?? ''}
|
||||
onChange={(e) => setNewGroupParentId(e.target.value || null)}
|
||||
className="w-full h-11 px-4 bg-slate-50 border border-slate-200 rounded-xl outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all text-sm"
|
||||
>
|
||||
<option value="">{t('noParentTopLevel')}</option>
|
||||
{flatGroups
|
||||
.filter(g => g.id !== editingGroup?.id) // don't allow self as parent
|
||||
.map(g => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{'\u00A0'.repeat((g.depth || 0) * 4)}{g.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-4 bg-slate-50 border-t border-slate-100 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => { setIsGroupModalOpen(false); setEditingGroup(null); setNewGroupParentId(null); }}
|
||||
className="px-4 py-2 text-slate-600 font-medium hover:bg-slate-200/50 rounded-lg transition-all"
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreateOrUpdateGroup}
|
||||
className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-sm transition-all active:scale-95"
|
||||
>
|
||||
{editingGroup ? t('saveChanges') : t('createCategoryBtn')}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{pdfPreview && (
|
||||
<PDFPreview
|
||||
fileId={pdfPreview.fileId}
|
||||
fileName={pdfPreview.fileName}
|
||||
authToken={authToken}
|
||||
onClose={() => setPdfPreview(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{chunkDrawer && (
|
||||
<ChunkInfoDrawer
|
||||
isOpen={chunkDrawer.isOpen}
|
||||
onClose={() => setChunkDrawer(null)}
|
||||
fileId={chunkDrawer.fileId}
|
||||
fileName={chunkDrawer.fileName}
|
||||
authToken={authToken}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ImportFolderDrawer
|
||||
isOpen={isImportDrawerOpen}
|
||||
onClose={() => setIsImportDrawerOpen(false)}
|
||||
authToken={authToken}
|
||||
onImportSuccess={() => fetchAndSetFiles()}
|
||||
/>
|
||||
|
||||
<ImportTasksDrawer
|
||||
isOpen={isImportTasksDrawerOpen}
|
||||
onClose={() => setIsImportTasksDrawerOpen(false)}
|
||||
authToken={authToken}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,550 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react'
|
||||
import { Book, Plus, Search, Trash2, Edit2, Clock, Eye, EyeOff, X, ArrowLeft, Folder, FolderPlus, MoreVertical, Check, ChevronRight } from 'lucide-react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { noteService } from '../../services/noteService'
|
||||
import { noteCategoryService } from '../../services/noteCategoryService'
|
||||
import { Note, NoteCategory } from '../../types'
|
||||
import { useLanguage } from '../../contexts/LanguageContext'
|
||||
import { useToast } from '../../contexts/ToastContext'
|
||||
import { useConfirm } from '../../contexts/ConfirmContext'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import remarkMath from 'remark-math'
|
||||
import rehypeKatex from 'rehype-katex'
|
||||
|
||||
interface MemosViewProps {
|
||||
authToken: string
|
||||
isAdmin?: boolean
|
||||
}
|
||||
|
||||
export const MemosView: React.FC<MemosViewProps> = ({ authToken, isAdmin = false }) => {
|
||||
const { t } = useLanguage()
|
||||
const { showError, showSuccess } = useToast()
|
||||
const { confirm } = useConfirm()
|
||||
|
||||
const [notes, setNotes] = useState<Note[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [filterText, setFilterText] = useState('')
|
||||
|
||||
// Editor state
|
||||
const [isEditing, setIsEditing] = useState(false)
|
||||
const [currentNote, setCurrentNote] = useState<Partial<Note>>({})
|
||||
const [showPreview, setShowPreview] = useState(true)
|
||||
|
||||
// Category state
|
||||
const [categories, setCategories] = useState<NoteCategory[]>([])
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null) // null = All
|
||||
const [isCategoryLoading, setIsCategoryLoading] = useState(false)
|
||||
const [showAddCategory, setShowAddCategory] = useState(false)
|
||||
const [newCategoryName, setNewCategoryName] = useState('')
|
||||
const [editingCategoryId, setEditingCategoryId] = useState<string | null>(null)
|
||||
const [editCategoryName, setEditCategoryName] = useState('')
|
||||
const [addingSubCategoryId, setAddingSubCategoryId] = useState<string | null>(null)
|
||||
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set())
|
||||
|
||||
const fetchNotes = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const data = await noteService.getAll(authToken, undefined, selectedCategoryId || undefined)
|
||||
setNotes(data)
|
||||
} catch (error: any) {
|
||||
console.error(error)
|
||||
const errorMsg = error.message || ''
|
||||
if (!errorMsg.includes('401') && !errorMsg.includes('403')) {
|
||||
showError(`${t('errorLoadData')}: ${errorMsg}`)
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [authToken, selectedCategoryId, showError, t])
|
||||
|
||||
const fetchCategories = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
setIsCategoryLoading(true)
|
||||
const data = await noteCategoryService.getAll(authToken)
|
||||
setCategories(data)
|
||||
} catch (error: any) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsCategoryLoading(false)
|
||||
}
|
||||
}, [authToken])
|
||||
|
||||
useEffect(() => {
|
||||
fetchNotes()
|
||||
}, [fetchNotes])
|
||||
|
||||
useEffect(() => {
|
||||
fetchCategories()
|
||||
}, [fetchCategories])
|
||||
|
||||
const handleSaveNote = async () => {
|
||||
if (!currentNote.title || !currentNote.content) {
|
||||
showError(t('errorTitleContentRequired'))
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
if (currentNote.id) {
|
||||
await noteService.update(authToken, currentNote.id, {
|
||||
title: currentNote.title,
|
||||
content: currentNote.content,
|
||||
categoryId: currentNote.categoryId
|
||||
})
|
||||
showSuccess(t('successNoteUpdated'))
|
||||
} else {
|
||||
await noteService.create(authToken, {
|
||||
title: currentNote.title,
|
||||
content: currentNote.content,
|
||||
groupId: '',
|
||||
categoryId: currentNote.categoryId || selectedCategoryId || undefined
|
||||
})
|
||||
showSuccess(t('successNoteCreated'))
|
||||
}
|
||||
setIsEditing(false)
|
||||
setCurrentNote({})
|
||||
fetchNotes()
|
||||
} catch (error: any) {
|
||||
showError(t('errorSaveFailed', error.message))
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteNote = async (id: string) => {
|
||||
if (!(await confirm(t('confirmDeleteNote')))) return
|
||||
try {
|
||||
await noteService.delete(authToken, id)
|
||||
showSuccess(t('successNoteDeleted'))
|
||||
fetchNotes()
|
||||
} catch (error) {
|
||||
showError(t('deleteFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
const filteredNotes = notes.filter(n =>
|
||||
n.title.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
n.content.toLowerCase().includes(filterText.toLowerCase())
|
||||
)
|
||||
|
||||
const handleCreateCategory = async (e: React.FormEvent, parentId?: string) => {
|
||||
e.preventDefault()
|
||||
if (!newCategoryName.trim()) return
|
||||
try {
|
||||
await noteCategoryService.create(authToken, newCategoryName.trim(), parentId)
|
||||
setNewCategoryName('')
|
||||
setShowAddCategory(false)
|
||||
setAddingSubCategoryId(null)
|
||||
fetchCategories()
|
||||
showSuccess(t('categoryCreated'))
|
||||
} catch (error: any) {
|
||||
showError(`${t('failedToCreateCategory')}: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateCategory = async (id: string) => {
|
||||
if (!editCategoryName.trim()) return
|
||||
try {
|
||||
await noteCategoryService.update(authToken, id, editCategoryName.trim())
|
||||
setEditingCategoryId(null)
|
||||
fetchCategories()
|
||||
showSuccess(t('groupUpdated'))
|
||||
} catch (error) {
|
||||
showError(t('actionFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteCategory = async (e: React.MouseEvent, id: string) => {
|
||||
e.stopPropagation()
|
||||
if (!(await confirm(t('confirmDeleteCategory')))) return
|
||||
try {
|
||||
await noteCategoryService.delete(authToken, id)
|
||||
if (selectedCategoryId === id) setSelectedCategoryId(null)
|
||||
fetchCategories()
|
||||
showSuccess(t('groupDeleted'))
|
||||
} catch (error) {
|
||||
showError(t('failedToDeleteCategory'))
|
||||
}
|
||||
}
|
||||
|
||||
const toggleCategory = (id: string, e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
const newExpanded = new Set(expandedCategories)
|
||||
if (newExpanded.has(id)) newExpanded.delete(id)
|
||||
else newExpanded.add(id)
|
||||
setExpandedCategories(newExpanded)
|
||||
}
|
||||
|
||||
const renderCategoryTree = (parentId: string | null) => {
|
||||
const items = categories.filter(c => (c.parentId || null) === (parentId || null))
|
||||
|
||||
return items.map(cat => {
|
||||
const hasChildren = categories.some(c => c.parentId === cat.id)
|
||||
const isExpanded = expandedCategories.has(cat.id)
|
||||
|
||||
return (
|
||||
<div key={cat.id} className="flex flex-col">
|
||||
<div className="group relative">
|
||||
{editingCategoryId === cat.id ? (
|
||||
<div className="flex items-center gap-2 bg-white border border-blue-200 rounded-lg p-1.5 mx-2">
|
||||
<input
|
||||
autoFocus
|
||||
className="flex-1 text-xs border-none outline-none p-0 focus:ring-0"
|
||||
value={editCategoryName}
|
||||
onChange={e => setEditCategoryName(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleUpdateCategory(cat.id)}
|
||||
/>
|
||||
<button onClick={() => handleUpdateCategory(cat.id)} className="text-blue-600"><Check size={14} /></button>
|
||||
<button onClick={() => setEditingCategoryId(null)} className="text-slate-400"><X size={14} /></button>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
onClick={() => setSelectedCategoryId(cat.id)}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm group cursor-pointer transition-all ${selectedCategoryId === cat.id ? 'bg-blue-50 text-blue-700 font-bold shadow-sm' : 'text-slate-500 hover:bg-slate-100/50'}`}
|
||||
style={{ paddingLeft: `${(cat.level - 1) * 12 + 12}px` }}
|
||||
>
|
||||
<div className="flex items-center gap-2 overflow-hidden">
|
||||
<div
|
||||
onClick={(e) => toggleCategory(cat.id, e)}
|
||||
className={`p-0.5 hover:bg-blue-100 rounded transition-colors ${!hasChildren ? 'invisible' : ''}`}
|
||||
>
|
||||
<ChevronRight size={14} className={`transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`} />
|
||||
</div>
|
||||
<Folder size={16} className={selectedCategoryId === cat.id ? 'text-blue-600' : 'text-slate-400 group-hover:text-blue-500'} />
|
||||
<span className="truncate">{cat.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
|
||||
{cat.level < 3 && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setAddingSubCategoryId(cat.id)
|
||||
setShowAddCategory(true)
|
||||
if (!isExpanded) {
|
||||
const newExpanded = new Set(expandedCategories)
|
||||
newExpanded.add(cat.id)
|
||||
setExpandedCategories(newExpanded)
|
||||
}
|
||||
}}
|
||||
className="p-1 hover:text-blue-600"
|
||||
title={t('subFolderPlaceholder')}
|
||||
>
|
||||
<FolderPlus size={12} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setEditingCategoryId(cat.id)
|
||||
setEditCategoryName(cat.name)
|
||||
}}
|
||||
className="p-1 hover:text-blue-600"
|
||||
>
|
||||
<Edit2 size={12} />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => handleDeleteCategory(e, cat.id)}
|
||||
className="p-1 hover:text-red-500"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="flex flex-col">
|
||||
{renderCategoryTree(cat.id)}
|
||||
{addingSubCategoryId === cat.id && (
|
||||
<form
|
||||
onSubmit={(e) => handleCreateCategory(e, cat.id)}
|
||||
className="my-1 mx-2"
|
||||
style={{ paddingLeft: `${cat.level * 12 + 12}px` }}
|
||||
>
|
||||
<div className="flex items-center gap-2 bg-white border border-blue-200 rounded-lg p-1.5 focus-within:ring-2 focus-within:ring-blue-100 transition-all">
|
||||
<input
|
||||
autoFocus
|
||||
className="flex-1 text-xs border-none outline-none p-0 focus:ring-0"
|
||||
placeholder={t('subFolderPlaceholder')}
|
||||
value={newCategoryName}
|
||||
onChange={e => setNewCategoryName(e.target.value)}
|
||||
onBlur={() => !newCategoryName && setAddingSubCategoryId(null)}
|
||||
/>
|
||||
<button type="submit" className="text-blue-600 hover:text-blue-800"><Check size={14} /></button>
|
||||
<button type="button" onClick={() => setAddingSubCategoryId(null)} className="text-slate-400"><X size={14} /></button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-white overflow-hidden">
|
||||
<div className="px-8 pt-8 pb-6 flex items-center justify-between shrink-0 border-b border-slate-100">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setIsEditing(false)}
|
||||
className="p-2 -ml-2 hover:bg-slate-100 rounded-lg text-slate-400 hover:text-slate-600 transition-colors"
|
||||
title={t('back')}
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
</button>
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-xl font-bold text-slate-900 leading-tight">
|
||||
{currentNote.id ? t('editNote') : t('newNote')}
|
||||
</h2>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('directoryLabel')}:</span>
|
||||
<select
|
||||
className="text-[11px] font-bold text-blue-600 bg-blue-50/50 px-2 py-0.5 rounded border-none outline-none focus:ring-0 cursor-pointer max-w-[150px] truncate"
|
||||
value={currentNote.categoryId || ''}
|
||||
onChange={(e) => setCurrentNote({ ...currentNote, categoryId: e.target.value || undefined })}
|
||||
>
|
||||
<option value="">{t('uncategorized')}</option>
|
||||
{categories.map(c => {
|
||||
const parent = categories.find(p => p.id === c.parentId)
|
||||
const grandparent = parent ? categories.find(gp => gp.id === parent.parentId) : null
|
||||
const path = [grandparent, parent, c].filter(Boolean).map(cat => cat?.name).join(' > ')
|
||||
return (
|
||||
<option key={c.id} value={c.id}>
|
||||
{'\u00A0'.repeat((c.level - 1) * 2)}{c.name}
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setShowPreview(!showPreview)}
|
||||
className="flex items-center gap-2 px-3 py-1.5 text-[13px] font-semibold text-slate-500 hover:bg-slate-50 rounded-lg transition-all"
|
||||
>
|
||||
{showPreview ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
{showPreview ? t('hidePreview') : t('showPreview')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveNote}
|
||||
className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold text-sm shadow-sm transition-all active:scale-95"
|
||||
>
|
||||
{t('save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
<div className={`flex-1 flex flex-col p-8 gap-6 ${showPreview ? 'border-r border-slate-100' : ''}`}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('noteTitlePlaceholder')}
|
||||
value={currentNote.title || ''}
|
||||
onChange={(e) => setCurrentNote({ ...currentNote, title: e.target.value })}
|
||||
className="text-2xl font-bold text-slate-900 bg-transparent border-none focus:ring-0 placeholder:text-slate-200 w-full"
|
||||
/>
|
||||
<textarea
|
||||
placeholder={t('startWritingPlaceholder')}
|
||||
value={currentNote.content || ''}
|
||||
onChange={(e) => setCurrentNote({ ...currentNote, content: e.target.value })}
|
||||
className="flex-1 text-[15px] text-slate-700 bg-transparent border-none focus:ring-0 placeholder:text-slate-200 w-full resize-none leading-relaxed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{showPreview && (
|
||||
<div className="flex-1 p-8 overflow-y-auto bg-slate-50/20">
|
||||
<div className="prose prose-slate prose-sm max-w-none">
|
||||
<h1 className="text-2xl font-bold text-slate-900 mb-6">{currentNote.title || t('previewHeader')}</h1>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeKatex]}
|
||||
>
|
||||
{currentNote.content || t('noContentToPreview')}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full bg-white overflow-hidden">
|
||||
{/* Category Sidebar */}
|
||||
<aside className="w-64 border-r border-slate-100 flex flex-col bg-slate-50/30 shrink-0">
|
||||
<div className="p-6 pb-2">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-[11px] font-black text-slate-400 uppercase tracking-widest">{t('personalNotebook') || t('directoryLabel')}</h2>
|
||||
<button
|
||||
onClick={() => setShowAddCategory(true)}
|
||||
className="p-1 hover:bg-slate-100 rounded-md text-slate-400 transition-colors"
|
||||
>
|
||||
<FolderPlus size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-0.5">
|
||||
<button
|
||||
onClick={() => setSelectedCategoryId(null)}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all ${!selectedCategoryId ? 'bg-blue-50 text-blue-700 font-bold shadow-sm' : 'text-slate-500 hover:bg-slate-50'}`}
|
||||
>
|
||||
<Book size={16} className={!selectedCategoryId ? 'text-blue-600' : 'text-slate-400'} />
|
||||
{t('allNotes')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-4 py-2">
|
||||
{showAddCategory && !addingSubCategoryId && (
|
||||
<form onSubmit={(e) => handleCreateCategory(e)} className="mb-4 px-2">
|
||||
<div className="flex items-center gap-2 bg-white border border-blue-200 rounded-lg p-1.5 focus-within:ring-2 focus-within:ring-blue-100 transition-all">
|
||||
<input
|
||||
autoFocus
|
||||
className="flex-1 text-xs border-none outline-none p-0 focus:ring-0"
|
||||
placeholder={t('enterNamePlaceholder')}
|
||||
value={newCategoryName}
|
||||
onChange={e => setNewCategoryName(e.target.value)}
|
||||
onBlur={() => !newCategoryName && setShowAddCategory(false)}
|
||||
/>
|
||||
<button type="submit" className="text-blue-600 hover:text-blue-800"><Check size={14} /></button>
|
||||
<button type="button" onClick={() => setShowAddCategory(false)} className="text-slate-400"><X size={14} /></button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="space-y-1">
|
||||
{renderCategoryTree(null)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col overflow-hidden relative">
|
||||
<div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h1 className="text-2xl font-bold text-slate-900 leading-tight">{t('navNotebook')}</h1>
|
||||
{selectedCategoryId && (
|
||||
<>
|
||||
<ChevronRight size={16} className="text-slate-300" />
|
||||
<span className="text-2xl font-bold text-blue-600 truncate max-w-[200px]">
|
||||
{categories.find(c => c.id === selectedCategoryId)?.name || t('directoryLabel')}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[15px] text-slate-500">{t('notebookDesc') || 'Capture your personal thoughts and research notes.'}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setCurrentNote({ categoryId: selectedCategoryId || undefined })
|
||||
setIsEditing(true)
|
||||
}}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-sm shadow-blue-100 transition-all font-semibold text-sm active:scale-95"
|
||||
>
|
||||
<Plus size={18} />
|
||||
{t('newNote')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="px-8 pb-6 flex items-center shrink-0">
|
||||
<div className="relative max-w-xs w-full">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('filterNotesPlaceholder')}
|
||||
value={filterText}
|
||||
onChange={(e) => setFilterText(e.target.value)}
|
||||
className="w-full h-9 pl-9 pr-4 bg-white border border-slate-200 rounded-lg text-sm transition-all focus:ring-1 focus:ring-blue-500 focus:border-blue-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-8 pb-8 flex-1 overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
) : filteredNotes.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-32 border-2 border-dashed border-slate-200 rounded-2xl bg-slate-50/10 text-center">
|
||||
<Book className="w-12 h-12 text-slate-200 mx-auto mb-4" />
|
||||
<h3 className="text-slate-900 font-bold">{t('noNotesFound') || 'No Notes Found'}</h3>
|
||||
<p className="text-slate-500 text-sm mt-1">{t('startByCreatingNote') || 'Start by creating your first personal note.'}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<AnimatePresence>
|
||||
{filteredNotes.map((note) => (
|
||||
<motion.div
|
||||
key={note.id}
|
||||
layout
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="bg-white rounded-xl border border-slate-200/80 p-5 shadow-sm hover:shadow-md transition-all group relative overflow-hidden flex flex-col h-64 cursor-pointer"
|
||||
onClick={() => {
|
||||
setCurrentNote(note)
|
||||
setIsEditing(true)
|
||||
}}
|
||||
>
|
||||
<div className="absolute top-4 right-4 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity" onClick={e => e.stopPropagation()}>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setCurrentNote(note)
|
||||
setIsEditing(true)
|
||||
}}
|
||||
className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md bg-slate-50"
|
||||
>
|
||||
<Edit2 size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDeleteNote(note.id)
|
||||
}}
|
||||
className="p-1.5 text-slate-400 hover:text-red-500 rounded-md bg-slate-50"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="w-11 h-11 bg-slate-50 rounded-lg text-slate-400 flex items-center justify-center mb-4 transition-all group-hover:bg-blue-600 group-hover:text-white">
|
||||
<Book size={20} />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 text-[16px] mb-2 leading-tight group-hover:text-blue-600 transition-colors truncate pr-12">
|
||||
{note.title}
|
||||
</h3>
|
||||
<p className="text-[13px] text-slate-500 leading-relaxed line-clamp-4 overflow-hidden">
|
||||
{note.content}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto pt-4 border-t border-slate-50 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={12} className="text-slate-300" />
|
||||
<span className="text-[11px] font-medium text-slate-400">
|
||||
{new Date(note.updatedAt).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
{note.categoryId && (
|
||||
<span className="text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded font-medium">
|
||||
{categories.find(c => c.id === note.categoryId)?.name || t('directoryLabel')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
import React, { useEffect, useState, useCallback, useMemo } from 'react'
|
||||
import { ArrowLeft, Plus, MessageSquare, BookOpen, Trash2, Eye, FileText, FileType, Image as ImageIcon, Search, RefreshCw } from 'lucide-react'
|
||||
import { KnowledgeGroup, KnowledgeFile } from '../../types'
|
||||
import { knowledgeBaseService } from '../../services/knowledgeBaseService'
|
||||
import { modelConfigService } from '../../services/modelConfigService'
|
||||
import { uploadService } from '../../services/uploadService'
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService'
|
||||
import { useToast } from '../../contexts/ToastContext'
|
||||
import { useConfirm } from '../../contexts/ConfirmContext'
|
||||
import { RawFile, IndexingConfig, ModelConfig } from '../../types'
|
||||
import IndexingModalWithMode from '../IndexingModalWithMode'
|
||||
import { PDFPreview } from '../PDFPreview'
|
||||
import { NotebookGlobalDragDropOverlay } from '../NotebookGlobalDragDropOverlay'
|
||||
import { useLanguage } from '../../contexts/LanguageContext'
|
||||
import { readFile, formatBytes } from '../../utils/fileUtils'
|
||||
import { isExtensionAllowed, isFormatSupportedForPreview } from '../../constants/fileSupport'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
|
||||
interface NotebookDetailViewProps {
|
||||
authToken: string;
|
||||
notebook: KnowledgeGroup;
|
||||
onBack: () => void;
|
||||
onChatWithContext?: (context: { selectedGroups?: string[], selectedFiles?: string[] }) => void;
|
||||
isAdmin?: boolean;
|
||||
}
|
||||
|
||||
export const NotebookDetailView: React.FC<NotebookDetailViewProps> = ({ authToken, notebook, onBack, onChatWithContext, isAdmin = false }) => {
|
||||
const [files, setFiles] = useState<KnowledgeFile[]>([])
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const { showError, showSuccess } = useToast()
|
||||
const { confirm } = useConfirm()
|
||||
const { t } = useLanguage()
|
||||
|
||||
const [isIndexingModalOpen, setIsIndexingModalOpen] = useState(false)
|
||||
const [pendingFiles, setPendingFiles] = useState<RawFile[]>([])
|
||||
const [shouldOpenModal, setShouldOpenModal] = useState(false)
|
||||
const [models, setModels] = useState<ModelConfig[]>([])
|
||||
const [pdfPreview, setPdfPreview] = useState<{ fileId: string; fileName: string } | null>(null)
|
||||
const [filterName, setFilterName] = useState('')
|
||||
|
||||
const fileInputRef = React.useRef<HTMLInputElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchModels = async () => {
|
||||
try {
|
||||
const res = await modelConfigService.getAll(authToken)
|
||||
setModels(res)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch models', error)
|
||||
}
|
||||
}
|
||||
if (authToken) fetchModels()
|
||||
}, [authToken])
|
||||
|
||||
useEffect(() => {
|
||||
if (shouldOpenModal && pendingFiles.length > 0) {
|
||||
setIsIndexingModalOpen(true);
|
||||
setShouldOpenModal(false);
|
||||
}
|
||||
}, [shouldOpenModal, pendingFiles.length]);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
const allFiles = await knowledgeBaseService.getAll(authToken)
|
||||
const notebookFiles = allFiles.filter(f => f.groups?.some(g => g.id === notebook.id))
|
||||
setFiles(notebookFiles)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
showError(t('errorLoadData'))
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [authToken, notebook.id, t, showError])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [loadData])
|
||||
|
||||
const handleFileUpload = async (fileList: FileList | File[]) => {
|
||||
if (!fileList || fileList.length === 0) return
|
||||
const errors: string[] = []
|
||||
const newPendingFiles: RawFile[] = []
|
||||
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
const file = fileList[i]
|
||||
try {
|
||||
if (file.size > 104857600) {
|
||||
errors.push(`${file.name} - ${t('fileSizeLimitExceeded', file.name, formatBytes(file.size), 100)}`)
|
||||
continue
|
||||
}
|
||||
const extension = file.name.split('.').pop() || ''
|
||||
if (!isExtensionAllowed(extension, 'group')) {
|
||||
if (!(await confirm(t('confirmUnsupportedFile', extension || t('unknown'))))) continue
|
||||
}
|
||||
const rawFile = await readFile(file)
|
||||
newPendingFiles.push(rawFile)
|
||||
} catch (error: any) {
|
||||
errors.push(`${file.name} - ${t('readingFailed')}`)
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length > 0) showError(`${t('uploadErrors')}:\n${errors.join('\n')}`)
|
||||
if (newPendingFiles.length > 0) {
|
||||
setPendingFiles(prev => [...prev, ...newPendingFiles])
|
||||
setShouldOpenModal(true)
|
||||
}
|
||||
}
|
||||
|
||||
const handleConfirmIndexing = async (config: IndexingConfig) => {
|
||||
setIsIndexingModalOpen(false)
|
||||
try {
|
||||
for (const rawFile of pendingFiles) {
|
||||
const uploadRes = await uploadService.uploadFileWithConfig(rawFile.file, config, authToken)
|
||||
if (uploadRes && uploadRes.id) {
|
||||
await knowledgeGroupService.addFileToGroups(uploadRes.id, [notebook.id])
|
||||
}
|
||||
}
|
||||
showSuccess(t('successUploadFile'))
|
||||
loadData()
|
||||
} catch (error: any) {
|
||||
showError(t('errorUploadFile', error.message || t('unknownError')))
|
||||
} finally {
|
||||
setPendingFiles([])
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveFile = async (fileId: string, fileName: string) => {
|
||||
if (!(await confirm(t('confirmRemoveFileFromGroup', fileName)))) return;
|
||||
try {
|
||||
await knowledgeGroupService.removeFileFromGroup(fileId, notebook.id);
|
||||
setFiles(prev => prev.filter(f => f.id !== fileId));
|
||||
showSuccess(t('fileDeleted'));
|
||||
} catch (error) {
|
||||
showError(t('deleteFailed'));
|
||||
}
|
||||
}
|
||||
|
||||
const filteredFiles = useMemo(() => {
|
||||
return files.filter(file => file.name.toLowerCase().includes(filterName.toLowerCase()));
|
||||
}, [files, filterName]);
|
||||
|
||||
const getFileIcon = (file: KnowledgeFile) => {
|
||||
if (file.type.startsWith('image/')) return <ImageIcon size={20} className="text-slate-500" />;
|
||||
if (file.type === 'application/pdf') return <FileType size={20} className="text-blue-500" />;
|
||||
return <FileText size={20} className="text-blue-500" />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-transparent overflow-hidden">
|
||||
<NotebookGlobalDragDropOverlay onFilesSelected={handleFileUpload} isAdmin={isAdmin} />
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={(e) => e.target.files && handleFileUpload(e.target.files)}
|
||||
multiple
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
{/* Header */}
|
||||
<div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
|
||||
<div className="flex items-start gap-4 min-w-0">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="mt-1 p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-colors active:scale-90"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
</button>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 bg-blue-50 rounded-lg text-blue-600 border border-blue-100/30">
|
||||
<BookOpen size={18} />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 truncate leading-tight">
|
||||
{notebook.name}
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-[15px] text-slate-500 mt-1 truncate max-w-2xl">
|
||||
{notebook.description || t('browseManageFiles')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => onChatWithContext?.({ selectedGroups: [notebook.id] })}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg font-semibold text-sm hover:bg-slate-50 transition-all shadow-sm"
|
||||
>
|
||||
<MessageSquare size={18} className="text-blue-600" />
|
||||
{t('chatWithGroup')}
|
||||
</button>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-sm shadow-blue-100 transition-all font-semibold text-sm active:scale-95"
|
||||
>
|
||||
<Plus size={18} />
|
||||
{t('addFile')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Bar */}
|
||||
<div className="px-8 pb-6 flex items-center justify-between gap-4 shrink-0">
|
||||
<div className="relative max-w-xs w-full">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('filterGroupFiles')}
|
||||
value={filterName}
|
||||
onChange={(e) => setFilterName(e.target.value)}
|
||||
className="w-full h-9 pl-9 pr-4 bg-white border border-slate-200 rounded-lg text-sm transition-all focus:ring-1 focus:ring-blue-500 focus:border-blue-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => loadData()}
|
||||
className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all"
|
||||
>
|
||||
<RefreshCw size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 overflow-y-auto px-8 pb-8">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
) : filteredFiles.length > 0 ? (
|
||||
<div className="flex flex-col gap-3">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{filteredFiles.map((file) => (
|
||||
<motion.div
|
||||
key={file.id}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white rounded-xl border border-slate-200/80 p-4 shadow-sm hover:shadow-md transition-all group relative overflow-hidden flex items-center gap-4"
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="p-2.5 bg-blue-50 rounded-lg text-blue-600 shadow-sm border border-blue-100/30 shrink-0">
|
||||
{getFileIcon(file)}
|
||||
</div>
|
||||
|
||||
{/* Main info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<h3 className="font-bold text-slate-900 text-[15px] truncate">
|
||||
{file.name}
|
||||
</h3>
|
||||
<span className="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold tracking-wider uppercase shrink-0">
|
||||
{file.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meta info & Actions */}
|
||||
<div className="flex items-center gap-6 shrink-0">
|
||||
<div className="text-[12px] font-medium text-slate-400 flex flex-col items-end">
|
||||
<span>{formatBytes(file.size)}</span>
|
||||
<span className="text-[10px] font-bold text-slate-300 uppercase tracking-widest mt-0.5">
|
||||
{file.name.split('.').pop()?.toUpperCase() || 'FILE'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{isFormatSupportedForPreview(file.name) && (
|
||||
<button onClick={() => setPdfPreview({ fileId: file.id, fileName: file.name })} className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md bg-slate-50">
|
||||
<Eye size={16} />
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<button onClick={() => handleRemoveFile(file.id, file.name)} className="p-1.5 text-slate-400 hover:text-red-500 rounded-md bg-slate-50">
|
||||
<Plus size={16} className="rotate-45" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-32 border-2 border-dashed border-slate-200 rounded-2xl bg-white/50 text-center">
|
||||
<BookOpen className="w-12 h-12 text-slate-200 mx-auto mb-4" />
|
||||
<h3 className="text-slate-900 font-bold">{t('noFiles')}</h3>
|
||||
<p className="text-slate-500 text-sm mt-1">{t('noFilesDesc')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<IndexingModalWithMode
|
||||
isOpen={isIndexingModalOpen}
|
||||
onClose={() => { setPendingFiles([]); setIsIndexingModalOpen(false); }}
|
||||
files={pendingFiles}
|
||||
embeddingModels={models.filter(m => m.type === 'embedding')}
|
||||
defaultEmbeddingId={models.find(m => m.isDefault)?.id || ''}
|
||||
onConfirm={handleConfirmIndexing}
|
||||
authToken={authToken}
|
||||
/>
|
||||
|
||||
{pdfPreview && (
|
||||
<PDFPreview
|
||||
fileId={pdfPreview.fileId}
|
||||
fileName={pdfPreview.fileName}
|
||||
authToken={authToken}
|
||||
onClose={() => setPdfPreview(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
import React, { useMemo } from 'react'
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService'
|
||||
import { KnowledgeGroup, UpdateGroupData, CreateGroupData } from '../../types'
|
||||
import { Plus, Book, Library, MessageSquare, Trash2, Edit2, FolderInput, ChevronLeft, ChevronRight } from 'lucide-react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { NotebookDetailView } from './NotebookDetailView'
|
||||
import { CreateNotebookDrawer } from '../CreateNotebookDrawer'
|
||||
import { EditNotebookDrawer } from '../EditNotebookDrawer'
|
||||
import { ImportFolderDrawer } from '../ImportFolderDrawer'
|
||||
import { useLanguage } from '../../contexts/LanguageContext'
|
||||
import { useToast } from '../../contexts/ToastContext'
|
||||
import { useConfirm } from '../../contexts/ConfirmContext'
|
||||
|
||||
interface NotebooksViewProps {
|
||||
authToken: string
|
||||
onChatWithContext: (context: { selectedGroups?: string[], selectedFiles?: string[] }) => void
|
||||
isAdmin?: boolean
|
||||
}
|
||||
|
||||
/** Flatten a tree of groups into a flat list */
|
||||
function flattenGroups(groups: KnowledgeGroup[]): KnowledgeGroup[] {
|
||||
const result: KnowledgeGroup[] = [];
|
||||
function walk(items: KnowledgeGroup[]) {
|
||||
for (const g of items) {
|
||||
result.push(g);
|
||||
if (g.children?.length) walk(g.children);
|
||||
}
|
||||
}
|
||||
walk(groups);
|
||||
return result;
|
||||
}
|
||||
|
||||
const PAGE_SIZE = 12;
|
||||
|
||||
export const NotebooksView: React.FC<NotebooksViewProps> = ({ authToken, onChatWithContext, isAdmin = false }) => {
|
||||
const { t } = useLanguage()
|
||||
const { showError } = useToast()
|
||||
const { confirm } = useConfirm()
|
||||
const [notebooks, setNotebooks] = React.useState<KnowledgeGroup[]>([])
|
||||
const [isLoading, setIsLoading] = React.useState(true)
|
||||
const [selectedNotebook, setSelectedNotebook] = React.useState<KnowledgeGroup | null>(null)
|
||||
const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState(false)
|
||||
const [isImportDrawerOpen, setIsImportDrawerOpen] = React.useState(false)
|
||||
const [editingNotebook, setEditingNotebook] = React.useState<KnowledgeGroup | null>(null)
|
||||
const [currentPage, setCurrentPage] = React.useState(1)
|
||||
|
||||
// Flatten tree for display in the grid
|
||||
const flatNotebooks = useMemo(() => flattenGroups(notebooks), [notebooks])
|
||||
const totalPages = Math.ceil(flatNotebooks.length / PAGE_SIZE)
|
||||
const paginatedNotebooks = useMemo(() => {
|
||||
const start = (currentPage - 1) * PAGE_SIZE;
|
||||
return flatNotebooks.slice(start, start + PAGE_SIZE);
|
||||
}, [flatNotebooks, currentPage])
|
||||
|
||||
const fetchNotebooks = async () => {
|
||||
try {
|
||||
const result = await knowledgeGroupService.getGroups()
|
||||
// result can be an array (tree/list) or an object (paginated flat list)
|
||||
if (Array.isArray(result)) {
|
||||
setNotebooks(result)
|
||||
} else if (result && result.items) {
|
||||
setNotebooks(result.items)
|
||||
} else {
|
||||
setNotebooks([])
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchNotebooks()
|
||||
}, [authToken, selectedNotebook])
|
||||
|
||||
const handleCreateNotebook = async (data: CreateGroupData) => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
await knowledgeGroupService.createGroup(data)
|
||||
await fetchNotebooks()
|
||||
setIsCreateDrawerOpen(false)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
showError(t('createFailed'))
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateNotebook = async (id: string, data: UpdateGroupData) => {
|
||||
await knowledgeGroupService.updateGroup(id, data)
|
||||
await fetchNotebooks()
|
||||
}
|
||||
|
||||
const handleDeleteNotebook = async (e: React.MouseEvent, id: string, name: string) => {
|
||||
e.stopPropagation()
|
||||
if (!(await confirm(t('confirmDeleteNotebook').replace('$1', name)))) return
|
||||
try {
|
||||
setIsLoading(true)
|
||||
await knowledgeGroupService.deleteGroup(id)
|
||||
setNotebooks(prev => flattenGroups(prev).filter(n => n.id !== id) as any)
|
||||
await fetchNotebooks()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
showError(t('deleteFailed'))
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedNotebook) {
|
||||
return (
|
||||
<NotebookDetailView
|
||||
authToken={authToken}
|
||||
notebook={selectedNotebook}
|
||||
onBack={() => setSelectedNotebook(null)}
|
||||
onChatWithContext={onChatWithContext}
|
||||
isAdmin={!!isAdmin}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-transparent overflow-hidden">
|
||||
<div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 leading-tight">{t('navKnowledgeGroups')}</h1>
|
||||
<p className="text-[15px] text-slate-500 mt-1">{t('notebooksDesc')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setIsImportDrawerOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-700 text-sm font-semibold rounded-lg hover:bg-slate-50 hover:border-slate-300 transition-all active:scale-95 shadow-sm"
|
||||
>
|
||||
<FolderInput size={18} className="text-blue-600" />
|
||||
<span>{t('importFolder')}</span>
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setIsCreateDrawerOpen(true)}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-sm shadow-blue-100 transition-all font-semibold text-sm active:scale-95"
|
||||
>
|
||||
<Plus size={18} />
|
||||
<span>{t('newGroup')}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-8 flex-1 overflow-y-auto pb-4">
|
||||
{isLoading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
) : flatNotebooks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-32 border-2 border-dashed border-slate-200 rounded-2xl bg-white/50 text-center">
|
||||
<Library className="w-12 h-12 text-slate-200 mx-auto mb-4" />
|
||||
<h3 className="text-slate-900 font-bold">{t('noKnowledgeGroups')}</h3>
|
||||
<p className="text-slate-500 text-sm mt-1">{t('createGroupDesc')}</p>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setIsCreateDrawerOpen(true)}
|
||||
className="mt-6 px-5 py-2 bg-blue-600 text-white rounded-lg font-semibold text-sm hover:bg-blue-700 transition-all shadow-sm"
|
||||
>
|
||||
{t('createNotebook')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 max-w-7xl mx-auto">
|
||||
<AnimatePresence>
|
||||
{paginatedNotebooks.map((notebook) => (
|
||||
<motion.div
|
||||
key={notebook.id}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
onClick={() => setSelectedNotebook(notebook)}
|
||||
className="bg-white rounded-xl border border-slate-200/80 p-5 shadow-sm hover:shadow-md transition-all group relative overflow-hidden flex flex-col h-64 cursor-pointer"
|
||||
>
|
||||
<div className="absolute top-4 right-4 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity" onClick={e => e.stopPropagation()}>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onChatWithContext({ selectedGroups: [notebook.id] })
|
||||
}}
|
||||
className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md"
|
||||
>
|
||||
<MessageSquare size={16} />
|
||||
</button>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setEditingNotebook(notebook)
|
||||
}}
|
||||
className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md"
|
||||
>
|
||||
<Edit2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={(e) => handleDeleteNotebook(e, notebook.id, notebook.name)}
|
||||
className="p-1.5 text-slate-400 hover:text-red-500 rounded-md"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="w-11 h-11 bg-blue-50 rounded-lg text-blue-600 shadow-sm border border-blue-100/30 flex items-center justify-center mb-4 transition-transform group-hover:scale-105">
|
||||
<Book size={20} />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 text-[16px] mb-1 leading-tight group-hover:text-blue-600 transition-colors truncate">
|
||||
{notebook.parentId && <span className="text-slate-300 text-xs mr-1">↳</span>}
|
||||
{notebook.name}
|
||||
</h3>
|
||||
<p className="text-[13px] text-slate-500 leading-relaxed line-clamp-3 italic opacity-85">
|
||||
{notebook.description || t('noDescriptionProvided')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto pt-4 border-t border-slate-50 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 px-2.5 py-1 bg-slate-50 border border-slate-100 rounded-md">
|
||||
<span className="text-[11px] font-bold text-slate-700">{notebook.fileCount || 0}</span>
|
||||
<span className="text-[11px] font-semibold text-slate-400 uppercase tracking-tight">{t('files')}</span>
|
||||
</div>
|
||||
<span className="text-[11px] font-medium text-slate-300">
|
||||
{notebook.updatedAt ? new Date(notebook.updatedAt).toLocaleDateString() : ''}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination: always show when there are notebooks */}
|
||||
{flatNotebooks.length > 0 && (
|
||||
<div className="px-8 py-4 border-t border-slate-200/60 bg-white/50 backdrop-blur-md flex items-center justify-center gap-2 shrink-0">
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-30 transition-all text-slate-600 flex items-center gap-1 text-sm font-medium"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
{t('previous')}
|
||||
</button>
|
||||
<div className="px-3 py-2 text-sm font-semibold text-slate-700">
|
||||
{t('showingRange', (currentPage - 1) * PAGE_SIZE + 1, Math.min(currentPage * PAGE_SIZE, flatNotebooks.length), flatNotebooks.length)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-30 transition-all text-slate-600 flex items-center gap-1 text-sm font-medium"
|
||||
>
|
||||
{t('next')}
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isCreateDrawerOpen && (
|
||||
<CreateNotebookDrawer
|
||||
isOpen={isCreateDrawerOpen}
|
||||
onClose={() => setIsCreateDrawerOpen(false)}
|
||||
onCreate={handleCreateNotebook}
|
||||
/>
|
||||
)}
|
||||
|
||||
{editingNotebook && (
|
||||
<EditNotebookDrawer
|
||||
isOpen={!!editingNotebook}
|
||||
onClose={() => setEditingNotebook(null)}
|
||||
notebook={editingNotebook}
|
||||
onUpdate={handleUpdateNotebook}
|
||||
/>
|
||||
)}
|
||||
<ImportFolderDrawer
|
||||
isOpen={isImportDrawerOpen}
|
||||
onClose={() => setIsImportDrawerOpen(false)}
|
||||
authToken={authToken}
|
||||
onImportSuccess={fetchNotebooks}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
import React from 'react';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import { Search, Plus, MoreHorizontal, Puzzle } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
// Mock data for plugins
|
||||
interface PluginMock {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
status: 'installed' | 'not-installed' | 'update-available';
|
||||
developer: string;
|
||||
iconEmoji: string;
|
||||
iconBgClass: string;
|
||||
}
|
||||
|
||||
const mockPlugins: PluginMock[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'plugin1Name',
|
||||
description: 'plugin1Desc',
|
||||
status: 'installed',
|
||||
developer: 'Official',
|
||||
iconEmoji: '🛠️',
|
||||
iconBgClass: 'bg-blue-50'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'plugin2Name',
|
||||
description: 'plugin2Desc',
|
||||
status: 'update-available',
|
||||
developer: 'Official',
|
||||
iconEmoji: '📄',
|
||||
iconBgClass: 'bg-indigo-50'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'plugin3Name',
|
||||
description: 'plugin3Desc',
|
||||
status: 'installed',
|
||||
developer: 'Community',
|
||||
iconEmoji: '🦊',
|
||||
iconBgClass: 'bg-orange-50'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'plugin4Name',
|
||||
description: 'plugin4Desc',
|
||||
status: 'not-installed',
|
||||
developer: 'Official',
|
||||
iconEmoji: '🌐',
|
||||
iconBgClass: 'bg-emerald-50'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'plugin5Name',
|
||||
description: 'plugin5Desc',
|
||||
status: 'not-installed',
|
||||
developer: 'Community',
|
||||
iconEmoji: '🗄️',
|
||||
iconBgClass: 'bg-slate-100'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'plugin6Name',
|
||||
description: 'plugin6Desc',
|
||||
status: 'installed',
|
||||
developer: 'Official',
|
||||
iconEmoji: '💬',
|
||||
iconBgClass: 'bg-sky-50'
|
||||
}
|
||||
];
|
||||
|
||||
export const PluginsView: React.FC = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-[#f4f7fb] overflow-hidden">
|
||||
{/* Header Area */}
|
||||
<div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
|
||||
<div>
|
||||
<h1 className="text-[22px] font-bold text-slate-900 leading-tight flex items-center gap-2">
|
||||
<Puzzle className="text-blue-600" size={24} />
|
||||
{t('pluginTitle')}
|
||||
</h1>
|
||||
<p className="text-[14px] text-slate-500 mt-1">{t('pluginDesc')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative w-64">
|
||||
<Search className="absolute text-slate-400 left-3 top-1/2 -translate-y-1/2" size={16} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('searchPlugin')}
|
||||
className="w-full h-10 pl-10 pr-4 bg-white border border-slate-200 rounded-lg focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all text-sm font-medium"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="px-8 pb-8 flex-1 overflow-y-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 max-w-[1600px] mx-auto">
|
||||
<AnimatePresence>
|
||||
{mockPlugins.map((plugin) => (
|
||||
<motion.div
|
||||
key={plugin.id}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 hover:shadow-md transition-all group flex flex-col h-[220px]"
|
||||
>
|
||||
{/* Top layer */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className={`w-12 h-12 flex items-center justify-center rounded-xl ${plugin.iconBgClass} text-2xl shadow-sm border border-black/5`}>
|
||||
{plugin.iconEmoji}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Status Badge */}
|
||||
{plugin.status === 'installed' && (
|
||||
<div className="px-2.5 py-1 text-[12px] font-semibold text-emerald-600 bg-emerald-50 rounded-full border border-emerald-100 flex flex-row items-center justify-center">
|
||||
{t('installedPlugin')}
|
||||
</div>
|
||||
)}
|
||||
{plugin.status === 'update-available' && (
|
||||
<div className="px-2.5 py-1 text-[12px] font-semibold text-orange-600 bg-orange-50 rounded-full border border-orange-100 flex flex-row items-center justify-center">
|
||||
{t('updatePlugin')}
|
||||
</div>
|
||||
)}
|
||||
{/* Options button */}
|
||||
<button className="text-slate-400 hover:text-slate-600 transition-colors">
|
||||
<MoreHorizontal size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Middle layer */}
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-slate-800 text-[17px] mb-2 leading-tight flex items-center gap-2">
|
||||
{t(plugin.name as any)}
|
||||
{plugin.developer === 'Official' && (
|
||||
<span className="bg-blue-100 text-blue-700 text-[10px] uppercase font-bold px-1.5 py-0.5 rounded-sm">{t('pluginOfficial')}</span>
|
||||
)}
|
||||
</h3>
|
||||
<p className="text-[13px] text-slate-500 leading-relaxed line-clamp-2">
|
||||
{t(plugin.description as any)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bottom layer */}
|
||||
<div className="mt-4 pt-4 border-t border-slate-50 flex items-center justify-between">
|
||||
<span className="text-[12px] font-medium text-slate-400">
|
||||
{t('pluginBy')}{plugin.developer === 'Official' ? t('pluginOfficial') : t('pluginCommunity')}
|
||||
</span>
|
||||
{plugin.status === 'not-installed' ? (
|
||||
<button className="flex items-center justify-center gap-1.5 px-4 py-1.5 text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors shadow-sm">
|
||||
<Plus size={14} className="text-white" />
|
||||
<span className="text-[13px] font-bold">{t('installPlugin')}</span>
|
||||
</button>
|
||||
) : plugin.status === 'update-available' ? (
|
||||
<button className="flex items-center justify-center gap-1.5 px-3 py-1.5 text-orange-600 bg-orange-50 hover:bg-orange-100 rounded-lg transition-colors border border-orange-200">
|
||||
<span className="text-[13px] font-bold">{t('updatePlugin')}</span>
|
||||
</button>
|
||||
) : (
|
||||
<button className="flex items-center justify-center gap-1.5 px-3 py-1.5 text-slate-600 bg-slate-50 hover:bg-slate-100 rounded-lg transition-colors border border-slate-200">
|
||||
<span className="text-[13px] font-bold">{t('pluginConfig')}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,2193 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { ModelConfig, ModelType, AppSettings, KnowledgeGroup, Tenant, TenantMember, DEFAULT_SETTINGS } from '../../types';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Plus,
|
||||
Search,
|
||||
KeyRound,
|
||||
Trash2,
|
||||
Edit,
|
||||
UserPlus,
|
||||
Globe,
|
||||
PlusCircle,
|
||||
Clock,
|
||||
ExternalLink,
|
||||
Download,
|
||||
Upload,
|
||||
Building,
|
||||
Settings as SettingsIcon,
|
||||
Shield,
|
||||
User,
|
||||
MoreVertical,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Filter,
|
||||
RefreshCcw,
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
Database,
|
||||
UserCircle,
|
||||
HardDrive,
|
||||
LayoutGrid,
|
||||
X,
|
||||
Key,
|
||||
Loader2,
|
||||
Edit2,
|
||||
Save,
|
||||
Cpu,
|
||||
BookOpen,
|
||||
Sparkles,
|
||||
ToggleRight,
|
||||
ToggleLeft,
|
||||
FileText,
|
||||
} from "lucide-react";
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { userService } from '../../services/userService';
|
||||
import { settingsService } from '../../services/settingsService';
|
||||
import { userSettingService } from '../../services/userSettingService';
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService';
|
||||
import { apiClient } from '../../services/apiClient';
|
||||
import { AssessmentTemplateManager } from './AssessmentTemplateManager';
|
||||
|
||||
import { useConfirm } from '../../contexts/ConfirmContext';
|
||||
import { useToast } from '../../contexts/ToastContext';
|
||||
|
||||
interface SettingsViewProps {
|
||||
// Model Props
|
||||
models: ModelConfig[];
|
||||
authToken: string | null;
|
||||
onUpdateModels: (action: 'create' | 'update' | 'delete', model: ModelConfig) => Promise<void>;
|
||||
isAdmin?: boolean; // Added isAdmin prop
|
||||
currentUser?: any; // Added current user prop
|
||||
initialTab?: TabType;
|
||||
}
|
||||
|
||||
type TabType = 'general' | 'user' | 'model' | 'tenants' | 'knowledge_base' | 'import_tasks' | 'assessment_templates';
|
||||
|
||||
const buildTenantTree = (tenants: Tenant[]): Tenant[] => {
|
||||
const map = new Map<string, Tenant>();
|
||||
const roots: Tenant[] = [];
|
||||
|
||||
tenants.forEach(t => {
|
||||
map.set(t.id, { ...t, children: [] });
|
||||
});
|
||||
|
||||
tenants.forEach(t => {
|
||||
const node = map.get(t.id)!;
|
||||
if (t.parentId && map.has(t.parentId)) {
|
||||
const parent = map.get(t.parentId)!;
|
||||
parent.children = parent.children || [];
|
||||
parent.children.push(node);
|
||||
} else {
|
||||
roots.push(node);
|
||||
}
|
||||
});
|
||||
|
||||
return roots;
|
||||
};
|
||||
|
||||
// Moved outside to prevent re-mounting
|
||||
const Pagination: React.FC<{
|
||||
current: number;
|
||||
total: number;
|
||||
pageSize: number;
|
||||
onChange: (page: number) => void;
|
||||
}> = ({ current, total, pageSize, onChange }) => {
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-2 mt-6">
|
||||
<button
|
||||
disabled={current === 1}
|
||||
onClick={() => onChange(current - 1)}
|
||||
className="p-2 rounded-xl bg-white border border-slate-200 text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<ChevronDown className="w-4 h-4 rotate-90" />
|
||||
</button>
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(totalPages)].map((_, i) => {
|
||||
const p = i + 1;
|
||||
if (totalPages > 7) {
|
||||
if (p !== 1 && p !== totalPages && Math.abs(p - current) > 1) {
|
||||
if (p === 2 || p === totalPages - 1) return <span key={p} className="px-1 font-bold text-slate-300">...</span>;
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => onChange(p)}
|
||||
className={`w-9 h-9 flex items-center justify-center rounded-xl text-xs font-black transition-all ${current === p ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-100' : 'bg-white border border-slate-200 text-slate-500 hover:border-indigo-500 hover:text-indigo-600'}`}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
disabled={current === totalPages}
|
||||
onClick={() => onChange(current + 1)}
|
||||
className="p-2 rounded-xl bg-white border border-slate-200 text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<ChevronDown className="w-4 h-4 -rotate-90" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const SettingsView: React.FC<SettingsViewProps> = ({
|
||||
models,
|
||||
authToken,
|
||||
onUpdateModels,
|
||||
isAdmin = false,
|
||||
currentUser,
|
||||
initialTab = 'general',
|
||||
}) => {
|
||||
const { t, language, setLanguage } = useLanguage();
|
||||
const { confirm } = useConfirm();
|
||||
const { showError, showSuccess } = useToast();
|
||||
const [activeTab, setActiveTab] = useState<TabType>('general');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// --- Model Manager State ---
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [modelFormData, setModelFormData] = useState<Partial<ModelConfig>>({
|
||||
type: ModelType.LLM,
|
||||
baseUrl: 'http://localhost:11434/v1',
|
||||
modelId: 'llama3',
|
||||
name: '',
|
||||
dimensions: 1536,
|
||||
apiKey: '',
|
||||
maxInputTokens: 8191,
|
||||
maxBatchSize: 2048
|
||||
});
|
||||
|
||||
const [users, setUsers] = useState<any[]>([]);
|
||||
const [isUserLoading, setIsUserLoading] = useState(false);
|
||||
const [userPage, setUserPage] = useState(1);
|
||||
const USER_PAGE_SIZE = 20;
|
||||
const [showAddUser, setShowAddUser] = useState(false);
|
||||
const [newUser, setNewUser] = useState({ username: '', password: '', displayName: '' });
|
||||
const [userSuccess, setUserSuccess] = useState('');
|
||||
|
||||
// --- Change Password State ---
|
||||
const [passwordForm, setPasswordForm] = useState({ current: '', new: '', confirm: '' });
|
||||
const [passwordSuccess, setPasswordSuccess] = useState('');
|
||||
|
||||
// --- App Settings State ---
|
||||
const [appSettings, setAppSettings] = useState<AppSettings | null>(null);
|
||||
const [knowledgeGroups, setKnowledgeGroups] = useState<KnowledgeGroup[]>([]);
|
||||
const [isSettingsLoading, setIsSettingsLoading] = useState(false);
|
||||
const [enabledModelIds, setEnabledModelIds] = useState<string[]>([]);
|
||||
|
||||
// --- Tenant Admin Binding Search State ---
|
||||
const [bindingTenantId, setBindingTenantId] = useState<string | null>(null);
|
||||
const [userSearchQuery, setUserSearchQuery] = useState('');
|
||||
|
||||
// --- Manage Members Modal State ---
|
||||
const [managingMembersTenantId, setManagingMembersTenantId] = useState<string | null>(null);
|
||||
const [tenantMembers, setTenantMembers] = useState<any[]>([]);
|
||||
const [allMemberIds, setAllMemberIds] = useState<Set<string>>(new Set());
|
||||
const [memberUserSearch, setMemberUserSearch] = useState('');
|
||||
const [bindingRole, setBindingRole] = useState('USER');
|
||||
const [currentMemberSearch, setCurrentMemberSearch] = useState('');
|
||||
const [isMembersLoading, setIsMembersLoading] = useState(false);
|
||||
const [activeTenantManagementId, setActiveTenantManagementId] = useState<string | null>(null);
|
||||
const [memberPage, setMemberPage] = useState(1);
|
||||
const [memberTotal, setMemberTotal] = useState(0);
|
||||
const MEMBER_PAGE_SIZE = 20;
|
||||
|
||||
const [userTotal, setUserTotal] = useState(0);
|
||||
|
||||
// --- Tenant Tree & Global Management State ---
|
||||
const [tenants, setTenants] = useState<Tenant[]>([]);
|
||||
const [selectedTenantId, setSelectedTenantId] = useState<string | null>(null);
|
||||
const [stats, setStats] = useState({ users: 0, tenants: 0 });
|
||||
const [showCreateTenant, setShowCreateTenant] = useState(false);
|
||||
const [editingTenant, setEditingTenant] = useState<Tenant | null>(null);
|
||||
const [newTenant, setNewTenant] = useState<{ name: string; domain: string; parentId: string | null }>({
|
||||
name: '',
|
||||
domain: '',
|
||||
parentId: null
|
||||
});
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (initialTab) {
|
||||
setActiveTab(initialTab);
|
||||
}
|
||||
}, [initialTab]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTab === 'user' || activeTab === 'tenants') {
|
||||
fetchUsers(userPage);
|
||||
}
|
||||
}, [userPage]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTenantId) {
|
||||
fetchTenantMembers(selectedTenantId, memberPage);
|
||||
fetchAllMemberIds(selectedTenantId);
|
||||
} else {
|
||||
setAllMemberIds(new Set());
|
||||
}
|
||||
}, [selectedTenantId, memberPage]);
|
||||
|
||||
// Data fetching on tab change
|
||||
useEffect(() => {
|
||||
// Reset pages when switching tabs to avoid bleed-over
|
||||
if (activeTab === 'user' || activeTab === 'tenants') {
|
||||
setUserPage(1);
|
||||
}
|
||||
|
||||
if (activeTab === 'user') {
|
||||
fetchUsers(1);
|
||||
} else if (activeTab === 'general') {
|
||||
fetchSettingsAndGroups();
|
||||
} else if (activeTab === 'tenants' && currentUser?.role === 'SUPER_ADMIN') {
|
||||
fetchTenantsData();
|
||||
fetchUsers(1); // Ensure users are loaded for admin binding
|
||||
}
|
||||
|
||||
// Independent check for KB/Model settings to avoid being blocked by the branches above
|
||||
if ((activeTab === 'knowledge_base' || activeTab === 'model') &&
|
||||
(currentUser?.role === 'TENANT_ADMIN' || currentUser?.role === 'SUPER_ADMIN' || isAdmin)) {
|
||||
fetchKnowledgeBaseSettings();
|
||||
}
|
||||
}, [activeTab, currentUser, authToken, isAdmin]);
|
||||
|
||||
const [kbSettings, setKbSettings] = useState<any>(null);
|
||||
const [localKbSettings, setLocalKbSettings] = useState<any>(null);
|
||||
const [isSavingKbSettings, setIsSavingKbSettings] = useState(false);
|
||||
const fetchKnowledgeBaseSettings = async () => {
|
||||
if (!authToken) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await userSettingService.get(authToken);
|
||||
// If data is null, undefined, or empty object, use DEFAULT_SETTINGS
|
||||
const finalSettings = (data && Object.keys(data).length > 0) ? { ...DEFAULT_SETTINGS, ...data } : DEFAULT_SETTINGS;
|
||||
|
||||
setKbSettings(finalSettings);
|
||||
setLocalKbSettings(finalSettings);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
// Fallback to defaults on error to prevent blank page
|
||||
setKbSettings(DEFAULT_SETTINGS);
|
||||
setLocalKbSettings(DEFAULT_SETTINGS);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateKbSettings = (key: string, value: any) => {
|
||||
setLocalKbSettings((prev: any) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const handleSaveKbSettings = async () => {
|
||||
if (!authToken || !localKbSettings) return;
|
||||
setIsSavingKbSettings(true);
|
||||
try {
|
||||
await userSettingService.update(authToken, localKbSettings);
|
||||
setKbSettings(localKbSettings);
|
||||
showSuccess(t('kbSettingsSaved'));
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showError(t('actionFailed'));
|
||||
} finally {
|
||||
setIsSavingKbSettings(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelKbSettings = () => {
|
||||
setLocalKbSettings(kbSettings);
|
||||
};
|
||||
|
||||
const fetchSettingsAndGroups = async () => {
|
||||
if (!authToken) return;
|
||||
setIsSettingsLoading(true);
|
||||
try {
|
||||
const [settings, groups, personal] = await Promise.all([
|
||||
userSettingService.get(authToken),
|
||||
knowledgeGroupService.getGroups(),
|
||||
userSettingService.getPersonal(authToken)
|
||||
]);
|
||||
setAppSettings(settings);
|
||||
setKnowledgeGroups(groups);
|
||||
|
||||
// Sync local language with user settings if they differ
|
||||
if (personal?.language && personal.language !== language) {
|
||||
setLanguage(personal.language as any);
|
||||
}
|
||||
|
||||
// Also update KB settings with the same data if not already set
|
||||
if (settings && Object.keys(settings).length > 0) {
|
||||
setKbSettings(settings);
|
||||
setLocalKbSettings(settings);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch settings or groups:', error);
|
||||
} finally {
|
||||
setIsSettingsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// --- General tab handlers ---
|
||||
|
||||
|
||||
const handleChangePassword = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setPasswordSuccess('');
|
||||
|
||||
if (passwordForm.new !== passwordForm.confirm) {
|
||||
setError(t('passwordMismatch'));
|
||||
return;
|
||||
}
|
||||
if (passwordForm.new.length < 6) {
|
||||
setError(t('newPasswordMinLength'));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await userService.changePassword(passwordForm.current, passwordForm.new);
|
||||
setPasswordSuccess(t('passwordChangeSuccess'));
|
||||
setPasswordForm({ current: '', new: '', confirm: '' });
|
||||
} catch (err: any) {
|
||||
setError(err.message || t('passwordChangeFailed'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// --- ユーザータブのハンドラー ---
|
||||
const fetchUsers = async (page?: number) => {
|
||||
setIsUserLoading(true);
|
||||
const p = page || userPage;
|
||||
try {
|
||||
const result = await userService.getUsers(p, USER_PAGE_SIZE);
|
||||
if (result && result.data) {
|
||||
setUsers(result.data);
|
||||
setUserTotal(result.total);
|
||||
} else if (Array.isArray(result)) {
|
||||
setUsers(result);
|
||||
setUserTotal(result.length);
|
||||
}
|
||||
} catch (error: any) {
|
||||
setError(error.message || t('getUserListFailed'));
|
||||
} finally {
|
||||
setIsUserLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateUser = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setUserSuccess('');
|
||||
|
||||
if (newUser.username && newUser.password && newUser.displayName) {
|
||||
setIsUserLoading(true);
|
||||
try {
|
||||
await userService.createUser(
|
||||
newUser.username,
|
||||
newUser.password,
|
||||
false,
|
||||
undefined,
|
||||
newUser.displayName
|
||||
);
|
||||
showSuccess(t('userCreatedSuccess'));
|
||||
setNewUser({ username: '', password: '', displayName: '' });
|
||||
setShowAddUser(false);
|
||||
fetchUsers();
|
||||
} catch (error: any) {
|
||||
setError(error.message || t('createUserFailed'));
|
||||
} finally {
|
||||
setIsUserLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const [passwordChangeUserData, setPasswordChangeUserData] = useState<{ userId: string, newPassword: string } | null>(null);
|
||||
|
||||
// --- Edit User State ---
|
||||
const [editUserData, setEditUserData] = useState<{ userId: string, username: string, displayName: string } | null>(null);
|
||||
|
||||
const handleToggleUserAdmin = async (userId: string, newAdminStatus: boolean) => {
|
||||
try {
|
||||
await userService.updateUser(userId, newAdminStatus);
|
||||
// Re-fetch user list
|
||||
fetchUsers();
|
||||
setUserSuccess(newAdminStatus ? t('userPromotedToAdmin') : t('userDemotedFromAdmin'));
|
||||
} catch (error: any) {
|
||||
setError(error.message || t('updateUserFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleUserPasswordChange = async () => {
|
||||
if (!passwordChangeUserData || !passwordChangeUserData.newPassword) return;
|
||||
|
||||
try {
|
||||
// Update user password
|
||||
await userService.updateUserInfo(passwordChangeUserData.userId, { password: passwordChangeUserData.newPassword });
|
||||
setUserSuccess(t('passwordChangeSuccess'));
|
||||
setPasswordChangeUserData(null);
|
||||
fetchUsers(); // Refresh the user list
|
||||
} catch (error: any) {
|
||||
setError(error.message || t('passwordChangeFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAllMemberIds = async (tenantId: string) => {
|
||||
try {
|
||||
const { data } = await apiClient.get<string[]>(`/v1/tenants/${tenantId}/members/ids`);
|
||||
if (Array.isArray(data)) {
|
||||
setAllMemberIds(new Set(data));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch all member IDs:', e);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTenantMembers = async (tenantId: string, page?: number) => {
|
||||
setIsMembersLoading(true);
|
||||
const p = page || memberPage;
|
||||
try {
|
||||
const { data } = await apiClient.get(`/v1/tenants/${tenantId}/members?page=${p}&limit=${MEMBER_PAGE_SIZE}`);
|
||||
if (data && data.data) {
|
||||
setTenantMembers(data.data);
|
||||
setMemberTotal(data.total);
|
||||
} else if (Array.isArray(data)) {
|
||||
setTenantMembers(data);
|
||||
setMemberTotal(data.length);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setIsMembersLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddMember = async (tenantId: string, userId: string, role: string = 'USER') => {
|
||||
try {
|
||||
await apiClient.post(`/v1/tenants/${tenantId}/members`, { userId, role });
|
||||
setAllMemberIds(prev => {
|
||||
const next = new Set(prev);
|
||||
next.add(userId);
|
||||
return next;
|
||||
});
|
||||
showSuccess(t('confirm'));
|
||||
fetchTenantMembers(tenantId);
|
||||
fetchTenantsData();
|
||||
} catch (e: any) {
|
||||
showError(e.message || 'Error adding member');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveMember = async (tenantId: string, userId: string) => {
|
||||
try {
|
||||
await apiClient.delete(`/v1/tenants/${tenantId}/members/${userId}`);
|
||||
setAllMemberIds(prev => {
|
||||
const next = new Set(prev);
|
||||
next.delete(userId);
|
||||
return next;
|
||||
});
|
||||
showSuccess('User removed from organization');
|
||||
fetchTenantMembers(tenantId);
|
||||
fetchTenantsData();
|
||||
} catch (e: any) {
|
||||
showError(e.message || 'Error removing member');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateMemberRole = async (tenantId: string, userId: string, role: string) => {
|
||||
try {
|
||||
await apiClient.patch(`/v1/tenants/${tenantId}/members/${userId}`, { role });
|
||||
showSuccess(t('featureUpdated'));
|
||||
fetchTenantMembers(tenantId);
|
||||
} catch (e: any) {
|
||||
showError(e.message || 'Error updating role');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTenantsData = async () => {
|
||||
if (!authToken) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const [tenRes, admRes] = await Promise.all([
|
||||
apiClient.get('/v1/tenants'),
|
||||
apiClient.get('/users?page=1&limit=1')
|
||||
]);
|
||||
|
||||
const data: Tenant[] = tenRes.data;
|
||||
const filteredData = data.filter(t => t.name !== 'Default');
|
||||
setTenants(filteredData);
|
||||
setStats(s => ({ ...s, tenants: filteredData.length }));
|
||||
|
||||
const result = admRes.data;
|
||||
setStats(s => ({ ...s, users: result.total ?? result.length ?? 0 }));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateTenant = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const path = editingTenant ? `/v1/tenants/${editingTenant.id}` : '/v1/tenants';
|
||||
const body = {
|
||||
name: newTenant.name,
|
||||
domain: newTenant.domain,
|
||||
parentId: newTenant.parentId
|
||||
};
|
||||
|
||||
if (editingTenant) {
|
||||
await apiClient.put(path, body);
|
||||
} else {
|
||||
await apiClient.post(path, body);
|
||||
}
|
||||
|
||||
setShowCreateTenant(false);
|
||||
setEditingTenant(null);
|
||||
setNewTenant({ name: '', domain: '', parentId: null });
|
||||
fetchTenantsData();
|
||||
showSuccess(editingTenant ? 'Tenant updated' : 'Tenant created');
|
||||
} catch (e: any) {
|
||||
showError(e.message || 'Action failed');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveTenant = async (tenantId: string) => {
|
||||
if (!(await confirm(t('confirmDeleteTenant')))) return;
|
||||
try {
|
||||
await apiClient.delete(`/v1/tenants/${tenantId}`);
|
||||
setSelectedTenantId(null);
|
||||
fetchTenantsData();
|
||||
showSuccess('Tenant deleted');
|
||||
} catch (e: any) {
|
||||
showError(e.message || 'Delete failed');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateUser = async () => {
|
||||
if (!editUserData) return;
|
||||
try {
|
||||
await userService.updateUserInfo(editUserData.userId, {
|
||||
username: editUserData.username,
|
||||
displayName: editUserData.displayName
|
||||
});
|
||||
showSuccess(t('featureUpdated'));
|
||||
setEditUserData(null);
|
||||
fetchUsers();
|
||||
} catch (error: any) {
|
||||
showError('Failed to update user');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteUser = async (userId: string) => {
|
||||
if (!confirm(t('confirmDeleteUser') || "Are you sure?")) return;
|
||||
try {
|
||||
await userService.deleteUser(userId);
|
||||
showSuccess(t('userDeletedSuccessfully'));
|
||||
fetchUsers();
|
||||
} catch (error: any) {
|
||||
showError(error.message || t('deleteUserFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleExportUsers = async () => {
|
||||
try {
|
||||
const blob = await userService.exportUsers();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `users_${new Date().toISOString().split('T')[0]}.xlsx`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
} catch (error) {
|
||||
console.error('Export users failed', error);
|
||||
showError(t('exportFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleImportUsers = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const result = await userService.importUsers(file);
|
||||
showSuccess(t('importSuccess').replace('$1', (result.success || 0).toString()).replace('$2', (result.failed || 0).toString()));
|
||||
fetchUsers();
|
||||
if (result.errors.length > 0) {
|
||||
console.warn('Import had errors:', result.errors);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Import users failed', error);
|
||||
showError(t('importFailed') + (error.response?.data?.message ? `: ${error.response.data.message}` : ''));
|
||||
} finally {
|
||||
// Reset input
|
||||
e.target.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveModel = async () => {
|
||||
if (!authToken) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await onUpdateModels(editingId === 'new' ? 'create' : 'update', modelFormData as ModelConfig);
|
||||
setEditingId(null);
|
||||
} catch (err) {
|
||||
setError('Update failed');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleModel = async (model: ModelConfig) => {
|
||||
if (currentUser?.role === 'TENANT_ADMIN') {
|
||||
const newEnabledIds = enabledModelIds.includes(model.id)
|
||||
? enabledModelIds.filter(id => id !== model.id)
|
||||
: [...enabledModelIds, model.id];
|
||||
try {
|
||||
await apiClient.put('/v1/admin/settings', { enabledModelIds: newEnabledIds });
|
||||
setEnabledModelIds(newEnabledIds);
|
||||
setLocalKbSettings((prev: any) => ({ ...prev, enabledModelIds: newEnabledIds }));
|
||||
showSuccess('Updated');
|
||||
} catch (e: any) {
|
||||
showError(e.message || 'Update failed');
|
||||
}
|
||||
return;
|
||||
}
|
||||
await onUpdateModels('update', { ...model, isEnabled: !model.isEnabled });
|
||||
};
|
||||
|
||||
const handleDeleteModel = async (id: string) => {
|
||||
if (await confirm(t('confirmDeleteModel'))) {
|
||||
await onUpdateModels('delete', { id } as ModelConfig);
|
||||
}
|
||||
};
|
||||
|
||||
const TenantTreeNode: React.FC<{
|
||||
tenant: Tenant;
|
||||
selectedTenantId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
onCreateSubtenant: (parentId: string) => void;
|
||||
depth?: number;
|
||||
}> = ({ tenant, selectedTenantId, onSelect, onCreateSubtenant, depth = 0 }) => {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const hasChildren = tenant.children && tenant.children.length > 0;
|
||||
const isSelected = selectedTenantId === tenant.id;
|
||||
|
||||
return (
|
||||
<div className="select-none">
|
||||
<div
|
||||
className={`group flex items-center gap-2 px-3 py-2 rounded-xl cursor-pointer transition-all ${isSelected ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-100' : 'hover:bg-slate-50 text-slate-600 hover:text-slate-900'}`}
|
||||
style={{ paddingLeft: `${depth * 1.5 + 0.75}rem` }}
|
||||
onClick={() => onSelect(tenant.id)}
|
||||
>
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
{hasChildren ? (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setCollapsed(!collapsed); }}
|
||||
className={`p-0.5 rounded-md hover:bg-black/10 transition-colors ${isSelected ? 'text-white/70' : 'text-slate-400'}`}
|
||||
>
|
||||
{collapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
|
||||
</button>
|
||||
) : (
|
||||
<div className="w-5" />
|
||||
)}
|
||||
<Building size={16} className={isSelected ? 'text-white' : 'text-slate-400'} />
|
||||
<span className="text-sm font-bold truncate">{tenant.name}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCreateSubtenant(tenant.id);
|
||||
}}
|
||||
className={`p-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-all ${isSelected ? 'hover:bg-white/20 text-white' : 'hover:bg-slate-200 text-slate-400 hover:text-indigo-600'}`}
|
||||
title={t('createSubOrg')}
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
</div>
|
||||
{hasChildren && !collapsed && (
|
||||
<div className="mt-1">
|
||||
{tenant.children?.map(child => (
|
||||
<TenantTreeNode
|
||||
key={child.id}
|
||||
tenant={child}
|
||||
selectedTenantId={selectedTenantId}
|
||||
onSelect={onSelect}
|
||||
onCreateSubtenant={onCreateSubtenant}
|
||||
depth={depth + 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getTypeLabel = (type: ModelType) => {
|
||||
switch (type) {
|
||||
case ModelType.LLM: return t('typeLLM');
|
||||
case ModelType.EMBEDDING: return t('typeEmbedding');
|
||||
case ModelType.RERANK: return t('typeRerank');
|
||||
case ModelType.VISION: return t('typeVision');
|
||||
default: return type;
|
||||
}
|
||||
};
|
||||
|
||||
// --- Rendering functions ---
|
||||
|
||||
const renderGeneralTab = () => (
|
||||
<div className="space-y-8 animate-in slide-in-from-right duration-300 max-w-2xl">
|
||||
|
||||
{/* Change password section */}
|
||||
<section className="bg-white p-6 rounded-lg border border-slate-200 shadow-sm">
|
||||
<h3 className="text-sm font-medium text-slate-800 mb-4 flex items-center gap-2">
|
||||
<Key className="w-4 h-4 text-blue-500" />
|
||||
{t('changePassword')}
|
||||
</h3>
|
||||
<form onSubmit={handleChangePassword} className="space-y-4 max-w-sm">
|
||||
<input type="hidden" name="username" value="current-user" autoComplete="username" />
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
name="currentPassword"
|
||||
placeholder={t('currentPassword')}
|
||||
value={passwordForm.current}
|
||||
onChange={e => setPasswordForm({ ...passwordForm, current: e.target.value })}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
name="newPassword"
|
||||
placeholder={t('newPassword')}
|
||||
value={passwordForm.new}
|
||||
onChange={e => setPasswordForm({ ...passwordForm, new: e.target.value })}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
placeholder={t('confirmPassword')}
|
||||
value={passwordForm.confirm}
|
||||
onChange={e => setPasswordForm({ ...passwordForm, confirm: e.target.value })}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
{passwordSuccess && <p className="text-xs text-green-600">{passwordSuccess}</p>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full py-2 bg-slate-800 text-white rounded-md text-sm hover:bg-slate-900 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? <Loader2 className="w-4 h-4 animate-spin mx-auto" /> : t('confirmChange')}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* 语言设置セクション */}
|
||||
<section className="bg-white p-6 rounded-lg border border-slate-200 shadow-sm">
|
||||
<h3 className="text-sm font-medium text-slate-800 mb-4 flex items-center gap-2">
|
||||
<Globe className="w-4 h-4 text-blue-500" />
|
||||
{t('languageSettings')}
|
||||
</h3>
|
||||
<div className="space-y-4 max-w-sm">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">
|
||||
{t('switchLanguage')}
|
||||
</label>
|
||||
<select
|
||||
value={language}
|
||||
onChange={async (e) => {
|
||||
const newLang = e.target.value as any;
|
||||
setLanguage(newLang);
|
||||
try {
|
||||
await settingsService.updateLanguage(newLang);
|
||||
showSuccess(t('confirm'));
|
||||
} catch (err) {
|
||||
console.error('Failed to update backend language preference:', err);
|
||||
}
|
||||
}}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none bg-white"
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="zh">中文 (Chinese)</option>
|
||||
<option value="ja">日本語 (Japanese)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div >
|
||||
);
|
||||
|
||||
const renderUserTab = () => (
|
||||
<div className="space-y-6 w-full">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<p className="text-xs text-slate-400 font-medium">{''}</p>
|
||||
</div>
|
||||
{currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleExportUsers}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-600 text-sm font-bold rounded-2xl hover:bg-slate-50 shadow-sm transition-all active:scale-95"
|
||||
title={t('exportUsers')}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">{t('exportUsers')}</span>
|
||||
</button>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
accept=".xlsx,.xls,.csv"
|
||||
onChange={handleImportUsers}
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
title={t('importUsers')}
|
||||
/>
|
||||
<button
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-600 text-sm font-bold rounded-2xl hover:bg-slate-50 shadow-sm transition-all active:scale-95"
|
||||
>
|
||||
<Upload className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">{t('importUsers')}</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAddUser(!showAddUser)}
|
||||
className="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white text-sm font-bold rounded-2xl hover:bg-indigo-700 shadow-lg shadow-indigo-100 transition-all active:scale-95"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
{t('addUser')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showAddUser && (
|
||||
<motion.form
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
onSubmit={handleCreateUser}
|
||||
className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-xl mb-8 space-y-5"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('usernamePlaceholder')}
|
||||
value={newUser.username}
|
||||
onChange={e => setNewUser({ ...newUser, username: e.target.value })}
|
||||
className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
required
|
||||
autoComplete="username"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('displayNamePlaceholder') || t('name')}
|
||||
value={newUser.displayName}
|
||||
onChange={e => setNewUser({ ...newUser, displayName: e.target.value })}
|
||||
className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
required
|
||||
autoComplete="name"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder={t('passwordPlaceholder')}
|
||||
value={newUser.password}
|
||||
onChange={e => setNewUser({ ...newUser, password: e.target.value })}
|
||||
className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div></div>
|
||||
<div className="flex gap-3">
|
||||
<button type="button" onClick={() => setShowAddUser(false)} className="px-5 py-2 text-xs font-bold text-slate-500 hover:text-slate-700">{t('cancel')}</button>
|
||||
<button type="submit" className="px-8 py-2 bg-slate-900 text-white rounded-xl text-xs font-black uppercase tracking-widest hover:bg-indigo-600 transition-all shadow-lg shadow-slate-100">{t('create')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.form>
|
||||
)}
|
||||
|
||||
{createPortal(
|
||||
<AnimatePresence>
|
||||
{passwordChangeUserData && (
|
||||
<div key="password-change-modal" className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm flex items-center justify-center z-[1000] p-6">
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.95, opacity: 0 }}
|
||||
className="bg-white rounded-3xl p-10 w-full max-w-md shadow-2xl border border-white/20"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h3 className="text-xl font-black text-slate-900 tracking-tight">{t('changeUserPassword')}</h3>
|
||||
<button onClick={() => setPasswordChangeUserData(null)} className="p-2 hover:bg-slate-100 rounded-xl transition-all">
|
||||
<X size={20} className="text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={(e) => { e.preventDefault(); handleUserPasswordChange(); }} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">
|
||||
{t('newPassword')}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={passwordChangeUserData.newPassword}
|
||||
onChange={(e) => setPasswordChangeUserData({ ...passwordChangeUserData, newPassword: e.target.value })}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-[14px] font-medium transition-all focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50"
|
||||
placeholder={t('enterNewPassword')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-4">
|
||||
<button type="button" onClick={() => setPasswordChangeUserData(null)} className="flex-1 py-3.5 text-slate-500 font-bold text-sm">{t('cancel')}</button>
|
||||
<button type="submit" className="flex-1 py-3.5 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-indigo-600 shadow-xl shadow-slate-100 transition-all">{t('confirmChange')}</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body
|
||||
)}
|
||||
|
||||
{/* Edit User Modal */}
|
||||
{createPortal(
|
||||
<AnimatePresence>
|
||||
{editUserData && (
|
||||
<div key="edit-user-modal" className="fixed inset-0 z-[1000] flex items-center justify-center bg-slate-900/40 backdrop-blur-sm p-4">
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.95, opacity: 0 }}
|
||||
className="bg-white rounded-3xl p-10 w-full max-w-md shadow-2xl border border-white/20"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h3 className="text-xl font-black text-slate-900 tracking-tight">{t('editUser')}</h3>
|
||||
<button onClick={() => setEditUserData(null)} className="p-2 hover:bg-slate-100 rounded-xl transition-all">
|
||||
<X size={20} className="text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={(e) => { e.preventDefault(); handleUpdateUser(); }} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">
|
||||
{t('username')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editUserData.username}
|
||||
onChange={(e) => setEditUserData({ ...editUserData, username: e.target.value })}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-[14px] font-medium transition-all focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50"
|
||||
placeholder={t('usernamePlaceholder')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">
|
||||
{t('displayName') || t('name')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editUserData.displayName}
|
||||
onChange={(e) => setEditUserData({ ...editUserData, displayName: e.target.value })}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-[14px] font-medium transition-all focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50"
|
||||
placeholder={t('displayNamePlaceholder') || t('namePlaceholder')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="py-2.5 px-4 bg-indigo-50 rounded-2xl border border-indigo-100/50">
|
||||
<p className="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-1">{t('globalUserNote') || "Note"}</p>
|
||||
<p className="text-[11px] text-indigo-700/70 leading-relaxed font-medium">
|
||||
{t('roleManagedInOrg') || "Roles are managed within organizations."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-4">
|
||||
<button type="button" onClick={() => setEditUserData(null)} className="flex-1 py-3.5 text-slate-500 font-bold text-sm">{t('cancel')}</button>
|
||||
<button type="submit" className="flex-1 py-3.5 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-indigo-600 shadow-xl shadow-slate-100 transition-all">{t('saveChanges')}</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body
|
||||
)}
|
||||
|
||||
<div className="w-full bg-white/70 backdrop-blur-md border border-slate-200/50 rounded-2xl overflow-hidden shadow-sm">
|
||||
<table className="w-full border-collapse text-left">
|
||||
<thead>
|
||||
<tr className="bg-slate-50/50 border-b border-slate-200/50">
|
||||
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('username')}</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('displayName') || t('name')}</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('organizations')}</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('createdAt')}</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">{t('actions')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
<AnimatePresence>
|
||||
{users.filter((u: any) => u.username !== 'admin').map((user: any, index: number) => {
|
||||
let IconComponent = User;
|
||||
let iconColors = 'bg-slate-50 text-slate-400';
|
||||
if (user.isAdmin) {
|
||||
IconComponent = Shield;
|
||||
iconColors = 'bg-red-50 text-red-600';
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.tr
|
||||
key={user.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.03 }}
|
||||
className="group hover:bg-slate-50/50 transition-all"
|
||||
>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${iconColors}`}>
|
||||
<IconComponent size={18} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="font-bold text-slate-900 truncate">{user.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="text-sm text-slate-600 truncate">{user.displayName || '-'}</p>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
{user.tenantMembers && user.tenantMembers.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{user.tenantMembers
|
||||
.filter((m: any) => m.tenant?.name !== 'Default')
|
||||
.map((m: any) => (
|
||||
<span
|
||||
key={m.tenantId}
|
||||
className="inline-flex items-center gap-1 px-2 py-0.5 bg-emerald-50 text-emerald-700 text-[9px] font-black rounded-md uppercase tracking-wider border border-emerald-100"
|
||||
>
|
||||
<Building size={8} />
|
||||
{m.tenant?.name || m.tenantId}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-[10px] text-slate-400 italic">{t('noOrganization')}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="text-[11px] font-medium text-slate-600">
|
||||
{new Date(user.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-all">
|
||||
{user.username !== 'admin' && (
|
||||
<>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setEditUserData({
|
||||
userId: user.id,
|
||||
username: user.username,
|
||||
displayName: user.displayName || ''
|
||||
});
|
||||
}}
|
||||
className="p-2 rounded-lg text-slate-400 hover:text-indigo-600 hover:bg-white shadow-sm transition-all"
|
||||
title={t('edit')}
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPasswordChangeUserData({ userId: user.id, newPassword: '' })}
|
||||
className="p-2 rounded-lg text-slate-400 hover:text-indigo-600 hover:bg-white shadow-sm transition-all"
|
||||
title={t('changeUserPassword')}
|
||||
>
|
||||
<Key className="w-4 h-4" />
|
||||
</button>
|
||||
{user.id !== currentUser?.id && (
|
||||
<button
|
||||
onClick={() => handleDeleteUser(user.id)}
|
||||
className="p-2 rounded-lg text-slate-400 hover:text-red-500 hover:bg-white shadow-sm transition-all"
|
||||
title={t('deleteUser')}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</motion.tr>
|
||||
);
|
||||
})}
|
||||
</AnimatePresence>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
current={userPage}
|
||||
total={userTotal}
|
||||
pageSize={USER_PAGE_SIZE}
|
||||
onChange={setUserPage}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderTenantsTab = () => {
|
||||
const tenantTree = buildTenantTree(tenants);
|
||||
const activeTenant = selectedTenantId ? tenants.find(t => t.id === selectedTenantId) : null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row gap-6 h-[calc(100vh-12rem)] animate-in fade-in duration-500">
|
||||
{/* Left: Organization Tree */}
|
||||
<div className="w-full lg:w-80 flex flex-col bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden min-h-[400px] lg:min-h-0">
|
||||
<div className="p-6 border-b border-slate-100 flex items-center justify-between shrink-0">
|
||||
<div>
|
||||
<h3 className="font-black text-slate-900 text-lg tracking-tight">{t('orgManagement')}</h3>
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{t('globalTenantControl')}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setNewTenant({ name: '', domain: '', parentId: null });
|
||||
setEditingTenant(null);
|
||||
setShowCreateTenant(true);
|
||||
}}
|
||||
className="p-2 bg-slate-900 text-white rounded-xl hover:bg-slate-700 transition-all"
|
||||
>
|
||||
<Plus size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-1 custom-scrollbar">
|
||||
{tenantTree.length > 0 ? (
|
||||
tenantTree.map(t => (
|
||||
<TenantTreeNode
|
||||
key={t.id}
|
||||
tenant={t}
|
||||
selectedTenantId={selectedTenantId}
|
||||
onSelect={(id) => {
|
||||
if (id !== selectedTenantId) {
|
||||
setSelectedTenantId(id);
|
||||
setMemberPage(1);
|
||||
setUserPage(1);
|
||||
}
|
||||
}}
|
||||
onCreateSubtenant={(parentId) => {
|
||||
setNewTenant({ name: '', domain: '', parentId });
|
||||
setEditingTenant(null);
|
||||
setShowCreateTenant(true);
|
||||
}}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="py-20 text-center">
|
||||
<Building size={32} className="mx-auto text-slate-200 mb-3" />
|
||||
<p className="text-xs font-black text-slate-300 uppercase tracking-widest">{t('noOrganizations')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-slate-50 border-t border-slate-100 shrink-0">
|
||||
<div className="flex items-center gap-3 p-3 bg-white border border-slate-200 rounded-2xl shadow-sm">
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center text-blue-600">
|
||||
<Building size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('totalTenants')}</p>
|
||||
<p className="text-xl font-black text-slate-900">{stats.tenants}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: User List & Management */}
|
||||
<div className="flex-1 flex flex-col bg-white border border-slate-200 rounded-3xl shadow-xl overflow-hidden min-h-[600px] lg:min-h-0">
|
||||
{activeTenant ? (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Organization Header */}
|
||||
<div className="p-8 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between shrink-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-14 h-14 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center justify-center text-indigo-600">
|
||||
<Building size={28} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-2xl font-black text-slate-900 tracking-tight">{activeTenant.name}</h2>
|
||||
<span className="px-2 py-0.5 bg-indigo-50 text-indigo-600 rounded text-[9px] font-black uppercase tracking-widest border border-indigo-100">{t('activeOrg')}</span>
|
||||
</div>
|
||||
<p className="text-xs font-medium text-slate-400">{activeTenant.domain || t('noCustomDomain')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingTenant(activeTenant);
|
||||
setNewTenant({
|
||||
name: activeTenant.name,
|
||||
domain: activeTenant.domain || '',
|
||||
parentId: activeTenant.parentId || null
|
||||
});
|
||||
setShowCreateTenant(true);
|
||||
}}
|
||||
className="p-2.5 bg-white border border-slate-200 text-slate-600 rounded-xl hover:border-indigo-500 hover:text-indigo-600 transition-all shadow-sm"
|
||||
title={t('orgSettings')}
|
||||
>
|
||||
<SettingsIcon size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRemoveTenant(activeTenant.id)}
|
||||
className="p-2.5 bg-white border border-slate-200 text-slate-400 hover:text-red-500 hover:border-red-500 transition-all shadow-sm"
|
||||
title={t('deleteOrg')}
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Split: Members vs All Users */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Current Members */}
|
||||
<div className="flex-1 flex flex-col border-r border-slate-100 overflow-hidden">
|
||||
<div className="p-6 border-b border-slate-50 flex items-center justify-between shrink-0">
|
||||
<h4 className="text-xs font-black text-slate-400 uppercase tracking-widest">{t('orgMembers')}</h4>
|
||||
<span className="text-[10px] font-black px-2 py-0.5 bg-slate-100 text-slate-500 rounded-full">
|
||||
{t('membersCount').replace('$1', (memberTotal || 0).toString())}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-6 scrollbar-hide">
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{tenantMembers?.map((m: any) => (
|
||||
<div key={m.id} className="p-4 bg-slate-50/50 border border-slate-100 rounded-2xl flex items-center justify-between group hover:bg-white hover:shadow-sm transition-all hover:border-slate-200">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center text-slate-400 shadow-sm">
|
||||
<User size={18} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-black text-slate-900 truncate">
|
||||
{m.user?.displayName || m.user?.username || m.userId}
|
||||
</p>
|
||||
<select
|
||||
value={m.role}
|
||||
onChange={(e) => handleUpdateMemberRole(activeTenant.id, m.userId, e.target.value)}
|
||||
className={`text-[9px] font-black uppercase tracking-widest bg-transparent border-none outline-none cursor-pointer hover:bg-slate-100 rounded px-1 transition-colors ${m.role === 'TENANT_ADMIN' ? 'text-indigo-500' : 'text-slate-400'}`}
|
||||
>
|
||||
<option value="USER">{t('roleRegularUser')}</option>
|
||||
<option value="TENANT_ADMIN">{t('roleTenantAdmin')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleRemoveMember(activeTenant.id, m.userId)}
|
||||
className="p-2 text-slate-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{(!tenantMembers || tenantMembers.length === 0) && (
|
||||
<div className="py-20 text-center">
|
||||
<Users size={24} className="mx-auto text-slate-200 mb-2" />
|
||||
<p className="text-[10px] font-bold text-slate-300 uppercase tracking-wider">{t('noMembersAssigned')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Pagination
|
||||
current={memberPage}
|
||||
total={memberTotal}
|
||||
pageSize={MEMBER_PAGE_SIZE}
|
||||
onChange={setMemberPage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add New Users (Right side of specific tenant view) */}
|
||||
<div className="w-72 flex flex-col bg-slate-50/30 overflow-hidden shrink-0">
|
||||
<div className="p-6 border-b border-slate-100 shrink-0">
|
||||
<h4 className="text-xs font-black text-slate-900 uppercase tracking-widest mb-3">{t('addMembers')}</h4>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
|
||||
<input
|
||||
className="w-full pl-9 pr-3 py-2 bg-white border border-slate-200 rounded-xl text-xs outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
|
||||
placeholder={t('searchSystemUsers')}
|
||||
value={userSearchQuery}
|
||||
onChange={e => setUserSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 flex gap-1 p-1 bg-white border border-slate-200 rounded-xl">
|
||||
<button
|
||||
onClick={() => setBindingRole('USER')}
|
||||
className={`flex-1 py-1.5 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${bindingRole === 'USER' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}
|
||||
>
|
||||
{t('roleRegularUser')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBindingRole('TENANT_ADMIN')}
|
||||
className={`flex-1 py-1.5 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${bindingRole === 'TENANT_ADMIN' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}
|
||||
>
|
||||
{t('roleTenantAdmin')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-2">
|
||||
{users
|
||||
.filter(u =>
|
||||
u.username !== 'admin' &&
|
||||
u.username.toLowerCase().includes(userSearchQuery.toLowerCase())
|
||||
)
|
||||
.map(u => {
|
||||
const isAlreadyMember = allMemberIds.has(u.id);
|
||||
return (
|
||||
<button
|
||||
key={u.id}
|
||||
onClick={() => !isAlreadyMember && handleAddMember(activeTenant.id, u.id, bindingRole)}
|
||||
disabled={isAlreadyMember}
|
||||
className={`w-full p-3 border rounded-xl flex items-center justify-between group transition-all ${isAlreadyMember
|
||||
? 'bg-slate-50 border-slate-100 cursor-not-allowed opacity-60'
|
||||
: 'bg-white border-slate-100 hover:border-indigo-500 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<div className={`w-8 h-8 rounded-lg flex items-center justify-center transition-colors ${isAlreadyMember
|
||||
? 'bg-slate-100 text-slate-300'
|
||||
: 'bg-slate-50 text-slate-400 group-hover:bg-indigo-50 group-hover:text-indigo-600'
|
||||
}`}>
|
||||
<User size={14} />
|
||||
</div>
|
||||
<span className={`text-[13px] font-bold truncate ${isAlreadyMember ? 'text-slate-400' : 'text-slate-700'}`}>
|
||||
{u.displayName || u.username}
|
||||
</span>
|
||||
</div>
|
||||
{isAlreadyMember ? (
|
||||
<Check size={14} className="text-emerald-500" />
|
||||
) : (
|
||||
<Plus size={14} className="text-slate-300 group-hover:text-indigo-600" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})
|
||||
}
|
||||
<Pagination
|
||||
current={userPage}
|
||||
total={userTotal}
|
||||
pageSize={USER_PAGE_SIZE}
|
||||
onChange={setUserPage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create Tenant Modal (Nested in Tab Content for scope) */}
|
||||
{showCreateTenant && (
|
||||
<div className="fixed inset-0 z-[120] bg-slate-900/40 backdrop-blur-sm flex items-center justify-center p-4 text-left">
|
||||
<motion.div initial={{ scale: 0.95, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="bg-white rounded-3xl p-8 w-full max-w-md shadow-2xl">
|
||||
<h3 className="text-xl font-black text-slate-900 mb-6">{editingTenant ? t('editOrg') : t('newTenant')}</h3>
|
||||
<form onSubmit={handleCreateTenant} className="space-y-5">
|
||||
<div>
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('tenantName')}</label>
|
||||
<input className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm" placeholder={t('tenantName')} value={newTenant.name} onChange={e => setNewTenant({ ...newTenant, name: e.target.value })} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('domainOptional')}</label>
|
||||
<input className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm" placeholder={t('domainOptional')} value={newTenant.domain} onChange={e => setNewTenant({ ...newTenant, domain: e.target.value })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('parentOrg')}</label>
|
||||
{!editingTenant ? (
|
||||
<div className="w-full mt-1 px-4 py-3 bg-slate-100 border border-slate-200 rounded-2xl text-sm text-slate-500 font-bold">
|
||||
{newTenant.parentId ? tenants.find(t => t.id === newTenant.parentId)?.name : t('noneRoot')}
|
||||
</div>
|
||||
) : (
|
||||
<select
|
||||
className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-indigo-500/20"
|
||||
value={newTenant.parentId || ''}
|
||||
onChange={e => setNewTenant({ ...newTenant, parentId: e.target.value || null })}
|
||||
>
|
||||
<option value="">{t('noneRoot')}</option>
|
||||
{tenants.filter(t => t.id !== editingTenant?.id).map(t => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-2">
|
||||
<button type="button" onClick={() => { setShowCreateTenant(false); setEditingTenant(null); }} className="flex-1 py-3 text-slate-500 font-bold text-sm">{t('cancel')}</button>
|
||||
<button type="submit" className="flex-1 py-3 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-indigo-600">{editingTenant ? t('update') : t('create')}</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-12 text-center bg-slate-50/30">
|
||||
<div className="w-24 h-24 rounded-[2rem] bg-indigo-50 flex items-center justify-center text-indigo-400 mb-6 shadow-xl shadow-indigo-100/50">
|
||||
<Building size={48} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-black text-slate-900 tracking-tight mb-2">{t('selectOrg')}</h2>
|
||||
<p className="text-sm text-slate-400 max-w-xs font-medium leading-relaxed">{t('selectOrgDesc')}</p>
|
||||
|
||||
<div className="mt-12 grid grid-cols-2 gap-4 w-full max-w-lg">
|
||||
<div className="p-6 bg-white border border-slate-200 rounded-3xl text-left shadow-sm">
|
||||
<div className="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center text-orange-600 mb-4">
|
||||
<Users size={20} />
|
||||
</div>
|
||||
<p className="text-xl font-black text-slate-900">{stats.users}</p>
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('totalSystemUsers')}</p>
|
||||
</div>
|
||||
<div className="p-6 bg-white border border-slate-200 rounded-3xl text-left shadow-sm">
|
||||
<div className="w-10 h-10 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-600 mb-4">
|
||||
<Shield size={20} />
|
||||
</div>
|
||||
<p className="text-xl font-black text-slate-900">{tenants.filter(t => t.parentId === null).length}</p>
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('rootOrgs')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scope Modal for Create even when no selection */}
|
||||
{showCreateTenant && (
|
||||
<div className="fixed inset-0 z-[120] bg-slate-900/40 backdrop-blur-sm flex items-center justify-center p-4 text-left">
|
||||
<motion.div initial={{ scale: 0.95, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="bg-white rounded-3xl p-8 w-full max-w-md shadow-2xl">
|
||||
<h3 className="text-xl font-black text-slate-900 mb-6">{t('newTenant')}</h3>
|
||||
<form onSubmit={handleCreateTenant} className="space-y-5">
|
||||
<div>
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('tenantName')}</label>
|
||||
<input className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm" placeholder={t('tenantName')} value={newTenant.name} onChange={e => setNewTenant({ ...newTenant, name: e.target.value })} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('domainOptional')}</label>
|
||||
<input className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm" placeholder={t('domainOptional')} value={newTenant.domain} onChange={e => setNewTenant({ ...newTenant, domain: e.target.value })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('parentOrg')}</label>
|
||||
<select
|
||||
className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-indigo-500/20"
|
||||
value={newTenant.parentId || ''}
|
||||
onChange={e => setNewTenant({ ...newTenant, parentId: e.target.value || null })}
|
||||
>
|
||||
<option value="">{t('noneRoot')}</option>
|
||||
{tenants.map(t => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowCreateTenant(false);
|
||||
setNewTenant({ name: '', domain: '', parentId: null });
|
||||
}}
|
||||
className="flex-1 py-3 text-slate-500 font-bold text-sm"
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
<button type="submit" className="flex-1 py-3 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-indigo-600">{t('create')}</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderKnowledgeBaseTab = () => (
|
||||
<div className="space-y-8 animate-in slide-in-from-right duration-300 w-full max-w-5xl pb-10">
|
||||
{localKbSettings ? (
|
||||
<>
|
||||
{/* Save/Cancel Bar */}
|
||||
<div className="flex justify-end gap-3 sticky top-0 z-20 py-4 bg-white/50 backdrop-blur-sm border-b border-slate-100 mb-6">
|
||||
<button
|
||||
onClick={handleCancelKbSettings}
|
||||
disabled={isSavingKbSettings || JSON.stringify(localKbSettings) === JSON.stringify(kbSettings)}
|
||||
className="px-6 py-2 text-sm font-bold text-slate-500 hover:text-slate-700 disabled:opacity-30"
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveKbSettings}
|
||||
disabled={isSavingKbSettings || JSON.stringify(localKbSettings) === JSON.stringify(kbSettings)}
|
||||
className="flex items-center gap-2 px-8 py-2 bg-indigo-600 text-white text-sm font-black uppercase tracking-widest rounded-2xl hover:bg-indigo-700 shadow-lg shadow-indigo-100 transition-all active:scale-95 disabled:opacity-50"
|
||||
>
|
||||
{isSavingKbSettings ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />}
|
||||
{t('saveChanges')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Model Configuration */}
|
||||
<section className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-sm space-y-6">
|
||||
<div className="flex items-center gap-3 text-slate-900 font-black uppercase tracking-widest text-[11px] border-b border-slate-100 pb-4">
|
||||
<div className="w-8 h-8 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600">
|
||||
<Cpu size={16} />
|
||||
</div>
|
||||
{t('modelConfiguration')}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">{t('defaultLLMModel')}</label>
|
||||
<select
|
||||
value={localKbSettings.selectedLLMId || ''}
|
||||
onChange={(e) => handleUpdateKbSettings('selectedLLMId', e.target.value)}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all cursor-pointer appearance-none"
|
||||
>
|
||||
<option value="">--- {t('selectLLMModel')} ---</option>
|
||||
{models.filter(m => m.type === ModelType.LLM).map(m => (
|
||||
<option key={m.id} value={m.id}>{m.name} ({m.modelId})</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">{t('embeddingModel')}</label>
|
||||
<select
|
||||
value={localKbSettings.selectedEmbeddingId || ''}
|
||||
onChange={(e) => handleUpdateKbSettings('selectedEmbeddingId', e.target.value)}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
|
||||
>
|
||||
<option value="">--- {t('selectEmbeddingModel')} ---</option>
|
||||
{models.filter(m => m.type === ModelType.EMBEDDING).map(m => (
|
||||
<option key={m.id} value={m.id}>{m.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">{t('rerankModel')}</label>
|
||||
<select
|
||||
value={localKbSettings.selectedRerankId || ''}
|
||||
onChange={(e) => handleUpdateKbSettings('selectedRerankId', e.target.value)}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
|
||||
>
|
||||
<option value="">--- {t('selectRerankModel')} ---</option>
|
||||
{models.filter(m => m.type === ModelType.RERANK).map(m => (
|
||||
<option key={m.id} value={m.id}>{m.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">
|
||||
{t('defaultVisionModel')}
|
||||
<span className="ml-1 text-[8px] opacity-60">({t('typeVision')})</span>
|
||||
</label>
|
||||
<select
|
||||
value={localKbSettings.selectedVisionId || ''}
|
||||
onChange={(e) => handleUpdateKbSettings('selectedVisionId', e.target.value)}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
|
||||
>
|
||||
<option value="">--- {t('selectVisionModel')} ---</option>
|
||||
{models.filter(m => m.type === ModelType.VISION || m.supportsVision).map(m => (
|
||||
<option key={m.id} value={m.id}>{m.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Indexing & Chunking Configuration */}
|
||||
<section className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-sm space-y-6">
|
||||
<div className="flex items-center gap-3 text-slate-900 font-black uppercase tracking-widest text-[11px] border-b border-slate-100 pb-4">
|
||||
<div className="w-8 h-8 rounded-xl bg-orange-50 flex items-center justify-center text-orange-600">
|
||||
<BookOpen size={16} />
|
||||
</div>
|
||||
{t('indexingChunkingConfig')}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<div className="flex justify-between mb-3 px-1">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('chunkSize')}</label>
|
||||
<span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.chunkSize || 1000}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="100"
|
||||
max="8192"
|
||||
step="100"
|
||||
value={localKbSettings.chunkSize || 1000}
|
||||
onChange={(e) => handleUpdateKbSettings('chunkSize', parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between mb-3 px-1">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('chunkOverlap')}</label>
|
||||
<span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.chunkOverlap || 100}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="2048"
|
||||
step="10"
|
||||
value={localKbSettings.chunkOverlap || 100}
|
||||
onChange={(e) => handleUpdateKbSettings('chunkOverlap', parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Chat Hyperparameters */}
|
||||
<section className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-sm space-y-6">
|
||||
<div className="flex items-center gap-3 text-slate-900 font-black uppercase tracking-widest text-[11px] border-b border-slate-100 pb-4">
|
||||
<div className="w-8 h-8 rounded-xl bg-pink-50 flex items-center justify-center text-pink-600">
|
||||
<Sparkles size={16} />
|
||||
</div>
|
||||
{t('chatHyperparameters')}
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<div className="flex justify-between mb-3 px-1">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('temperature')}</label>
|
||||
<span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.temperature}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
value={localKbSettings.temperature || 0.7}
|
||||
onChange={(e) => handleUpdateKbSettings('temperature', parseFloat(e.target.value))}
|
||||
className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
<div className="flex justify-between mt-2 px-1 text-[9px] font-bold text-slate-300 uppercase tracking-tighter">
|
||||
<span>{t('precise')}</span>
|
||||
<span>{t('creative')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">{t('maxResponseTokens')}</label>
|
||||
<input
|
||||
type="number"
|
||||
value={localKbSettings.maxTokens || 2000}
|
||||
onChange={(e) => handleUpdateKbSettings('maxTokens', parseInt(e.target.value))}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Retrieval & Search Settings */}
|
||||
<section className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-sm space-y-6">
|
||||
<div className="flex items-center gap-3 text-slate-900 font-black uppercase tracking-widest text-[11px] border-b border-slate-100 pb-4">
|
||||
<div className="w-8 h-8 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-600">
|
||||
<Database size={16} />
|
||||
</div>
|
||||
{t('retrievalSearchSettings')}
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<div className="flex justify-between mb-3 px-1">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('topK')}</label>
|
||||
<span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.topK}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="50"
|
||||
step="1"
|
||||
value={localKbSettings.topK || 10}
|
||||
onChange={(e) => handleUpdateKbSettings('topK', parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between mb-3 px-1">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('similarityThreshold')}</label>
|
||||
<span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.similarityThreshold}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value={localKbSettings.similarityThreshold || 0.5}
|
||||
onChange={(e) => handleUpdateKbSettings('similarityThreshold', parseFloat(e.target.value))}
|
||||
className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 pt-4 border-t border-slate-100">
|
||||
<div className="flex items-center justify-between p-5 bg-slate-50/50 rounded-2xl border border-slate-200/30 transition-all hover:bg-white hover:border-indigo-100">
|
||||
<div>
|
||||
<div className="text-sm font-bold text-slate-800">{t('enableHybridSearch')}</div>
|
||||
<div className="text-[10px] text-slate-400 font-medium">{t('hybridSearchDesc')}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleUpdateKbSettings('enableFullTextSearch', !localKbSettings.enableFullTextSearch)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ${localKbSettings.enableFullTextSearch ? 'bg-indigo-600 shadow-md shadow-indigo-100' : 'bg-slate-300'}`}
|
||||
>
|
||||
<span className={`${localKbSettings.enableFullTextSearch ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{localKbSettings.enableFullTextSearch && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="p-5 bg-indigo-50/30 rounded-2xl border border-indigo-100/50 space-y-4"
|
||||
>
|
||||
<div className="flex justify-between mb-2 px-1">
|
||||
<label className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">{t('hybridWeight')}</label>
|
||||
<span className="text-sm font-black text-indigo-600">{localKbSettings.hybridVectorWeight || 0.5}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value={localKbSettings.hybridVectorWeight || 0.5}
|
||||
onChange={(e) => handleUpdateKbSettings('hybridVectorWeight', parseFloat(e.target.value))}
|
||||
className="w-full h-2 bg-indigo-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
<div className="flex justify-between mt-1 px-1 text-[9px] font-bold text-indigo-300 uppercase">
|
||||
<span>{t('pureText')}</span>
|
||||
<span>{t('pureVector')}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="flex items-center justify-between p-5 bg-slate-50/50 rounded-2xl border border-slate-200/30 transition-all hover:bg-white hover:border-indigo-100">
|
||||
<div>
|
||||
<div className="text-sm font-bold text-slate-800">{t('enableQueryExpansion')}</div>
|
||||
<div className="text-[10px] text-slate-400 font-medium">{t('queryExpansionDesc')}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleUpdateKbSettings('enableQueryExpansion', !localKbSettings.enableQueryExpansion)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ${localKbSettings.enableQueryExpansion ? 'bg-indigo-600 shadow-md shadow-indigo-100' : 'bg-slate-300'}`}
|
||||
>
|
||||
<span className={`${localKbSettings.enableQueryExpansion ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-5 bg-slate-50/50 rounded-2xl border border-slate-200/30 transition-all hover:bg-white hover:border-indigo-100">
|
||||
<div>
|
||||
<div className="text-sm font-bold text-slate-800">{t('enableHyDE')}</div>
|
||||
<div className="text-[10px] text-slate-400 font-medium">{t('hydeDesc')}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleUpdateKbSettings('enableHyDE', !localKbSettings.enableHyDE)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ${localKbSettings.enableHyDE ? 'bg-indigo-600 shadow-md shadow-indigo-100' : 'bg-slate-300'}`}
|
||||
>
|
||||
<span className={`${localKbSettings.enableHyDE ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-5 bg-slate-50/50 rounded-2xl border border-slate-200/30 transition-all hover:bg-white hover:border-indigo-100">
|
||||
<div>
|
||||
<div className="text-sm font-bold text-slate-800">{t('enableReranking')}</div>
|
||||
<div className="text-[10px] text-slate-400 font-medium">{t('rerankingDesc')}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleUpdateKbSettings('enableRerank', !localKbSettings.enableRerank)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ${localKbSettings.enableRerank ? 'bg-indigo-600 shadow-md shadow-indigo-100' : 'bg-slate-300'}`}
|
||||
>
|
||||
<span className={`${localKbSettings.enableRerank ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{localKbSettings.enableRerank && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="p-5 bg-indigo-50/30 rounded-2xl border border-indigo-100/50 space-y-4"
|
||||
>
|
||||
<div className="flex justify-between mb-2 px-1">
|
||||
<label className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">{t('rerankSimilarityThreshold')}</label>
|
||||
<span className="text-sm font-black text-indigo-600">{localKbSettings.rerankSimilarityThreshold || 0.5}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value={localKbSettings.rerankSimilarityThreshold || 0.5}
|
||||
onChange={(e) => handleUpdateKbSettings('rerankSimilarityThreshold', parseFloat(e.target.value))}
|
||||
className="w-full h-2 bg-indigo-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
<div className="flex justify-between mt-1 px-1 text-[9px] font-bold text-indigo-300 uppercase">
|
||||
<span>{t('broad')}</span>
|
||||
<span>{t('strict')}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-20 space-y-4">
|
||||
<Loader2 size={40} className="animate-spin text-indigo-600 opacity-20" />
|
||||
<p className="text-sm font-medium text-slate-400 animate-pulse">{t('loading')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderModelTab = () => (
|
||||
<div className="w-full space-y-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
</div>
|
||||
{!editingId && currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<button
|
||||
onClick={() => { setEditingId('new'); setModelFormData({ type: ModelType.LLM, baseUrl: 'http://localhost:11434/v1', modelId: 'llama3', name: '', dimensions: 1536 }); }}
|
||||
className="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white text-sm font-bold rounded-2xl hover:bg-indigo-700 shadow-lg shadow-indigo-100 transition-all active:scale-95"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
{t('mmAddBtn')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editingId ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white/90 backdrop-blur-md p-10 rounded-3xl border border-slate-200/50 shadow-xl space-y-8"
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<div className="w-12 h-12 rounded-2xl bg-indigo-50 flex items-center justify-center text-indigo-600">
|
||||
<Cpu className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-slate-900 tracking-tight">{editingId === 'new' ? t('mmAddBtn') : t('mmEdit')}</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormName')} *</label>
|
||||
<input className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all" value={modelFormData.name || ''} onChange={e => setModelFormData({ ...modelFormData, name: e.target.value })} disabled={isLoading} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormModelId')} *</label>
|
||||
<input className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-mono focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all" value={modelFormData.modelId || ''} onChange={e => setModelFormData({ ...modelFormData, modelId: e.target.value })} disabled={isLoading} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormType')} *</label>
|
||||
<select className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all appearance-none" value={modelFormData.type} onChange={e => setModelFormData({ ...modelFormData, type: e.target.value as ModelType })} disabled={isLoading}>
|
||||
<option value={ModelType.LLM}>{t('typeLLM')}</option>
|
||||
<option value={ModelType.EMBEDDING}>{t('typeEmbedding')}</option>
|
||||
<option value={ModelType.RERANK}>{t('typeRerank')}</option>
|
||||
<option value={ModelType.VISION}>{t('typeVision')}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormBaseUrl')} *</label>
|
||||
<input className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-mono focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all" value={modelFormData.baseUrl || ''} onChange={e => setModelFormData({ ...modelFormData, baseUrl: e.target.value })} disabled={isLoading} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormApiKey')}</label>
|
||||
<input
|
||||
type="password"
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-mono focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
value={modelFormData.apiKey || ''}
|
||||
onChange={e => setModelFormData({ ...modelFormData, apiKey: e.target.value })}
|
||||
disabled={isLoading}
|
||||
placeholder={t('mmFormApiKeyPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{modelFormData.type === ModelType.EMBEDDING && (
|
||||
<div className="grid grid-cols-2 gap-6 p-6 bg-slate-50 rounded-3xl border border-slate-200/50">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('maxInput')}</label>
|
||||
<input type="number" className="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-sm font-bold" value={modelFormData.maxInputTokens || 8191} onChange={e => setModelFormData({ ...modelFormData, maxInputTokens: parseInt(e.target.value) })} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('dimensions')}</label>
|
||||
<input type="number" className="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-sm font-bold" value={modelFormData.dimensions || 1536} onChange={e => setModelFormData({ ...modelFormData, dimensions: parseInt(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-3 pt-4">
|
||||
<button onClick={() => { setEditingId(null); setError(null); }} className="px-6 py-3 text-sm font-bold text-slate-500 hover:text-slate-700">{t('mmCancel')}</button>
|
||||
<button onClick={handleSaveModel} className="px-10 py-3 bg-indigo-600 text-white rounded-2xl font-black uppercase tracking-widest text-xs shadow-xl shadow-indigo-100 transition-all active:scale-95 flex items-center gap-2" disabled={isLoading}>
|
||||
{isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
|
||||
{t('mmSave')}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-5 overflow-y-auto pr-2 pb-6 scrollbar-hide">
|
||||
<AnimatePresence>
|
||||
{models.map((model, index) => (
|
||||
<motion.div
|
||||
key={model.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
className="bg-white/70 backdrop-blur-md border border-slate-200/50 rounded-[2rem] p-6 flex flex-col justify-between group hover:shadow-xl hover:shadow-indigo-500/5 hover:border-indigo-500/30 transition-all duration-300 relative overflow-hidden"
|
||||
>
|
||||
{/* Subtle background pattern/glow */}
|
||||
<div className="absolute -top-12 -right-12 w-32 h-32 bg-indigo-500/5 rounded-full blur-3xl group-hover:bg-indigo-500/10 transition-all duration-500" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-start justify-between mb-5">
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center transition-all duration-500 ${model.isEnabled !== false ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-100 rotate-0 group-hover:rotate-6' : 'bg-slate-100 text-slate-400 opacity-60'}`}>
|
||||
<Cpu size={26} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="flex gap-1 items-center bg-slate-50 p-1 rounded-xl border border-slate-100/50">
|
||||
<button
|
||||
onClick={() => handleToggleModel(model)}
|
||||
className={`p-1.5 rounded-lg transition-all ${((currentUser?.role === 'SUPER_ADMIN' ? !!model.isEnabled : enabledModelIds.includes(model.id))) ? 'text-indigo-600 bg-white shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}
|
||||
title={((currentUser?.role === 'SUPER_ADMIN' ? !!model.isEnabled : enabledModelIds.includes(model.id))) ? t('modelEnabled') : t('modelDisabled')}
|
||||
>
|
||||
{((currentUser?.role === 'SUPER_ADMIN' ? !!model.isEnabled : enabledModelIds.includes(model.id))) ? <ToggleRight size={24} /> : <ToggleLeft size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 mb-6">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<h4 className="font-black text-slate-900 text-lg tracking-tight truncate">{model.name}</h4>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[9px] font-black bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded-lg uppercase tracking-wider border border-indigo-100/50">
|
||||
{getTypeLabel(model.type)}
|
||||
</span>
|
||||
{model.isDefault && (
|
||||
<span className="text-[9px] font-black bg-amber-50 text-amber-600 px-2 py-0.5 rounded-lg uppercase tracking-wider border border-amber-100/50 flex items-center gap-1">
|
||||
<Sparkles size={8} /> {t('defaultBadge')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[11px] font-mono text-slate-400 mt-2 truncate bg-slate-50 px-2 py-1 rounded-lg border border-slate-100/50 inline-block max-w-full">
|
||||
{model.modelId}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Additional info grid */}
|
||||
<div className="grid grid-cols-2 gap-3 mb-6">
|
||||
{model.type === ModelType.EMBEDDING && (
|
||||
<>
|
||||
<div className="bg-slate-50/50 p-2.5 rounded-2xl border border-slate-100/50">
|
||||
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">{t('dims')}</span>
|
||||
<span className="text-xs font-bold text-slate-700">{model.dimensions || '-'}</span>
|
||||
</div>
|
||||
<div className="bg-slate-50/50 p-2.5 rounded-2xl border border-slate-100/50">
|
||||
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">{t('ctx')}</span>
|
||||
<span className="text-xs font-bold text-slate-700">{model.maxInputTokens || '-'}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{model.type === ModelType.LLM && (
|
||||
<div className="col-span-2 bg-slate-50/50 p-2.5 rounded-2xl border border-slate-100/50 flex items-center justify-between">
|
||||
<span className="text-[8px] font-black text-slate-400 uppercase tracking-widest">{t('baseApi')}</span>
|
||||
<span className="text-[9px] font-mono font-medium text-slate-600 max-w-[140px] truncate">{model.baseUrl}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-100/50 relative z-10">
|
||||
<div className="flex items-center gap-1 text-[10px] font-bold text-slate-400">
|
||||
<SettingsIcon size={12} />
|
||||
{t('configured')}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => { setEditingId(model.id); setModelFormData({ ...model }); }}
|
||||
className="w-9 h-9 flex items-center justify-center rounded-xl bg-slate-50 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 hover:shadow-sm transition-all"
|
||||
>
|
||||
<Edit2 size={15} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteModel(model.id)}
|
||||
className="w-9 h-9 flex items-center justify-center rounded-xl bg-slate-50 text-slate-400 hover:text-red-500 hover:bg-red-50 hover:shadow-sm transition-all"
|
||||
>
|
||||
<Trash2 size={15} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
|
||||
{models.length === 0 && (
|
||||
<div className="bg-white/50 border-2 border-dashed border-slate-200 rounded-3xl p-16 text-center">
|
||||
<Cpu className="w-12 h-12 text-slate-200 mx-auto mb-4" />
|
||||
<p className="text-slate-400 font-bold uppercase tracking-widest text-xs">{t('mmEmpty')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-full bg-[#FCFDFF] overflow-hidden relative">
|
||||
{/* Settings Sidebar */}
|
||||
<div className="w-64 bg-slate-50/50 border-r border-slate-200/60 flex flex-col shrink-0 z-20">
|
||||
<div className="p-6 pb-2">
|
||||
<h2 className="text-lg font-bold text-slate-900 tracking-tight">{t('tabSettings')}</h2>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-3 space-y-1">
|
||||
<button
|
||||
onClick={() => setActiveTab('general')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'general' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<SettingsIcon size={18} />
|
||||
{t('generalSettings')}
|
||||
</button>
|
||||
{currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<button
|
||||
onClick={() => setActiveTab('user')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'user' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<UserCircle size={18} />
|
||||
{t('userManagement')}
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setActiveTab('model')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'model' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<HardDrive size={18} />
|
||||
{t('modelManagement')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('knowledge_base')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'knowledge_base' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<Database size={18} />
|
||||
{t('sidebarTitle')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<button
|
||||
onClick={() => setActiveTab('tenants')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'tenants' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<LayoutGrid size={18} />
|
||||
{t('navTenants')}
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setActiveTab('assessment_templates')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'assessment_templates' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<FileText size={18} />
|
||||
{t('assessmentTemplates')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 flex flex-col min-w-0 h-full overflow-hidden relative bg-white z-10">
|
||||
<div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 leading-tight">
|
||||
{activeTab === 'general' ? t('generalSettings') : activeTab === 'user' ? t('userManagement') : activeTab === 'model' ? t('modelManagement') : activeTab === 'knowledge_base' ? t('sidebarTitle') : activeTab === 'tenants' ? t('navTenants') : t('assessmentTemplates')}
|
||||
</h1>
|
||||
<p className="text-[15px] text-slate-500 mt-1">
|
||||
{activeTab === 'general' ? t('generalSettingsSubtitle') : activeTab === 'user' ? t('userManagementSubtitle') : activeTab === 'model' ? t('modelManagementSubtitle') : activeTab === 'knowledge_base' ? t('kbSettingsSubtitle') : activeTab === 'tenants' ? t('tenantsSubtitle') : t('assessmentTemplatesSubtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-10 pb-10 scrollbar-hide">
|
||||
<div className="w-full">
|
||||
{error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-8 p-4 bg-red-50/80 backdrop-blur-md border border-red-200/50 text-red-700 rounded-2xl flex gap-3 items-center text-sm shadow-sm"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center shrink-0">
|
||||
<X className="w-4 h-4 text-red-600" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-black uppercase tracking-widest text-[10px] block mb-0.5">{t('errorLabel')}</span>
|
||||
{error}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{activeTab === 'general' && renderGeneralTab()}
|
||||
{activeTab === 'user' && currentUser?.role === 'SUPER_ADMIN' && renderUserTab()}
|
||||
{activeTab === 'model' && isAdmin && renderModelTab()}
|
||||
{activeTab === 'knowledge_base' && isAdmin && renderKnowledgeBaseTab()}
|
||||
{activeTab === 'tenants' && currentUser?.role === 'SUPER_ADMIN' && renderTenantsTab()}
|
||||
{activeTab === 'assessment_templates' && isAdmin && (
|
||||
<div className="bg-white rounded-3xl border border-slate-200/60 p-8 shadow-sm">
|
||||
<AssessmentTemplateManager />
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user