|
|
@@ -43,6 +43,7 @@ export const AssessmentView: React.FC<AssessmentViewProps> = ({
|
|
|
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 messagesEndRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
|
@@ -569,6 +570,38 @@ export const AssessmentView: React.FC<AssessmentViewProps> = ({
|
|
|
</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" />
|