@tinyweb_dev/oe-exam-sdk 1.0.5 → 1.0.7

package/dist/components/questions/types/read-passage-and-answer-questions/ReadPassageAndAnswerQuestionsClient.js

@@ -38,7 +38,7 @@ export function ReadPassageAndAnswerQuestionsClient({ questionData, userAnswer,
     const isCorrect = isReviewMode && selectedAnswer === singleQuestion.correctAnswer;
     const isWrong = isReviewMode && selectedAnswer >= 0 && selectedAnswer !== singleQuestion.correctAnswer;
     const hasAnswered = selectedAnswer >= 0;
-    return (_jsxs("div", { className: "space-y-5", children: [instructions && (_jsx("div", { className: "overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm", children: _jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsx("p", { className: "text-sm font-medium text-blue-900", children: instructions })] }) })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u0110o\u1EA1n v\u0103n \u0111\u1ECDc hi\u1EC3u" })] }), _jsxs("div", { className: "p-5 space-y-4", children: [passageTitle && (_jsx("h3", { className: "text-center text-lg font-bold text-gray-900 border-b border-gray-100 pb-3", children: passageTitle })), _jsx("div", { className: "rounded-lg bg-gradient-to-br from-slate-50 to-gray-50 p-5 border border-gray-100", children: _jsx("p", { className: "whitespace-pre-wrap text-base leading-relaxed text-gray-700", children: passage }) })] })] }), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md", children: [_jsxs("div", { className: cn('flex items-center justify-between border-b px-5 py-3', isReviewMode && isCorrect && 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50', isReviewMode && isWrong && 'border-red-200 bg-gradient-to-r from-red-50 to-rose-50', !isReviewMode && 'border-gray-100 bg-gradient-to-r from-gray-50 to-white'), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold text-white shadow-sm', isReviewMode && isCorrect && 'bg-gradient-to-br from-green-500 to-emerald-600', isReviewMode && isWrong && 'bg-gradient-to-br from-red-500 to-rose-600', !isReviewMode && 'bg-gradient-to-br from-indigo-500 to-purple-600'), children: _jsx(ClipboardList, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-800", children: singleQuestion.question })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-5 space-y-2.5", children: [singleQuestion.options.map((option, optIndex) => {
+    return (_jsxs("div", { className: "space-y-3", children: [instructions && (_jsx("div", { className: "overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm", children: _jsxs("div", { className: "flex items-center gap-3 px-3 py-2", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsx("p", { className: "text-sm font-medium text-blue-900", children: instructions })] }) })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 text-white shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u0110o\u1EA1n v\u0103n \u0111\u1ECDc hi\u1EC3u" })] }), _jsxs("div", { className: "p-3 space-y-3", children: [passageTitle && (_jsx("h3", { className: "text-center text-lg font-bold text-gray-900 border-b border-gray-100 pb-3", children: passageTitle })), _jsx("div", { className: "rounded-lg bg-gradient-to-br from-slate-50 to-gray-50 p-5 border border-gray-100", children: _jsx("p", { className: "whitespace-pre-wrap text-base leading-relaxed text-gray-700", children: passage }) })] })] }), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md", children: [_jsxs("div", { className: cn('flex items-center justify-between border-b px-3 py-2', isReviewMode && isCorrect && 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50', isReviewMode && isWrong && 'border-red-200 bg-gradient-to-r from-red-50 to-rose-50', !isReviewMode && 'border-gray-100 bg-gradient-to-r from-gray-50 to-white'), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold text-white shadow-sm', isReviewMode && isCorrect && 'bg-gradient-to-br from-green-500 to-emerald-600', isReviewMode && isWrong && 'bg-gradient-to-br from-red-500 to-rose-600', !isReviewMode && 'bg-gradient-to-br from-indigo-500 to-purple-600'), children: _jsx(ClipboardList, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-800", children: singleQuestion.question })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-3 space-y-3", children: [singleQuestion.options.map((option, optIndex) => {
                                 const isSelected = selectedAnswer === optIndex;
                                 const isCorrectOption = optIndex === singleQuestion.correctAnswer;
                                 const letter = String.fromCharCode(65 + optIndex);

package/dist/components/questions/types/read-passage-and-answer-questions/ReadPassageAndAnswerQuestionsCreator.js

@@ -5,10 +5,10 @@ import { Button } from '../../../../components/ui/button';
 import { Label } from '../../../../components/ui/label';
 import { Input } from '../../../../components/ui/input';
 import { Textarea } from '../../../../components/ui/textarea';
-import { PointsInput } from '../../../../components/ui/points-input';
 import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { RadioGroup } from '../../../../components/ui/radio-group';
-import { Pencil, Eye, Plus, Trash2, BookOpen, Lightbulb, MessageSquare, CheckCircle2 } from 'lucide-react';
+import { Plus, Trash2, BookOpen, Lightbulb, MessageSquare, CheckCircle2 } from 'lucide-react';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { ReadPassageAndAnswerQuestionsClient } from './ReadPassageAndAnswerQuestionsClient';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
@@ -486,16 +486,19 @@ function ReadPassageAndAnswerQuestionsContent({ initialData, onSave, onSaveToQue
             singleQuestion: currentQuestion,
             groups,
         };
-        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "\u0110\u1ECDc \u0111o\u1EA1n v\u0103n v\u00E0 tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(ReadPassageAndAnswerQuestionsClient, { questionData: questionData, autoFillCorrectAnswers: true, isReviewMode: true, onSubmit: () => { }, explanation: explanation })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(ReadPassageAndAnswerQuestionsClient, { questionData: questionData, autoFillCorrectAnswers: true, isReviewMode: true, onSubmit: () => { }, explanation: explanation })] }));
     }
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-purple-500 via-violet-500 to-indigo-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 shadow-md", children: _jsx(BookOpen, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "\u0110\u1ECDc \u0111o\u1EA1n v\u0103n v\u00E0 tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi" }), _jsxs("div", { className: "mt-1.5 inline-flex items-center gap-1.5 rounded-full bg-purple-100 px-3 py-1 text-sm font-medium text-purple-700", children: [_jsx("span", { children: "\uD83D\uDCDA" }), _jsxs("span", { children: ["Nh\u00F3m ", currentGroupNumber] })] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handlePreview, className: "gap-2 border-violet-200 text-violet-600 hover:bg-violet-50 hover:text-violet-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: `rounded-xl border-2 p-5 transition-all ${validationErrors.passage ? 'border-red-300 bg-gradient-to-r from-red-50 to-rose-50' : 'border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50'}`, children: [_jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded-lg ${validationErrors.passage ? 'bg-red-100' : 'bg-amber-100'}`, children: _jsx(BookOpen, { className: `h-4 w-4 ${validationErrors.passage ? 'text-red-600' : 'text-amber-600'}` }) }), _jsxs(Label, { className: `text-base font-semibold ${validationErrors.passage ? 'text-red-800' : 'text-amber-800'}`, children: ["\u0110o\u1EA1n v\u0103n \u0111\u1ECDc hi\u1EC3u ", _jsxs("span", { className: "font-normal text-amber-600", children: ["(d\u00F9ng chung cho nh\u00F3m ", currentGroupNumber, ")"] })] })] }), _jsxs("div", { className: "mb-4", children: [_jsx(Label, { htmlFor: "passageTitle", className: "text-sm font-medium text-gray-700", children: "Ti\u00EAu \u0111\u1EC1" }), _jsx(Input, { id: "passageTitle", value: passageTitle, onChange: (e) => setPassageTitle(e.target.value), placeholder: "V\u00ED d\u1EE5: Our Family Holiday in Nha Trang", className: "mt-1.5 border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" })] }), _jsxs("div", { className: "mb-4", children: [_jsxs(Label, { htmlFor: "passage", className: "text-sm font-medium text-gray-700", children: ["N\u1ED9i dung \u0111o\u1EA1n v\u0103n ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Textarea, { id: "passage", value: passage, onChange: (e) => {
-                                                    setPassage(e.target.value);
-                                                    if (validationErrors.passage) {
-                                                        setValidationErrors(prev => ({ ...prev, passage: undefined }));
-                                                    }
-                                                }, placeholder: "Nh\u1EADp n\u1ED9i dung \u0111o\u1EA1n v\u0103n \u0111\u1ECDc hi\u1EC3u...", className: `mt-1.5 min-h-[150px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 ${validationErrors.passage ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}`, rows: 6 }), validationErrors.passage && (_jsx("p", { className: "mt-1.5 text-sm text-red-600", children: validationErrors.passage }))] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "instructions", className: "text-sm font-medium text-gray-700", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "instructions", value: instructions, onChange: (e) => setInstructions(e.target.value), placeholder: "V\u00ED d\u1EE5: Read the short passage and answer the question below.", className: "mt-1.5 border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" })] })] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 to-purple-400" }), _jsx(CardHeader, { className: "bg-gradient-to-r from-indigo-50 to-purple-50 pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100", children: _jsx(MessageSquare, { className: "h-4 w-4 text-indigo-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "N\u1ED9i dung c\u00E2u h\u1ECFi" }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-purple-100 px-2.5 py-1 text-xs font-medium text-purple-700", children: ["\uD83D\uDCDA Nh\u00F3m ", currentGroupNumber] })] }) }), _jsxs(CardContent, { className: "space-y-6 pt-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { id: "points", value: currentQuestion.points || 1, onChange: (e) => {
-                                        updateCurrentQuestion('points', Number(e.target.value) || 1);
-                                    } }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), "C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "question", value: currentQuestion.question || '', onChange: (e) => updateCurrentQuestion('question', e.target.value), placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${validationErrors.question ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.question && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.question }))] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", currentQuestion.options.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addOption, disabled: currentQuestion.options.length >= 10, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }), _jsx(RadioGroup, { value: currentQuestion.correctAnswer >= 0 ? currentQuestion.correctAnswer.toString() : '', onValueChange: (value) => updateCurrentQuestion('correctAnswer', parseInt(value)), children: _jsx("div", { className: "space-y-3", children: currentQuestion.options.map((option, optIndex) => {
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(BookOpen, { className: "h-3.5 w-3.5" }), title: "\u0110\u1ECDc \u0111o\u1EA1n v\u0103n v\u00E0 tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi", points: {
+                        value: currentQuestion.points || 1,
+                        onValueChange: (value) => updateCurrentQuestion('points', value),
+                    }, extraActions: _jsxs("span", { className: "inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700", children: ["Nh\u00F3m ", currentGroupNumber] }), preview: {
+                        onClick: handlePreview,
+                    } }), children: [_jsxs("div", { className: `rounded-xl border-2 p-5 transition-all ${validationErrors.passage ? 'border-red-300 bg-gradient-to-r from-red-50 to-rose-50' : 'border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50'}`, children: [_jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded-lg ${validationErrors.passage ? 'bg-red-100' : 'bg-amber-100'}`, children: _jsx(BookOpen, { className: `h-4 w-4 ${validationErrors.passage ? 'text-red-600' : 'text-amber-600'}` }) }), _jsxs(Label, { className: `text-base font-semibold ${validationErrors.passage ? 'text-red-800' : 'text-amber-800'}`, children: ["\u0110o\u1EA1n v\u0103n \u0111\u1ECDc hi\u1EC3u ", _jsxs("span", { className: "font-normal text-amber-600", children: ["(d\u00F9ng chung cho nh\u00F3m ", currentGroupNumber, ")"] })] })] }), _jsxs("div", { className: "mb-4", children: [_jsx(Label, { htmlFor: "passageTitle", className: "text-sm font-medium text-gray-700", children: "Ti\u00EAu \u0111\u1EC1" }), _jsx(Input, { id: "passageTitle", value: passageTitle, onChange: (e) => setPassageTitle(e.target.value), placeholder: "V\u00ED d\u1EE5: Our Family Holiday in Nha Trang", className: "mt-1.5 border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" })] }), _jsxs("div", { className: "mb-4", children: [_jsxs(Label, { htmlFor: "passage", className: "text-sm font-medium text-gray-700", children: ["N\u1ED9i dung \u0111o\u1EA1n v\u0103n ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Textarea, { id: "passage", value: passage, onChange: (e) => {
+                                            setPassage(e.target.value);
+                                            if (validationErrors.passage) {
+                                                setValidationErrors(prev => ({ ...prev, passage: undefined }));
+                                            }
+                                        }, placeholder: "Nh\u1EADp n\u1ED9i dung \u0111o\u1EA1n v\u0103n \u0111\u1ECDc hi\u1EC3u...", className: `mt-1.5 min-h-[150px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 ${validationErrors.passage ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}`, rows: 6 }), validationErrors.passage && (_jsx("p", { className: "mt-1.5 text-sm text-red-600", children: validationErrors.passage }))] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "instructions", className: "text-sm font-medium text-gray-700", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "instructions", value: instructions, onChange: (e) => setInstructions(e.target.value), placeholder: "V\u00ED d\u1EE5: Read the short passage and answer the question below.", className: "mt-1.5 border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" })] })] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100", children: _jsx(MessageSquare, { className: "h-4 w-4 text-indigo-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "N\u1ED9i dung c\u00E2u h\u1ECFi" }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-purple-100 px-2.5 py-1 text-xs font-medium text-purple-700", children: ["\uD83D\uDCDA Nh\u00F3m ", currentGroupNumber] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), "C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "question", value: currentQuestion.question || '', onChange: (e) => updateCurrentQuestion('question', e.target.value), placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${validationErrors.question ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.question && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.question }))] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", currentQuestion.options.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addOption, disabled: currentQuestion.options.length >= 10, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }), _jsx(RadioGroup, { value: currentQuestion.correctAnswer >= 0 ? currentQuestion.correctAnswer.toString() : '', onValueChange: (value) => updateCurrentQuestion('correctAnswer', parseInt(value)), children: _jsx("div", { className: "space-y-3", children: currentQuestion.options.map((option, optIndex) => {
                                                 const optionError = validationErrors.options?.[optIndex];
                                                 const isCorrect = currentQuestion.correctAnswer === optIndex;
                                                 const optionLetter = String.fromCharCode(65 + optIndex);
@@ -504,7 +507,7 @@ function ReadPassageAndAnswerQuestionsContent({ initialData, onSave, onSaveToQue
                                                         : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'}`, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: `flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all ${isCorrect
                                                                     ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
                                                                     : 'bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600'}`, onClick: () => updateCurrentQuestion('correctAnswer', optIndex), children: optionLetter }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Input, { id: `option-input-${optIndex}`, value: option, onChange: (e) => updateOption(optIndex, e.target.value), placeholder: `Nhập đáp án ${optionLetter}...`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${optionError ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [!isCorrect && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => updateCurrentQuestion('correctAnswer', optIndex), className: "text-gray-400 hover:text-green-600", title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: _jsx(CheckCircle2, { className: "h-4 w-4" }) })), currentQuestion.options.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => deleteOption(optIndex), className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }) }, optIndex));
-                                            }) }) }), currentQuestion.correctAnswer < 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-amber-700", children: "Click v\u00E0o \u00F4 ch\u1EEF c\u00E1i ho\u1EB7c icon \u2713 \u0111\u1EC3 ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" })] })] })), validationErrors.correctAnswer && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: validationErrors.correctAnswer }) }))] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+                                            }) }) }), currentQuestion.correctAnswer < 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-amber-700", children: "Click v\u00E0o \u00F4 ch\u1EEF c\u00E1i ho\u1EB7c icon \u2713 \u0111\u1EC3 ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" })] })] })), validationErrors.correctAnswer && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: validationErrors.correctAnswer }) }))] })] })] }), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation })] }));
 }
 export function ReadPassageAndAnswerQuestionsCreator(props) {
     return _jsx(ReadPassageAndAnswerQuestionsContent, { ...props });

package/dist/components/questions/types/sort-words-into-categories/SortWordsIntoCategoriesClient.js

@@ -20,5 +20,5 @@ export function SortWordsIntoCategoriesClient({ questionData, isReviewMode = fal
         return item;
     });
     const canEdit = Boolean(onPlacementsChange) && !isReviewMode;
-    return (_jsxs("div", { className: "space-y-4", children: [(questionData.title || questionData.instruction) && (_jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50 px-4 py-3", children: [questionData.title && (_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-slate-500", children: questionData.title })), questionData.instruction && (_jsx("p", { className: "text-sm font-medium text-slate-800", children: questionData.instruction }))] })), _jsx(SortWordsIntoCategoriesBoard, { categories: questionData.categories, words: questionData.words, placements: placements, correctPlacements: isReviewMode ? correctPlacements : undefined, onChange: canEdit ? onPlacementsChange : undefined, disabled: !canEdit, isReviewMode: isReviewMode }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
+    return (_jsxs("div", { className: "space-y-4", children: [(questionData.title || questionData.instruction) && (_jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50 px-3 py-2", children: [questionData.title && (_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-slate-500", children: questionData.title })), questionData.instruction && (_jsx("p", { className: "text-sm font-medium text-slate-800", children: questionData.instruction }))] })), _jsx(SortWordsIntoCategoriesBoard, { categories: questionData.categories, words: questionData.words, placements: placements, correctPlacements: isReviewMode ? correctPlacements : undefined, onChange: canEdit ? onPlacementsChange : undefined, disabled: !canEdit, isReviewMode: isReviewMode }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
 }

package/dist/components/questions/types/sort-words-into-categories/SortWordsIntoCategoriesCreator.js

@@ -5,11 +5,11 @@ import { Button } from '../../../../components/ui/button';
 import { Label } from '../../../../components/ui/label';
 import { Input } from '../../../../components/ui/input';
 import { PointsInput } from '../../../../components/ui/points-input';
-import { Textarea } from '../../../../components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { Switch } from '../../../../components/ui/switch';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
+import { Plus, Star, Trash2, Layers } from 'lucide-react';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { SortWordsIntoCategoriesClient } from './SortWordsIntoCategoriesClient';
 import { createEmptyCategory, createEmptyWord, sumGradablePoints, } from './map-sort-words-into-categories-data';
 import { SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION } from '../../_shared/types/sort-words-into-categories.type';
@@ -165,7 +165,7 @@ export function SortWordsIntoCategoriesCreator({ initialData, onChange, external
         setWords((prev) => prev.filter((_, i) => i !== index));
     };
     const displayErrors = [...errors, ...(externalErrors || [])];
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((v) => !v), children: [isClientMode ? _jsx(Pencil, { className: "mr-2 h-4 w-4" }) : _jsx(Eye, { className: "mr-2 h-4 w-4" }), isClientMode ? 'Sửa' : 'Xem trước'] }) }), isClientMode ? (_jsx(SortWordsIntoCategoriesClient, { questionData: buildPayload(), isReviewMode: true })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "swc-title", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "swc-title", value: title, onChange: (event) => setTitle(event.target.value), placeholder: "VOCABULARY" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "swc-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "swc-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsx(CardTitle, { className: "text-base", children: "Nh\u00F3m (categories)" }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: addCategory, children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), " Th\u00EAm nh\u00F3m"] })] }), _jsx(CardContent, { className: "space-y-3", children: categories.map((category, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: category.name, onChange: (event) => updateCategory(index, { name: event.target.value }), placeholder: `Nhóm ${index + 1}` }), categories.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeCategory(index), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] }, category.id))) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsx(CardTitle, { className: "text-base", children: "T\u1EEB / c\u1EE5m t\u1EEB" }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: addWord, children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), " Th\u00EAm t\u1EEB"] })] }), _jsx(CardContent, { className: "space-y-3", children: words.map((word, index) => (_jsxs("div", { className: "grid gap-2 rounded-lg border p-3 md:grid-cols-[1fr_180px_auto]", children: [_jsx(Input, { value: word.text, onChange: (event) => updateWord(index, { text: event.target.value }), placeholder: `Từ #${index + 1} (VD: press a button)` }), _jsx("select", { className: "h-10 rounded-md border border-input bg-background px-3 text-sm", value: word.categoryId, onChange: (event) => updateWord(index, { categoryId: event.target.value }), children: categories.map((category) => (_jsx("option", { value: category.id, children: category.name || category.id }, category.id))) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Switch, { id: `swc-example-${index}`, checked: word.isExample === true, onCheckedChange: (checked) => updateWord(index, { isExample: checked }) }), _jsxs(Label, { htmlFor: `swc-example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !word.isExample && (_jsx(PointsInput, { value: word.points, allowZero: true, onChange: (event) => updateWord(index, {
-                                                        points: Number.parseInt(event.target.value, 10) || 1,
-                                                    }) })), words.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeWord(index), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] })] }, word.id))) })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "swc-explanation", children: "Gi\u1EA3i th\u00EDch" }), _jsx(Textarea, { id: "swc-explanation", value: explanation, onChange: (event) => setExplanation(event.target.value) })] })] })), displayErrors.length > 0 && (_jsx("ul", { className: "list-disc space-y-1 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700", children: displayErrors.map((error) => (_jsx("li", { children: error }, error))) }))] }));
+    return (_jsxs("div", { className: "space-y-3", children: [isClientMode ? (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(SortWordsIntoCategoriesClient, { questionData: buildPayload(), isReviewMode: true })] })) : (_jsxs(_Fragment, { children: [_jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(Layers, { className: "h-3.5 w-3.5" }), title: "S\u1EAFp x\u1EBFp t\u1EEB v\u00E0o nh\u00F3m", preview: { onClick: () => setIsClientMode(true) } }), children: [_jsxs("div", { className: "grid gap-2.5 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "swc-title", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "swc-title", value: title, onChange: (event) => setTitle(event.target.value), placeholder: "VOCABULARY" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "swc-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "swc-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 px-3 py-2", children: [_jsx(CardTitle, { className: "text-sm font-semibold text-gray-800", children: "Nh\u00F3m (categories)" }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: addCategory, className: "h-8", children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), " Th\u00EAm nh\u00F3m"] })] }), _jsx(CardContent, { className: "space-y-2.5 px-3 pb-3", children: categories.map((category, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: category.name, onChange: (event) => updateCategory(index, { name: event.target.value }), placeholder: `Nhóm ${index + 1}` }), categories.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeCategory(index), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] }, category.id))) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 px-3 py-2", children: [_jsx(CardTitle, { className: "text-sm font-semibold text-gray-800", children: "T\u1EEB / c\u1EE5m t\u1EEB" }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: addWord, className: "h-8", children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), " Th\u00EAm t\u1EEB"] })] }), _jsx(CardContent, { className: "space-y-2.5 px-3 pb-3", children: words.map((word, index) => (_jsxs("div", { className: "grid gap-2 rounded-lg border p-3 md:grid-cols-[1fr_180px_auto]", children: [_jsx(Input, { value: word.text, onChange: (event) => updateWord(index, { text: event.target.value }), placeholder: `Từ #${index + 1} (VD: press a button)` }), _jsx("select", { className: "h-10 rounded-md border border-input bg-background px-3 text-sm", value: word.categoryId, onChange: (event) => updateWord(index, { categoryId: event.target.value }), children: categories.map((category) => (_jsx("option", { value: category.id, children: category.name || category.id }, category.id))) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Switch, { id: `swc-example-${index}`, checked: word.isExample === true, onCheckedChange: (checked) => updateWord(index, { isExample: checked }) }), _jsxs(Label, { htmlFor: `swc-example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !word.isExample && (_jsx(PointsInput, { value: word.points, allowZero: true, onChange: (event) => updateWord(index, {
+                                                                points: Number.parseInt(event.target.value, 10) || 1,
+                                                            }) })), words.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeWord(index), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] })] }, word.id))) })] })] }), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) })] })), displayErrors.length > 0 && (_jsx("ul", { className: "list-disc space-y-1 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700", children: displayErrors.map((error) => (_jsx("li", { children: error }, error))) }))] }));
 }

package/dist/components/questions/types/speaking-conversation/SpeakingConversationCreator.js

@@ -1,20 +1,20 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useEffect, useMemo } from 'react';
+import { useRef, useEffect, useMemo, useState } from 'react';
 import { Button } from '../../../../components/ui/button';
 import { Label } from '../../../../components/ui/label';
 import { Input } from '../../../../components/ui/input';
 import { Textarea } from '../../../../components/ui/textarea';
 import { Switch } from '../../../../components/ui/switch';
 import { PointsInput } from '../../../../components/ui/points-input';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { Badge } from '../../../../components/ui/badge';
 import { FileUpload } from '../../../../components/ui/file-upload';
-import { CreatorGuide } from '../../components/CreatorGuide';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
+import { SpeakingConversationPreviewClient } from './SpeakingConversationPreviewClient';
 import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks/useDebouncedCallback';
 import { speakingConversationFormSchema, } from '../../../../shared/lib/validation/speaking-conversation.validation';
-import { Users, Mic, Volume2, MessageSquareText, BookOpen, Info, Plus, Trash2, Image, User, UserCheck, } from 'lucide-react';
+import { Users, Mic, Volume2, MessageSquareText, Info, Plus, Trash2, Image, User, UserCheck, } from 'lucide-react';
 import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
 import { generateObjectId } from '../../_shared/utils/id-generator';
 // ─── Helpers ─────────────────────────────────────────────────────────────────
@@ -103,6 +103,7 @@ export function SpeakingConversationCreator({ initialData, onSave, onChange, ext
         zodSchema: speakingConversationFormSchema,
         mode: 'onBlur',
     });
+    const [isClientMode, setIsClientMode] = useState(false);
     const previousInitialDataRef = useRef(initialData);
     const isInitializingRef = useRef(false);
     const onChangeRef = useRef(onChange);
@@ -335,39 +336,34 @@ export function SpeakingConversationCreator({ initialData, onSave, onChange, ext
         form.setValue('images', updated, { shouldValidate: true });
     };
     // ─── Render ───────────────────────────────────────────────────────────────
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "teal", steps: [
-                    {
-                        text: 'Cấu hình Group Data (tên Partner, avatar) — chỉ câu đầu tiên trong nhóm được chỉnh sửa',
-                    },
-                    {
-                        text: 'Chọn Responder: Partner (câu mẫu) hoặc Student (học sinh trả lời)',
-                        highlight: true,
-                    },
-                    {
-                        text: 'Upload audio Interlocutor (câu hỏi) và audio Partner (câu trả lời mẫu khi responder = Partner)',
-                    },
-                    { text: 'Nhập đáp án mong muốn (dùng khi responder = Student để giáo viên tham chiếu)' },
-                    { text: 'Thêm giải thích nếu cần' },
-                ], tips: [
-                    'Responder = Partner: tự động set is_example=true, points=0. Học sinh chỉ nghe, không ghi âm.',
-                    'Responder = Student: học sinh ghi âm trả lời. Cần nhập điểm >= 1.',
-                ] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 shadow-sm", children: _jsx(Users, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "D\u1EEF li\u1EC7u nh\u00F3m" }), isGrouped && (_jsxs(Badge, { variant: "outline", className: "border-teal-300 bg-teal-50 text-teal-700 text-xs", children: ["Nh\u00F3m ", currentGroupNumber] })), !isFirstInGroup && (_jsx(Badge, { variant: "outline", className: "border-gray-300 bg-gray-50 text-gray-500 text-xs", children: "Ch\u1EC9 \u0111\u1ECDc" }))] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: isFirstInGroup
-                                                ? 'Thông tin Partner và hình ảnh dùng chung cho toàn bộ nhóm câu hỏi'
-                                                : 'Được quản lý bởi câu hỏi đầu tiên trong nhóm' })] })] }) }), _jsx(CardContent, { className: "space-y-5", children: isFirstInGroup ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(User, { className: "h-4 w-4 text-teal-500" }), "T\u00EAn nh\u00E2n v\u1EADt Partner"] }), _jsx(Input, { ...form.register('partnerName'), placeholder: "VD: Bingo", className: "border-gray-200 focus:border-teal-300 focus:ring-teal-200" }), _jsx("p", { className: "text-xs text-gray-400", children: "T\u00EAn hi\u1EC3n th\u1ECB c\u1EE7a nh\u00E2n v\u1EADt \u1EA3o (Partner) \u2014 d\u00F9ng trong giao di\u1EC7n thi." })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(User, { className: "h-4 w-4 text-teal-500" }), "Avatar Partner"] }), _jsx(FileUpload, { id: "partner-avatar-url", label: "", accept: "image/*", value: watchedPartnerAvatarUrl || '', onChange: (url) => form.setValue('partnerAvatarUrl', url, { shouldValidate: true }), maxSize: 5, placeholder: "Upload \u1EA3nh avatar Partner (PNG, JPG, ...)", autoUpload: true, prefix: "speaking/partner-avatar" })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(Image, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh phase (t\u00F9y ch\u1ECDn)"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddImage, className: "gap-1.5 border-teal-200 text-teal-700 hover:bg-teal-50 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm h\u00ECnh"] })] }), watchedImages.length === 0 ? (_jsxs("div", { className: "rounded-lg border-2 border-dashed border-teal-200 bg-teal-50/40 py-6 text-center", children: [_jsx(Image, { className: "mx-auto h-8 w-8 text-teal-300 mb-2" }), _jsx("p", { className: "text-sm text-gray-400", children: "Kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh \u2014 d\u00F9ng cho Part 2 phases c\u00F3 tranh" })] })) : (_jsx("div", { className: "space-y-3", children: watchedImages.map((img, index) => (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-xs font-semibold text-gray-600", children: ["H\u00ECnh ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-6 w-6 text-red-400 hover:text-red-600 hover:bg-red-50", onClick: () => handleRemoveImage(index), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }), _jsx(FileUpload, { id: `image-url-${index}`, label: "", accept: "image/*", value: img.url, onChange: (url) => handleImageChange(index, 'url', url), maxSize: 10, placeholder: "Upload h\u00ECnh \u1EA3nh", autoUpload: true, prefix: "speaking/phase-images" }), _jsx(Input, { value: img.label, onChange: (e) => handleImageChange(index, 'label', e.target.value), placeholder: "Nh\u00E3n h\u00ECnh (VD: Park, Bedroom, Library ...)", className: "border-gray-200 text-sm focus:border-teal-300" })] }, img.id))) }))] })] })) : (
-                        /* Read-only group data view for non-first questions */
-                        _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-gray-100 bg-gray-50 px-4 py-3", children: [_jsx(User, { className: "h-4 w-4 text-teal-500 flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-gray-500", children: "T\u00EAn Partner" }), _jsx("p", { className: "text-sm font-medium text-gray-800", children: groupData.partnerName || (_jsx("span", { className: "italic text-gray-400", children: "Ch\u01B0a \u0111\u1EB7t t\u00EAn" })) })] })] }), groupData.images && groupData.images.length > 0 && (_jsxs("div", { className: "rounded-lg border border-gray-100 bg-gray-50 px-4 py-3", children: [_jsxs("p", { className: "text-xs text-gray-500 mb-2", children: ["H\u00ECnh \u1EA3nh (", groupData.images.length, ")"] }), _jsx("div", { className: "flex flex-wrap gap-2", children: groupData.images.map((img) => (_jsx("span", { className: "inline-flex items-center rounded-full bg-teal-100 px-2 py-0.5 text-xs text-teal-700", children: img.label || img.id }, img.id))) })] }))] })) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: `h-1 bg-gradient-to-r ${isPartnerResponder ? 'from-orange-400 to-amber-400' : 'from-indigo-400 to-violet-400'}` }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-9 w-9 items-center justify-center rounded-lg shadow-sm ${isPartnerResponder ? 'bg-gradient-to-br from-orange-500 to-amber-500' : 'bg-gradient-to-br from-indigo-500 to-violet-600'}`, children: _jsx(Mic, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "N\u1ED9i dung c\u00E2u h\u1ECFi" }), isPartnerResponder && (_jsx(Badge, { className: "bg-orange-100 text-orange-700 border-orange-200 border text-xs font-semibold", children: "C\u00E2u h\u1ECFi m\u1EABu (Example)" }))] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: isPartnerResponder
-                                                ? 'Partner trả lời — học sinh chỉ nghe, không ghi âm'
-                                                : 'Student trả lời — học sinh ghi âm câu trả lời' })] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: `rounded-xl border p-4 space-y-4 ${isPartnerResponder ? 'border-orange-200 bg-orange-50/40' : 'border-indigo-200 bg-indigo-50/40'}`, children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-base font-semibold text-gray-800", children: "Ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi" }), _jsx("p", { className: "text-sm text-gray-500", children: "Ai s\u1EBD tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi n\u00E0y trong b\u00E0i thi?" })] }) }), _jsxs("div", { className: "flex gap-3", children: [_jsxs("button", { type: "button", onClick: () => form.setValue('responder', 'PARTNER', { shouldValidate: true }), className: `flex flex-1 items-center gap-3 rounded-xl border-2 p-3 transition-all ${isPartnerResponder
-                                                    ? 'border-orange-400 bg-orange-50 shadow-sm'
-                                                    : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsx("div", { className: `flex h-9 w-9 items-center justify-center rounded-full ${isPartnerResponder ? 'bg-orange-500' : 'bg-gray-200'}`, children: _jsx(User, { className: `h-4 w-4 ${isPartnerResponder ? 'text-white' : 'text-gray-500'}` }) }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: `text-sm font-semibold ${isPartnerResponder ? 'text-orange-800' : 'text-gray-700'}`, children: "Partner tr\u1EA3 l\u1EDDi" }), _jsx("p", { className: `text-xs ${isPartnerResponder ? 'text-orange-600' : 'text-gray-500'}`, children: "C\u00E2u m\u1EABu \u2014 is_example=true, points=0" })] })] }), _jsxs("button", { type: "button", onClick: () => form.setValue('responder', 'STUDENT', { shouldValidate: true }), className: `flex flex-1 items-center gap-3 rounded-xl border-2 p-3 transition-all ${!isPartnerResponder
-                                                    ? 'border-indigo-400 bg-indigo-50 shadow-sm'
-                                                    : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsx("div", { className: `flex h-9 w-9 items-center justify-center rounded-full ${!isPartnerResponder ? 'bg-indigo-500' : 'bg-gray-200'}`, children: _jsx(UserCheck, { className: `h-4 w-4 ${!isPartnerResponder ? 'text-white' : 'text-gray-500'}` }) }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: `text-sm font-semibold ${!isPartnerResponder ? 'text-indigo-800' : 'text-gray-700'}`, children: "Student tr\u1EA3 l\u1EDDi" }), _jsx("p", { className: `text-xs ${!isPartnerResponder ? 'text-indigo-600' : 'text-gray-500'}`, children: "C\u00E2u th\u1EF1c \u2014 h\u1ECDc sinh ghi \u00E2m" })] })] })] }), form.hasError('responder') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('responder') }))] }), _jsxs("div", { className: "w-full md:w-1/2", children: [_jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), disabled: isPartnerResponder, error: form.hasError('points') ? form.getFieldError('points') : undefined }), isPartnerResponder && (_jsx("p", { className: "mt-1.5 text-xs text-orange-600", children: "C\u00E2u h\u1ECFi m\u1EABu (Partner) lu\u00F4n c\u00F3 0 \u0111i\u1EC3m" }))] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(Volume2, { className: "h-4 w-4 text-blue-500" }), "Audio Interlocutor", _jsx("span", { className: "text-xs font-normal text-gray-400", children: "(t\u00F9y ch\u1ECDn)" })] }), _jsx(FileUpload, { id: "interlocutor-audio-url", label: "", accept: "audio/*", value: watchedInterlocutorAudioUrl || '', onChange: (url) => form.setValue('interlocutorAudioUrl', url, { shouldValidate: true }), maxSize: 20, placeholder: "Upload audio c\u00E2u h\u1ECFi c\u1EE7a Interlocutor (MP3, WAV...)", autoUpload: true, prefix: "speaking/interlocutor" }), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsx("p", { className: "text-xs text-blue-700", children: "Audio c\u1EE7a Interlocutor (ng\u01B0\u1EDDi h\u1ECFi). Ph\u00E1t tr\u01B0\u1EDBc khi Partner ho\u1EB7c Student tr\u1EA3 l\u1EDDi." })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(Volume2, { className: "h-4 w-4 text-orange-500" }), "Audio Partner", isPartnerResponder && _jsx("span", { className: "text-red-500", children: "*" }), !isPartnerResponder && (_jsx("span", { className: "text-xs font-normal text-gray-400", children: "(t\u00F9y ch\u1ECDn)" }))] }), _jsx(FileUpload, { id: "partner-audio-url", label: "", accept: "audio/*", value: watchedPartnerAudioUrl || '', onChange: (url) => form.setValue('partnerAudioUrl', url, { shouldValidate: true }), maxSize: 20, placeholder: "Upload audio tr\u1EA3 l\u1EDDi c\u1EE7a Partner (MP3, WAV...)", autoUpload: true, prefix: "speaking/partner" }), form.hasError('partnerAudioUrl') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('partnerAudioUrl') })), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-orange-100 bg-orange-50/60 px-3 py-2", children: [_jsx(Info, { className: "h-4 w-4 text-orange-500 mt-0.5 flex-shrink-0" }), _jsx("p", { className: "text-xs text-orange-700", children: isPartnerResponder
-                                                    ? 'Bắt buộc khi responder = Partner. Phát sau audio Interlocutor.'
-                                                    : 'Tùy chọn khi responder = Student — dùng cho Talk Together (Partner nói trước, Student trả lời sau).' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(MessageSquareText, { className: "h-4 w-4 text-gray-500" }), "Text c\u00E2u h\u1ECFi (t\u00F9y ch\u1ECDn)"] }), _jsx(Textarea, { ...form.register('questionText'), placeholder: "VD: What's your name? How old are you?", rows: 2, className: "min-h-[60px] border-gray-200 focus:border-indigo-300 focus:ring-indigo-200 resize-none" }), _jsx("p", { className: "text-xs text-gray-400", children: "Ch\u1EC9 hi\u1EC3n th\u1ECB cho admin/gi\u00E1o vi\u00EAn khi review. H\u1ECDc sinh ch\u1EC9 nghe audio." })] }), _jsxs("div", { className: "flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-700", children: "C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng" }), _jsx("p", { className: "text-xs text-gray-400", children: "\u0110\u00E1nh d\u1EA5u c\u00E2u h\u1ECFi n\u00E0y l\u00E0 d\u1EF1 ph\u00F2ng (backup)" })] }), _jsx(Switch, { checked: watchedIsBackup, onCheckedChange: (checked) => form.setValue('isBackup', checked, { shouldValidate: true }) })] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-green-400 to-emerald-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-sm", children: _jsx(MessageSquareText, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "\u0110\u00E1p \u00E1n mong mu\u1ED1n" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-green-200 bg-green-50 px-2.5 py-0.5 text-xs font-medium text-green-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: isPartnerResponder
-                                                        ? 'Câu mẫu — đáp án dùng để ghi nhớ nội dung (không chấm điểm)'
-                                                        : 'Đáp án tham chiếu để giáo viên chấm thủ công' })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddExpectedAnswer, className: "gap-1.5 border-green-200 text-green-700 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsx("p", { className: "text-xs text-blue-700", children: isPartnerResponder
-                                            ? 'Câu hỏi mẫu: có thể nhập nội dung Partner nói để ghi nhớ. Không dùng để chấm điểm.'
-                                            : 'Giáo viên dùng các đáp án này làm tham chiếu khi chấm thủ công câu trả lời của học sinh.' })] }), watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-green-100 text-xs font-semibold text-green-700 mt-1.5 flex-shrink-0", children: index + 1 }), _jsx(Textarea, { value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), placeholder: index === 0
-                                            ? 'VD: My name is Bingo. I am 8 years old.'
-                                            : 'Thêm đáp án mẫu khác...', rows: 2, className: "min-h-[60px] border-gray-200 bg-white transition-all focus:border-green-300 focus:ring-green-200 resize-none flex-1" }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "mt-1.5 h-7 w-7 text-red-400 hover:text-red-600 hover:bg-red-50 flex-shrink-0", onClick: () => handleRemoveExpectedAnswer(index), "aria-label": `Xóa đáp án ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index)))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch th\u00EAm v\u1EC1 c\u00E2u tr\u1EA3 l\u1EDDi k\u1EF3 v\u1ECDng, d\u00F9ng khi review k\u1EBFt qu\u1EA3." })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { value: watchedExplanation || '', onChange: (e) => form.setValue('explanation', e.target.value, { shouldValidate: true }), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng: 'My name is...' v\u00EC c\u00E2u h\u1ECFi \u0111ang h\u1ECFi v\u1EC1 t\u00EAn v\u00E0 tu\u1ED5i.", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] }), externalErrors && externalErrors.length > 0 && (_jsx("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4", children: _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "C\u1EA7n s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] }) }))] }));
+    if (isClientMode) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(SpeakingConversationPreviewClient, { questionData: {
+                        questionText: watchedQuestionText,
+                        responder: watchedResponder,
+                        interlocutorAudioUrl: watchedInterlocutorAudioUrl,
+                        partnerAudioUrl: watchedPartnerAudioUrl,
+                        partnerName: watchedPartnerName,
+                        partnerAvatarUrl: watchedPartnerAvatarUrl,
+                        images: watchedImages,
+                        isBackup: watchedIsBackup,
+                        expectedAnswers: watchedExpectedAnswers,
+                    }, isReviewMode: true })] }));
+    }
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(Users, { className: "h-3.5 w-3.5" }), title: "D\u1EEF li\u1EC7u nh\u00F3m", extraActions: _jsxs(_Fragment, { children: [isGrouped && (_jsxs(Badge, { variant: "outline", className: "border-teal-300 bg-teal-50 text-teal-700 text-xs", children: ["Nh\u00F3m ", currentGroupNumber] })), !isFirstInGroup && (_jsx(Badge, { variant: "outline", className: "border-gray-300 bg-gray-50 text-gray-500 text-xs", children: "Ch\u1EC9 \u0111\u1ECDc" })), _jsx(PointsInput, { value: watchedPoints, onValueChange: (value) => form.setValue('points', value, { shouldValidate: true }), disabled: isPartnerResponder, error: form.hasError('points') ? form.getFieldError('points') : undefined })] }), preview: { onClick: () => setIsClientMode(true) } }), children: isFirstInGroup ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(User, { className: "h-4 w-4 text-teal-500" }), "T\u00EAn nh\u00E2n v\u1EADt Partner"] }), _jsx(Input, { ...form.register('partnerName'), placeholder: "VD: Bingo", className: "border-gray-200 focus:border-teal-300 focus:ring-teal-200" }), _jsx("p", { className: "text-xs text-gray-400", children: "T\u00EAn hi\u1EC3n th\u1ECB c\u1EE7a nh\u00E2n v\u1EADt \u1EA3o (Partner) \u2014 d\u00F9ng trong giao di\u1EC7n thi." })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(User, { className: "h-4 w-4 text-teal-500" }), "Avatar Partner"] }), _jsx(FileUpload, { id: "partner-avatar-url", label: "", accept: "image/*", value: watchedPartnerAvatarUrl || '', onChange: (url) => form.setValue('partnerAvatarUrl', url, { shouldValidate: true }), maxSize: 5, placeholder: "Upload \u1EA3nh avatar Partner (PNG, JPG, ...)", autoUpload: true, prefix: "speaking/partner-avatar" })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(Image, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh phase (t\u00F9y ch\u1ECDn)"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddImage, className: "gap-1.5 border-teal-200 text-teal-700 hover:bg-teal-50 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm h\u00ECnh"] })] }), watchedImages.length === 0 ? (_jsxs("div", { className: "rounded-lg border-2 border-dashed border-teal-200 bg-teal-50/40 py-6 text-center", children: [_jsx(Image, { className: "mx-auto h-8 w-8 text-teal-300 mb-2" }), _jsx("p", { className: "text-sm text-gray-400", children: "Kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh \u2014 d\u00F9ng cho Part 2 phases c\u00F3 tranh" })] })) : (_jsx("div", { className: "space-y-3", children: watchedImages.map((img, index) => (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-xs font-semibold text-gray-600", children: ["H\u00ECnh ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-6 w-6 text-red-400 hover:text-red-600 hover:bg-red-50", onClick: () => handleRemoveImage(index), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }), _jsx(FileUpload, { id: `image-url-${index}`, label: "", accept: "image/*", value: img.url, onChange: (url) => handleImageChange(index, 'url', url), maxSize: 10, placeholder: "Upload h\u00ECnh \u1EA3nh", autoUpload: true, prefix: "speaking/phase-images" }), _jsx(Input, { value: img.label, onChange: (e) => handleImageChange(index, 'label', e.target.value), placeholder: "Nh\u00E3n h\u00ECnh (VD: Park, Bedroom, Library ...)", className: "border-gray-200 text-sm focus:border-teal-300" })] }, img.id))) }))] })] })) : (
+                /* Read-only group data view for non-first questions */
+                _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-gray-100 bg-gray-50 px-4 py-3", children: [_jsx(User, { className: "h-4 w-4 text-teal-500 flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-gray-500", children: "T\u00EAn Partner" }), _jsx("p", { className: "text-sm font-medium text-gray-800", children: groupData.partnerName || (_jsx("span", { className: "italic text-gray-400", children: "Ch\u01B0a \u0111\u1EB7t t\u00EAn" })) })] })] }), groupData.images && groupData.images.length > 0 && (_jsxs("div", { className: "rounded-lg border border-gray-100 bg-gray-50 px-4 py-3", children: [_jsxs("p", { className: "text-xs text-gray-500 mb-2", children: ["H\u00ECnh \u1EA3nh (", groupData.images.length, ")"] }), _jsx("div", { className: "flex flex-wrap gap-2", children: groupData.images.map((img) => (_jsx("span", { className: "inline-flex items-center rounded-full bg-teal-100 px-2 py-0.5 text-xs text-teal-700", children: img.label || img.id }, img.id))) })] }))] })) }), _jsxs(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100", children: _jsx(Mic, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "N\u1ED9i dung c\u00E2u h\u1ECFi" }), isPartnerResponder && (_jsx(Badge, { className: "bg-orange-100 text-orange-700 border-orange-200 border text-xs font-semibold", children: "C\u00E2u h\u1ECFi m\u1EABu (Example)" }))] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: isPartnerResponder
+                                        ? 'Partner trả lời — học sinh chỉ nghe, không ghi âm'
+                                        : 'Student trả lời — học sinh ghi âm câu trả lời' })] })] }), children: [_jsxs("div", { className: `rounded-xl border p-4 space-y-4 ${isPartnerResponder ? 'border-orange-200 bg-orange-50/40' : 'border-indigo-200 bg-indigo-50/40'}`, children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-base font-semibold text-gray-800", children: "Ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi" }), _jsx("p", { className: "text-sm text-gray-500", children: "Ai s\u1EBD tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi n\u00E0y trong b\u00E0i thi?" })] }) }), _jsxs("div", { className: "flex gap-3", children: [_jsxs("button", { type: "button", onClick: () => form.setValue('responder', 'PARTNER', { shouldValidate: true }), className: `flex flex-1 items-center gap-3 rounded-xl border-2 p-3 transition-all ${isPartnerResponder
+                                            ? 'border-orange-400 bg-orange-50 shadow-sm'
+                                            : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsx("div", { className: `flex h-9 w-9 items-center justify-center rounded-full ${isPartnerResponder ? 'bg-orange-500' : 'bg-gray-200'}`, children: _jsx(User, { className: `h-4 w-4 ${isPartnerResponder ? 'text-white' : 'text-gray-500'}` }) }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: `text-sm font-semibold ${isPartnerResponder ? 'text-orange-800' : 'text-gray-700'}`, children: "Partner tr\u1EA3 l\u1EDDi" }), _jsx("p", { className: `text-xs ${isPartnerResponder ? 'text-orange-600' : 'text-gray-500'}`, children: "C\u00E2u m\u1EABu \u2014 is_example=true, points=0" })] })] }), _jsxs("button", { type: "button", onClick: () => form.setValue('responder', 'STUDENT', { shouldValidate: true }), className: `flex flex-1 items-center gap-3 rounded-xl border-2 p-3 transition-all ${!isPartnerResponder
+                                            ? 'border-indigo-400 bg-indigo-50 shadow-sm'
+                                            : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsx("div", { className: `flex h-9 w-9 items-center justify-center rounded-full ${!isPartnerResponder ? 'bg-indigo-500' : 'bg-gray-200'}`, children: _jsx(UserCheck, { className: `h-4 w-4 ${!isPartnerResponder ? 'text-white' : 'text-gray-500'}` }) }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: `text-sm font-semibold ${!isPartnerResponder ? 'text-indigo-800' : 'text-gray-700'}`, children: "Student tr\u1EA3 l\u1EDDi" }), _jsx("p", { className: `text-xs ${!isPartnerResponder ? 'text-indigo-600' : 'text-gray-500'}`, children: "C\u00E2u th\u1EF1c \u2014 h\u1ECDc sinh ghi \u00E2m" })] })] })] }), form.hasError('responder') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('responder') }))] }), isPartnerResponder && (_jsx("p", { className: "text-xs text-orange-600", children: "C\u00E2u h\u1ECFi m\u1EABu (Partner) lu\u00F4n c\u00F3 0 \u0111i\u1EC3m" })), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(Volume2, { className: "h-4 w-4 text-blue-500" }), "Audio Interlocutor", _jsx("span", { className: "text-xs font-normal text-gray-400", children: "(t\u00F9y ch\u1ECDn)" })] }), _jsx(FileUpload, { id: "interlocutor-audio-url", label: "", accept: "audio/*", value: watchedInterlocutorAudioUrl || '', onChange: (url) => form.setValue('interlocutorAudioUrl', url, { shouldValidate: true }), maxSize: 20, placeholder: "Upload audio c\u00E2u h\u1ECFi c\u1EE7a Interlocutor (MP3, WAV...)", autoUpload: true, prefix: "speaking/interlocutor" }), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsx("p", { className: "text-xs text-blue-700", children: "Audio c\u1EE7a Interlocutor (ng\u01B0\u1EDDi h\u1ECFi). Ph\u00E1t tr\u01B0\u1EDBc khi Partner ho\u1EB7c Student tr\u1EA3 l\u1EDDi." })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(Volume2, { className: "h-4 w-4 text-orange-500" }), "Audio Partner", isPartnerResponder && _jsx("span", { className: "text-red-500", children: "*" }), !isPartnerResponder && (_jsx("span", { className: "text-xs font-normal text-gray-400", children: "(t\u00F9y ch\u1ECDn)" }))] }), _jsx(FileUpload, { id: "partner-audio-url", label: "", accept: "audio/*", value: watchedPartnerAudioUrl || '', onChange: (url) => form.setValue('partnerAudioUrl', url, { shouldValidate: true }), maxSize: 20, placeholder: "Upload audio tr\u1EA3 l\u1EDDi c\u1EE7a Partner (MP3, WAV...)", autoUpload: true, prefix: "speaking/partner" }), form.hasError('partnerAudioUrl') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('partnerAudioUrl') })), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-orange-100 bg-orange-50/60 px-3 py-2", children: [_jsx(Info, { className: "h-4 w-4 text-orange-500 mt-0.5 flex-shrink-0" }), _jsx("p", { className: "text-xs text-orange-700", children: isPartnerResponder
+                                            ? 'Bắt buộc khi responder = Partner. Phát sau audio Interlocutor.'
+                                            : 'Tùy chọn khi responder = Student — dùng cho Talk Together (Partner nói trước, Student trả lời sau).' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(MessageSquareText, { className: "h-4 w-4 text-gray-500" }), "Text c\u00E2u h\u1ECFi (t\u00F9y ch\u1ECDn)"] }), _jsx(Textarea, { ...form.register('questionText'), placeholder: "VD: What's your name? How old are you?", rows: 2, className: "min-h-[60px] border-gray-200 focus:border-indigo-300 focus:ring-indigo-200 resize-none" }), _jsx("p", { className: "text-xs text-gray-400", children: "Ch\u1EC9 hi\u1EC3n th\u1ECB cho admin/gi\u00E1o vi\u00EAn khi review. H\u1ECDc sinh ch\u1EC9 nghe audio." })] }), _jsxs("div", { className: "flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-700", children: "C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng" }), _jsx("p", { className: "text-xs text-gray-400", children: "\u0110\u00E1nh d\u1EA5u c\u00E2u h\u1ECFi n\u00E0y l\u00E0 d\u1EF1 ph\u00F2ng (backup)" })] }), _jsx(Switch, { checked: watchedIsBackup, onCheckedChange: (checked) => form.setValue('isBackup', checked, { shouldValidate: true }) })] })] }), _jsxs(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100", children: _jsx(MessageSquareText, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "\u0110\u00E1p \u00E1n mong mu\u1ED1n" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-green-200 bg-green-50 px-2.5 py-0.5 text-xs font-medium text-green-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: isPartnerResponder
+                                                ? 'Câu mẫu — đáp án dùng để ghi nhớ nội dung (không chấm điểm)'
+                                                : 'Đáp án tham chiếu để giáo viên chấm thủ công' })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddExpectedAnswer, className: "gap-1.5 border-green-200 text-green-700 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }), children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsx("p", { className: "text-xs text-blue-700", children: isPartnerResponder
+                                    ? 'Câu hỏi mẫu: có thể nhập nội dung Partner nói để ghi nhớ. Không dùng để chấm điểm.'
+                                    : 'Giáo viên dùng các đáp án này làm tham chiếu khi chấm thủ công câu trả lời của học sinh.' })] }), watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-green-100 text-xs font-semibold text-green-700 mt-1.5 flex-shrink-0", children: index + 1 }), _jsx(Textarea, { value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), placeholder: index === 0
+                                    ? 'VD: My name is Bingo. I am 8 years old.'
+                                    : 'Thêm đáp án mẫu khác...', rows: 2, className: "min-h-[60px] border-gray-200 bg-white transition-all focus:border-green-300 focus:ring-green-200 resize-none flex-1" }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "mt-1.5 h-7 w-7 text-red-400 hover:text-red-600 hover:bg-red-50 flex-shrink-0", onClick: () => handleRemoveExpectedAnswer(index), "aria-label": `Xóa đáp án ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index)))] }), _jsx(CompactExplanationToggle, { value: watchedExplanation || '', onValueChange: (value) => form.setValue('explanation', value, { shouldValidate: true }), defaultVisible: Boolean(watchedExplanation) }), externalErrors && externalErrors.length > 0 && (_jsx("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4", children: _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "C\u1EA7n s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] }) }))] }));
 }

package/dist/components/questions/types/speaking-conversation/SpeakingConversationPreviewClient.js

@@ -33,9 +33,9 @@ export function SpeakingConversationPreviewClient({ questionData, isReviewMode =
             : questionData.images.length === 4
                 ? 'grid-cols-4'
                 : 'grid-cols-3';
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-white shadow-sm", children: _jsx(MessageCircle, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "H\u1ED9i tho\u1EA1i Speaking (KFS)" })] }), _jsxs("div", { className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold ${isPartnerQuestion
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gray-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100 text-gray-600", children: _jsx(MessageCircle, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "H\u1ED9i tho\u1EA1i Speaking (KFS)" })] }), _jsxs("div", { className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold ${isPartnerQuestion
                                     ? 'bg-orange-100 text-orange-700 border border-orange-200'
-                                    : 'bg-green-100 text-green-700 border border-green-200'}`, children: [_jsx(Mic, { className: "h-3 w-3" }), isPartnerQuestion ? 'Bạn thi (ví dụ)' : 'Học sinh trả lời'] })] }), _jsxs("div", { className: "p-5 space-y-5", children: [(questionData.partnerName || questionData.partnerAvatarUrl) && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-orange-50 border border-orange-100 px-4 py-2.5", children: [_jsx("span", { className: "text-xs font-medium text-orange-600", children: "Nh\u00E2n v\u1EADt b\u1EA1n thi:" }), _jsx(PartnerAvatar, { avatarUrl: questionData.partnerAvatarUrl, name: questionData.partnerName })] })), questionData.questionText && (_jsxs("div", { className: "rounded-lg bg-blue-50 border border-blue-200 px-4 py-3", children: [_jsx("p", { className: "text-xs font-medium text-blue-600 mb-1", children: "N\u1ED9i dung c\u00E2u h\u1ECFi:" }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: questionData.questionText })] })), _jsxs("div", { className: "space-y-3", children: [questionData.interlocutorAudioUrl && (_jsx(ConversationAudioPlayer, { audioUrl: questionData.interlocutorAudioUrl, label: "Audio ng\u01B0\u1EDDi h\u1ECFi (Interlocutor)" })), questionData.partnerAudioUrl && (_jsx(ConversationAudioPlayer, { audioUrl: questionData.partnerAudioUrl, label: "Audio b\u1EA1n thi (Partner)" }))] }), hasImages && (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-gray-500 mb-2", children: "H\u00ECnh \u1EA3nh th\u1EA3o lu\u1EADn:" }), _jsx("div", { className: `grid ${gridCols} gap-3`, style: { maxWidth: '500px' }, children: questionData.images.map((img) => (_jsx(PreviewImageItem, { url: img.url, label: img.label }, img.id))) })] })), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-indigo-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: isPartnerQuestion
+                                    : 'bg-green-100 text-green-700 border border-green-200'}`, children: [_jsx(Mic, { className: "h-3 w-3" }), isPartnerQuestion ? 'Bạn thi (ví dụ)' : 'Học sinh trả lời'] })] }), _jsxs("div", { className: "p-3 space-y-3", children: [(questionData.partnerName || questionData.partnerAvatarUrl) && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-orange-50 border border-orange-100 px-4 py-2.5", children: [_jsx("span", { className: "text-xs font-medium text-orange-600", children: "Nh\u00E2n v\u1EADt b\u1EA1n thi:" }), _jsx(PartnerAvatar, { avatarUrl: questionData.partnerAvatarUrl, name: questionData.partnerName })] })), questionData.questionText && (_jsxs("div", { className: "rounded-lg bg-blue-50 border border-blue-200 px-4 py-3", children: [_jsx("p", { className: "text-xs font-medium text-blue-600 mb-1", children: "N\u1ED9i dung c\u00E2u h\u1ECFi:" }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: questionData.questionText })] })), _jsxs("div", { className: "space-y-3", children: [questionData.interlocutorAudioUrl && (_jsx(ConversationAudioPlayer, { audioUrl: questionData.interlocutorAudioUrl, label: "Audio ng\u01B0\u1EDDi h\u1ECFi (Interlocutor)" })), questionData.partnerAudioUrl && (_jsx(ConversationAudioPlayer, { audioUrl: questionData.partnerAudioUrl, label: "Audio b\u1EA1n thi (Partner)" }))] }), hasImages && (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-gray-500 mb-2", children: "H\u00ECnh \u1EA3nh th\u1EA3o lu\u1EADn:" }), _jsx("div", { className: `grid ${gridCols} gap-3`, style: { maxWidth: '500px' }, children: questionData.images.map((img) => (_jsx(PreviewImageItem, { url: img.url, label: img.label }, img.id))) })] })), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-indigo-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: isPartnerQuestion
                                             ? 'Câu hỏi ví dụ — Bạn thi sẽ trả lời, học sinh lắng nghe'
                                             : 'Học sinh sẽ nhấn nút ghi âm và nói câu trả lời tại đây' })] }), isReviewMode && questionData.expectedAnswers && questionData.expectedAnswers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "C\u00E1c \u0111\u00E1p \u00E1n mong mu\u1ED1n" })] }), _jsx("div", { className: "space-y-2", children: questionData.expectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, index))) })] }))] })] })] }));
 }

package/dist/components/questions/types/speaking-cue-card/SpeakingCueCardClient.js

@@ -23,5 +23,5 @@ export function mapQuestionToSpeakingCueCardData(question) {
 }
 export function SpeakingCueCardClient({ questionData, isReviewMode = false, }) {
     const answers = questionData.expectedAnswers || [];
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-purple-50 to-indigo-50 px-5 py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-purple-500 to-indigo-600 text-white shadow-sm", children: _jsx(CreditCard, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Th\u1EBB g\u1EE3i \u00FD (Cue Card)" })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [_jsx("div", { className: "rounded-xl border border-purple-100 bg-purple-50/40 px-5 py-4", children: _jsx(RichTextHtml, { html: questionData.cueCardHtml, className: "text-sm text-slate-800", fallback: _jsx("p", { className: "text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 n\u1ED9i dung cue card" }) }) }), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-purple-50 ring-2 ring-purple-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-purple-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: "H\u1ECDc sinh \u0111\u1ECDc th\u1EBB g\u1EE3i \u00FD, chu\u1EA9n b\u1ECB, r\u1ED3i tr\u1EA3 l\u1EDDi b\u1EB1ng gi\u1ECDng n\u00F3i" })] }), isReviewMode && answers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "\u0110\u00E1p \u00E1n m\u1EABu" })] }), _jsx("div", { className: "space-y-2", children: answers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, `${answer}-${index}`))) })] })), isReviewMode && questionData.explanation && (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-amber-600" }), _jsx("p", { className: "text-sm font-semibold text-amber-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("p", { className: "text-sm text-amber-700 leading-relaxed whitespace-pre-wrap", children: questionData.explanation })] }))] })] })] }));
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gray-50 px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100 text-gray-600", children: _jsx(CreditCard, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Th\u1EBB g\u1EE3i \u00FD (Cue Card)" })] }) }), _jsxs("div", { className: "p-3 space-y-3", children: [_jsx("div", { className: "rounded-xl border border-purple-100 bg-purple-50/40 px-5 py-4", children: _jsx(RichTextHtml, { html: questionData.cueCardHtml, className: "text-sm text-slate-800", fallback: _jsx("p", { className: "text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 n\u1ED9i dung cue card" }) }) }), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-purple-50 ring-2 ring-purple-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-purple-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: "H\u1ECDc sinh \u0111\u1ECDc th\u1EBB g\u1EE3i \u00FD, chu\u1EA9n b\u1ECB, r\u1ED3i tr\u1EA3 l\u1EDDi b\u1EB1ng gi\u1ECDng n\u00F3i" })] }), isReviewMode && answers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "\u0110\u00E1p \u00E1n m\u1EABu" })] }), _jsx("div", { className: "space-y-2", children: answers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, `${answer}-${index}`))) })] })), isReviewMode && questionData.explanation && (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-amber-600" }), _jsx("p", { className: "text-sm font-semibold text-amber-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("p", { className: "text-sm text-amber-700 leading-relaxed whitespace-pre-wrap", children: questionData.explanation })] }))] })] })] }));
 }

package/dist/components/questions/types/speaking-cue-card/SpeakingCueCardCreator.js

@@ -1,15 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { Input } from '../../../../components/ui/input';
 import { Label } from '../../../../components/ui/label';
 import { CueCardEditor } from '../../../../components/shared/CueCardEditor';
-import { CreatorGuide } from '../../components/CreatorGuide';
 import { CreditCard } from 'lucide-react';
+import { CompactCreatorHeader, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
+import { SpeakingCueCardClient } from './SpeakingCueCardClient';
 export function SpeakingCueCardCreator({ initialData, onChange, onUnsavedChangesChange, externalErrors, validationRef, }) {
     const [htmlContent, setHtmlContent] = useState(initialData?.cueCardHtml || '');
     const [points, setPoints] = useState(initialData?.points ?? 5);
+    const [isClientMode, setIsClientMode] = useState(false);
     const isInitializingRef = useRef(true);
     const previousInitialDataRef = useRef(initialData);
     const previousPayloadRef = useRef(null);
@@ -66,9 +66,8 @@ export function SpeakingCueCardCreator({ initialData, onChange, onUnsavedChanges
             };
         }
     }, [validationRef, htmlContent, points, buildPayload]);
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "purple", steps: [
-                    { text: 'Nhập nội dung Cue Card bao gồm chủ đề và các gợi ý (bullet points)', highlight: true },
-                ], tips: [
-                    'Cue Card nên có 1 chủ đề chính và 3-4 gợi ý (bullet points) theo format IELTS Part 2.',
-                ] }), _jsxs(Card, { className: "overflow-hidden border border-slate-200 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "border-b border-slate-100 bg-slate-50/50 pb-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-purple-100 text-purple-700", children: _jsx(CreditCard, { className: "h-4 w-4" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-slate-800", children: "C\u00E2u h\u1ECFi Th\u1EBB g\u1EE3i \u00FD (Cue Card)" })] }) }), _jsxs(CardContent, { className: "p-0", children: [_jsxs("div", { className: "p-6 space-y-8", children: [_jsxs("div", { className: "w-full xl:w-1/3 space-y-1.5 animate-in fade-in zoom-in-95 duration-200", children: [_jsxs(Label, { htmlFor: "points", className: "text-sm font-semibold text-slate-700", children: ["\u0110i\u1EC3m s\u1ED1 ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "points", type: "number", step: "1", min: "1", value: points, onChange: (e) => setPoints(parseInt(e.target.value) || 0), className: "w-24 border-slate-200 focus:border-blue-400 focus:ring-blue-100" })] }), _jsx("hr", { className: "border-slate-100" }), _jsx("div", { className: "space-y-3", children: _jsx(CueCardEditor, { value: htmlContent, onChange: setHtmlContent, label: _jsxs(Label, { className: "text-sm font-semibold text-slate-700", children: ["N\u1ED9i dung Cue Card ", _jsx("span", { className: "text-red-500", children: "*" })] }) }) })] }), externalErrors && externalErrors.length > 0 && (_jsx("div", { className: "border-t border-red-100 bg-red-50 p-6", children: _jsx("div", { className: "flex items-start gap-3", children: _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "C\u1EA7n ph\u1EA3i s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] }) }) }))] })] })] }));
+    if (isClientMode) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(SpeakingCueCardClient, { questionData: { cueCardHtml: htmlContent }, isReviewMode: true })] }));
+    }
+    return (_jsx("div", { className: "space-y-3", children: _jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(CreditCard, { className: "h-3.5 w-3.5" }), title: "C\u00E2u h\u1ECFi Th\u1EBB g\u1EE3i \u00FD (Cue Card)", points: { value: points, onValueChange: setPoints }, preview: { onClick: () => setIsClientMode(true) } }), children: [_jsx(CueCardEditor, { value: htmlContent, onChange: setHtmlContent, label: _jsxs(Label, { className: "text-sm font-semibold text-slate-700", children: ["N\u1ED9i dung Cue Card ", _jsx("span", { className: "text-red-500", children: "*" })] }) }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "rounded-md border border-red-100 bg-red-50 px-3 py-2 text-xs", children: [_jsx("p", { className: "font-semibold text-red-800", children: "C\u1EA7n ph\u1EA3i s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] }))] }) }));
 }

package/dist/components/questions/types/speaking-describe-image/SpeakingDescribeImageClient.js

@@ -4,7 +4,7 @@ import { Mic, CheckCircle2, Info, ImageIcon, FileQuestion } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 export function SpeakingDescribeImageClient({ questionData, isReviewMode = false, }) {
     const { previewUrl: imageUrl } = usePresignedFileUrl(questionData.imageUrl || '');
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 px-5 py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-white shadow-sm", children: _jsx(Mic, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "M\u00F4 t\u1EA3 h\u00ECnh \u1EA3nh (Speaking)" })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [questionData.question && (_jsxs("div", { className: "flex gap-3", children: [_jsx(FileQuestion, { className: "h-5 w-5 text-indigo-500 shrink-0 mt-0.5" }), _jsx("div", { className: "text-base font-semibold text-gray-800", children: questionData.question })] })), imageUrl ? (_jsx("div", { className: "w-full max-w-3xl mx-auto rounded-xl overflow-hidden shadow-sm border border-gray-200 bg-gray-50 flex justify-center", children: _jsx("img", { src: imageUrl, alt: "Scene", className: "w-[80%] max-h-[400px] object-contain flex-shrink-0" }) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-10 rounded-xl border border-dashed border-gray-300 bg-gray-50", children: [_jsx(ImageIcon, { className: "h-8 w-8 text-gray-400 mb-2" }), _jsx("span", { className: "text-sm text-gray-500", children: "Ch\u01B0a t\u1EA3i h\u00ECnh \u1EA3nh m\u00F4 t\u1EA3" })] })), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-indigo-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: isReviewMode && questionData.audioUrl
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gray-50 px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100 text-gray-600", children: _jsx(Mic, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "M\u00F4 t\u1EA3 h\u00ECnh \u1EA3nh (Speaking)" })] }) }), _jsxs("div", { className: "p-3 space-y-3", children: [questionData.question && (_jsxs("div", { className: "flex gap-3", children: [_jsx(FileQuestion, { className: "h-5 w-5 text-indigo-500 shrink-0 mt-0.5" }), _jsx("div", { className: "text-base font-semibold text-gray-800", children: questionData.question })] })), imageUrl ? (_jsx("div", { className: "w-full max-w-3xl mx-auto rounded-xl overflow-hidden shadow-sm border border-gray-200 bg-gray-50 flex justify-center", children: _jsx("img", { src: imageUrl, alt: "Scene", className: "w-[80%] max-h-[400px] object-contain flex-shrink-0" }) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-10 rounded-xl border border-dashed border-gray-300 bg-gray-50", children: [_jsx(ImageIcon, { className: "h-8 w-8 text-gray-400 mb-2" }), _jsx("span", { className: "text-sm text-gray-500", children: "Ch\u01B0a t\u1EA3i h\u00ECnh \u1EA3nh m\u00F4 t\u1EA3" })] })), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-indigo-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: isReviewMode && questionData.audioUrl
                                             ? "Audio ghi âm của học sinh (đã lưu)"
                                             : "Học sinh sẽ nhìn hình ảnh và nhấn nút micro để mô tả" })] }), isReviewMode && questionData.expectedAnswers && questionData.expectedAnswers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4 mt-6", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "C\u00E1c \u0111\u00E1p \u00E1n t\u1EF1 \u0111\u1ED9ng (Tham chi\u1EBFu AI)" })] }), _jsx("div", { className: "space-y-2", children: questionData.expectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, index))) })] })), isReviewMode && questionData.explanation && (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-4 mt-2", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-amber-600" }), _jsx("p", { className: "text-sm font-semibold text-amber-800", children: "Gi\u1EA3i th\u00EDch gi\u00E1o vi\u00EAn" })] }), _jsx("p", { className: "text-sm text-amber-700 leading-relaxed whitespace-pre-wrap", children: questionData.explanation })] }))] })] })] }));
 }