Developer
7fd2a4cda2
- Option display: use slice(1) instead of regex to strip letter prefix - Grader prompts: add explicit partial credit guidance (5-7 for partial, 0-2 only for off-target)
1010 lines
59 KiB
TypeScript
1010 lines
59 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import {
|
|
Brain,
|
|
Send,
|
|
Loader2,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
ChevronRight,
|
|
History,
|
|
ClipboardCheck,
|
|
RefreshCcw,
|
|
FileText,
|
|
Star,
|
|
Award,
|
|
Trophy,
|
|
Trash2,
|
|
XCircle
|
|
} 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 [timeCheck, setTimeCheck] = useState<{ totalTimeRemaining: number; questionTimeRemaining: number; isTotalTimeout: boolean; isQuestionTimeout: boolean } | null>(null);
|
|
const [selectedChoice, setSelectedChoice] = useState<string | null>(null);
|
|
const isTimedOut = timeCheck?.isTotalTimeout || timeCheck?.isQuestionTimeout;
|
|
|
|
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();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!session || session.status !== 'IN_PROGRESS') {
|
|
setTimeCheck(null);
|
|
return;
|
|
}
|
|
const checkTime = async () => {
|
|
try {
|
|
const data = await assessmentService.checkTimeLimits(session.id);
|
|
setTimeCheck(data);
|
|
if (data.isTotalTimeout || data.isQuestionTimeout) {
|
|
setError(t('timeLimitExceeded'));
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to check time:', err);
|
|
}
|
|
};
|
|
checkTime();
|
|
const interval = setInterval(checkTime, 10000);
|
|
return () => clearInterval(interval);
|
|
}, [session]);
|
|
|
|
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) {
|
|
if (histSession.status === 'IN_PROGRESS') {
|
|
setError(t('cannotResumeInProgress'));
|
|
} else {
|
|
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) => (m.id && pm.id === m.id) || (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 () => {
|
|
const currentQuestion = state?.questions?.[state.currentQuestionIndex || 0] as any;
|
|
const isChoice = currentQuestion?.questionType === 'MULTIPLE_CHOICE' && currentQuestion?.options?.length > 0;
|
|
|
|
if (isChoice) {
|
|
if (!selectedChoice || isLoading || isTimedOut) return;
|
|
} else {
|
|
if (!inputValue.trim() || isLoading || isTimedOut) return;
|
|
}
|
|
|
|
const answer = isChoice ? selectedChoice! : inputValue.trim();
|
|
setInputValue('');
|
|
setSelectedChoice(null);
|
|
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) => (m.id && pm.id === m.id) || (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 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 currentQuestion = (state?.questions?.[state.currentQuestionIndex || 0] || {}) as any;
|
|
const isCurrentChoice = currentQuestion.questionType === 'MULTIPLE_CHOICE' && currentQuestion.options?.length > 0;
|
|
const optionLabels = ['A', 'B', 'C', 'D'];
|
|
|
|
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>
|
|
)}
|
|
{timeCheck && (
|
|
<div className={`flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded-full ${timeCheck.totalTimeRemaining < 60 || timeCheck.questionTimeRemaining < 30 ? 'bg-red-50 text-red-600' : 'bg-slate-100 text-slate-600'}`}>
|
|
<span>⏱</span>
|
|
<span>{Math.floor(timeCheck.totalTimeRemaining / 60)}:{String(timeCheck.totalTimeRemaining % 60).padStart(2, '0')}</span>
|
|
</div>
|
|
)}
|
|
</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)]">
|
|
{isTimedOut && (
|
|
<div className="max-w-3xl mx-auto mb-3 px-4 py-2 bg-red-50 border border-red-200 text-red-700 text-sm font-bold rounded-xl text-center">
|
|
{t('timeLimitExceeded')}
|
|
</div>
|
|
)}
|
|
{isCurrentChoice ? (
|
|
<div className="max-w-3xl mx-auto space-y-3">
|
|
<div className="flex items-center gap-2 text-xs text-slate-500 font-bold uppercase tracking-wider mb-1">
|
|
<span className="w-1 h-1 bg-indigo-400 rounded-full" />
|
|
请选择一个选项
|
|
</div>
|
|
<div className="grid gap-2">
|
|
{currentQuestion.options.map((opt: string, i: number) => {
|
|
const letter = optionLabels[i];
|
|
const isSelected = selectedChoice === letter;
|
|
const displayText = opt.slice(1);
|
|
return (
|
|
<button
|
|
key={letter}
|
|
onClick={() => !isTimedOut && setSelectedChoice(letter)}
|
|
disabled={isTimedOut}
|
|
className={cn(
|
|
"w-full text-left px-5 py-4 rounded-2xl border-2 transition-all text-sm font-medium",
|
|
isSelected
|
|
? "border-indigo-500 bg-indigo-50 text-indigo-700 shadow-md"
|
|
: "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50",
|
|
isTimedOut && "opacity-50 cursor-not-allowed"
|
|
)}
|
|
>
|
|
<span className="inline-flex items-center justify-center w-7 h-7 rounded-xl text-xs font-black mr-3 shrink-0 border-2 border-current">
|
|
{letter}
|
|
</span>
|
|
{displayText}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<button
|
|
onClick={handleSubmitAnswer}
|
|
disabled={!selectedChoice || isLoading || isTimedOut}
|
|
className={cn(
|
|
"w-full mt-3 h-14 flex items-center justify-center gap-2 rounded-2xl transition-all shadow-lg text-white font-bold",
|
|
!selectedChoice || isLoading || isTimedOut
|
|
? "bg-slate-300 cursor-not-allowed"
|
|
: "bg-indigo-600 hover:bg-indigo-700 active:scale-[0.97]"
|
|
)}
|
|
>
|
|
{isLoading ? <Loader2 size={20} className="animate-spin" /> : <Send size={20} />}
|
|
<span className="text-sm">确认答案</span>
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<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 && !isTimedOut) {
|
|
e.preventDefault();
|
|
handleSubmitAnswer();
|
|
}
|
|
}}
|
|
placeholder={isTimedOut ? t('timeLimitExceeded') : t('typeAnswerPlaceholder')}
|
|
disabled={isTimedOut}
|
|
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 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
rows={1}
|
|
/>
|
|
<button
|
|
onClick={handleSubmitAnswer}
|
|
disabled={!inputValue.trim() || isLoading || isTimedOut}
|
|
className={cn(
|
|
"w-14 h-14 flex items-center justify-center rounded-2xl transition-all shadow-lg",
|
|
!inputValue.trim() || isLoading || isTimedOut
|
|
? "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 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?.passed ? "text-emerald-600" : "text-rose-600"
|
|
)}>
|
|
{state?.passed ? t('verified') : t('fail')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
{state?.questions && state.questions.length > 0 && (
|
|
<div>
|
|
<h4 className="flex items-center gap-2.5 text-lg font-black text-slate-900 mb-4">
|
|
<CheckCircle size={20} className="text-indigo-600" />
|
|
每题详情
|
|
</h4>
|
|
<div className="space-y-4">
|
|
{state.questions.map((q: any, i: number) => {
|
|
const score = state.scores?.[q.id || (i + 1).toString()];
|
|
const isChoice = q.questionType === 'MULTIPLE_CHOICE';
|
|
const isCorrect = isChoice && q.correctAnswer && score >= 10;
|
|
return (
|
|
<div key={q.id || i} className="bg-white border border-slate-200 rounded-2xl p-5">
|
|
<div className="flex items-start gap-3">
|
|
<div className={cn(
|
|
"w-10 h-10 rounded-xl flex items-center justify-center shrink-0",
|
|
isChoice
|
|
? (isCorrect ? "bg-emerald-100 text-emerald-600" : "bg-red-100 text-red-600")
|
|
: score !== undefined ? "bg-indigo-100 text-indigo-600" : "bg-slate-100 text-slate-400"
|
|
)}>
|
|
{isChoice
|
|
? (isCorrect ? <CheckCircle size={20} /> : <XCircle size={20} />)
|
|
: <span className="text-sm font-black">{score !== undefined ? score : '?'}</span>
|
|
}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-bold text-slate-800 text-sm leading-relaxed">{q.questionText}</p>
|
|
{isChoice && (
|
|
<div className="mt-2 flex flex-wrap gap-2 text-xs">
|
|
{q.options?.map((opt: string, oi: number) => {
|
|
const letter = String.fromCharCode(65 + oi);
|
|
const isAnswer = letter === q.correctAnswer;
|
|
const displayText = opt.slice(1);
|
|
return (
|
|
<span key={oi} className={cn(
|
|
"px-3 py-1 rounded-lg font-medium",
|
|
isAnswer ? "bg-emerald-100 text-emerald-700 border border-emerald-200" : "bg-slate-50 text-slate-500"
|
|
)}>
|
|
{letter}. {displayText}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
{q.judgment && (
|
|
<div className="mt-3 bg-blue-50/50 border border-blue-100 rounded-xl p-3">
|
|
<p className="text-xs text-slate-600 leading-relaxed">{q.judgment}</p>
|
|
</div>
|
|
)}
|
|
{!isChoice && score !== undefined && (
|
|
<span className="inline-block mt-2 text-xs text-slate-400">得分: {score}/10</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<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
|
|
onClick={async () => {
|
|
if (!session) return;
|
|
try {
|
|
const result = await assessmentService.exportPdf(session.id);
|
|
const binary = atob(result.buffer);
|
|
const bytes = new Uint8Array(binary.length);
|
|
for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
|
|
const blob = new Blob([bytes], { type: 'application/pdf' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = result.filename;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
} catch (err) {
|
|
setError(t('exportAssessmentFailed'));
|
|
}
|
|
}}
|
|
className="px-6 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>
|
|
<button
|
|
onClick={async () => {
|
|
if (!session) return;
|
|
try {
|
|
const result = await assessmentService.exportExcel(session.id);
|
|
const binary = atob(result.buffer);
|
|
const array = new Uint8Array(binary.length);
|
|
for (let i = 0; i < binary.length; i++) {
|
|
array[i] = binary.charCodeAt(i);
|
|
}
|
|
const blob = new Blob([array], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = result.filename;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
} catch (err) {
|
|
setError(t('exportAssessmentFailed'));
|
|
}
|
|
}}
|
|
className="px-6 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('exportExcel')}
|
|
</button>
|
|
<button
|
|
onClick={async () => {
|
|
if (!session) return;
|
|
try {
|
|
const cert = await assessmentService.getCertificate(session.id);
|
|
alert(`${t('certificate')}: ${cert.level}\n${t('totalScore')}: ${cert.totalScore}\n${t('passed')}: ${cert.passed ? t('yes') : t('no')}`);
|
|
} catch (err) {
|
|
console.error('Failed to get certificate:', err);
|
|
}
|
|
}}
|
|
className="px-6 py-4 bg-amber-50 border-2 border-amber-200 text-amber-700 rounded-2xl font-bold hover:bg-amber-100 transition-all active:scale-[0.98]"
|
|
>
|
|
{t('viewCertificate')}
|
|
</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>
|
|
);
|
|
};
|