@tinyweb_dev/oe-exam-sdk 1.0.5 → 1.0.7

package/dist/components/questions/types/listen-and-choose-objects-in-scene/ListenAndChooseObjectsInSceneCreator.js

@@ -4,12 +4,10 @@ import { useState, useRef, useEffect, useCallback } 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 { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { PointsInput } from '../../../../components/ui/points-input';
 import { RadioGroup, RadioGroupItem } from '../../../../components/ui/radio-group';
-import { Pencil, Eye, Plus, Trash2, Image as ImageIcon, Volume2, Lightbulb, MousePointerClick, GripVertical, ListChecks, BookOpen, } from 'lucide-react';
+import { Plus, Trash2, Image as ImageIcon, Volume2, Lightbulb, MousePointerClick, GripVertical, ListChecks, } from 'lucide-react';
 import { FileUpload } from '../../../../components/ui/file-upload';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
 import { listenAndChooseObjectsInSceneFormSchema, } from '../../../../shared/lib/validation/listen-and-choose-objects-in-scene.validation';
@@ -17,7 +15,6 @@ import { ListenAndChooseObjectsInSceneClient } from './ListenAndChooseObjectsInS
 import { useSceneQuestionGroup } from '../../_shared/hooks/useSceneQuestionGroup';
 import { generateObjectId } from '../../_shared/utils/id-generator';
 import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
-import { CreatorGuide } from '../../components/CreatorGuide';
 /**
  * Scene Object Editor - An individual object node editor row
  */
@@ -347,7 +344,7 @@ function ListenAndChooseObjectsInSceneCreatorContent({ initialData, onSave, onSa
     // ============ RENDER ============
     // Preview mode
     if (isClientMode) {
-        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: "Nghe v\u00E0 ch\u1ECDn \u0111\u1ED1i t\u01B0\u1EE3ng (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i ch\u1EC9nh s\u1EEDa"] })] }) }) }), _jsx(ListenAndChooseObjectsInSceneClient, { questionData: {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(ListenAndChooseObjectsInSceneClient, { questionData: {
                         audioUrl: audioPreviewUrl || audioUrl,
                         backgroundImageUrl: backgroundPreviewUrl || backgroundImageUrl,
                         objectNodes,
@@ -355,31 +352,27 @@ function ListenAndChooseObjectsInSceneCreatorContent({ initialData, onSave, onSa
     }
     const formErrors = form.formState.errors;
     // Creator mode
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "purple", steps: [
-                    { text: 'Upload ảnh nền (Scene) — ảnh này dùng chung cho tất cả câu hỏi trong nhóm' },
-                    { text: 'Nhấn "Thêm đối tượng" để tạo các object trên ảnh nền. Mỗi đối tượng cần có tên và hình ảnh riêng' },
-                    { text: 'Kéo thả đối tượng trên ảnh nền để điều chỉnh vị trí, hoặc nhập tọa độ X, Y, Width, Height thủ công' },
-                    { text: 'Upload audio câu hỏi — học sinh sẽ nghe audio rồi chọn đúng đối tượng trên ảnh' },
-                    { text: 'Chọn đáp án đúng cho câu hỏi này từ danh sách đối tượng đã tạo', highlight: true },
-                    { text: 'Thêm giải thích (không bắt buộc) — sẽ hiển thị sau khi học sinh trả lời' },
-                ], tips: [
-                    'Số đối tượng nên nhiều hơn số câu hỏi trong part để tạo lựa chọn nhiễu. Đặt tên rõ ràng và chọn hình ảnh dễ phân biệt giữa các đối tượng',
-                    'Kéo thả trực tiếp trên ảnh nền sẽ nhanh hơn nhập tọa độ thủ công',
-                ] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-purple-500 via-violet-500 to-fuchsia-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(ListChecks, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Nh\u00F3m \u0111\u00E1p \u00E1n" }), _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\uDDBC\uFE0F" }), _jsxs("span", { children: ["Nh\u00F3m ", currentGroupNumber] }), _jsx("span", { className: "text-xs font-normal opacity-75 ml-1", children: "(D\u00F9ng chung)" })] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !backgroundImageUrl || objectNodes.length < 2, className: "gap-2 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-purple-400 to-violet-400" }), _jsx(CardHeader, { className: "pb-4", 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-purple-100", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5 text-purple-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "\u1EA2nh n\u1EC1n & \u0110\u1ED1i t\u01B0\u1EE3ng trong Scene" })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: `rounded-xl border-2 p-5 bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200`, children: _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-blue-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-blue-600" }), "\u1EA2nh n\u1EC1n (Scene) ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "scene-background", label: "", accept: "image/*", value: backgroundImageUrl, onChange: (url) => {
-                                                setBackgroundImageUrl(url);
-                                                form.clearErrors();
-                                            }, onPresignedUrlChange: setBackgroundPreviewUrl, maxSize: 10, placeholder: "Upload h\u00ECnh \u1EA3nh n\u1EC1n c\u1EA3nh", autoUpload: true, prefix: "questions/scenes" }), formErrors.backgroundImageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: formErrors.backgroundImageUrl.message })), backgroundPreviewUrl && (_jsxs("div", { className: "mt-2 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 isolate", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsx("span", { className: "text-xs font-medium text-gray-500", children: "\u1EA2nh n\u1EC1n - K\u00E9o th\u1EA3 \u0111\u1ED1i t\u01B0\u1EE3ng \u0111\u1EC3 \u0111\u1ECBnh v\u1ECB" }) }), _jsx("div", { className: "p-2", children: _jsx(ScenePreviewWithDrag, { backgroundUrl: backgroundPreviewUrl, objectNodes: objectNodes, correctObjectId: correctObjectId, onNodeDrag: handleNodeDrag, onNodeResize: handleNodeResize }) })] }))] }) }), _jsxs("div", { className: "pt-4 border-t border-gray-100", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", 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(MousePointerClick, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs("h3", { className: "text-lg font-semibold text-gray-800", children: ["\u0110\u1ED1i t\u01B0\u1EE3ng (", objectNodes.length, " items)"] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addObjectNode, 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\u1ED1i t\u01B0\u1EE3ng"] })] }), _jsx("div", { className: "space-y-3", children: objectNodes.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50 py-10", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-100", children: _jsx(ImageIcon, { className: "h-6 w-6 text-gray-400" }) }), _jsx("p", { className: "text-sm text-gray-500", children: "Ch\u01B0a c\u00F3 \u0111\u1ED1i t\u01B0\u1EE3ng n\u00E0o. Nh\u1EA5n \"Th\u00EAm \u0111\u1ED1i t\u01B0\u1EE3ng\" \u0111\u1EC3 t\u1EA1o c\u00E1c \u0111\u1ED1i t\u01B0\u1EE3ng chung cho nh\u00F3m." })] })) : (objectNodes.map((node, index) => (_jsx(SceneObjectEditor, { node: node, index: index, isCorrect: false, onUpdate: updateObjectNode, onRemove: removeObjectNode, onSelectCorrect: () => { }, errors: {
-                                                label: formErrors.objectNodes?.[index]?.label?.message,
-                                                imageUrl: formErrors.objectNodes?.[index]?.imageUrl?.message,
-                                            } }, node.id)))) })] })] })] }), _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-400" }), _jsx(CardHeader, { className: "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-green-100", children: _jsx(Volume2, { className: "h-4 w-4 text-green-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Th\u00F4ng tin c\u00E2u h\u1ECFi" })] }) }), _jsxs(CardContent, { className: "space-y-6 pt-2", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [_jsx("div", { className: "flex-1", children: _jsx(PointsInput, { value: points, onChange: (e) => setPoints(parseFloat(e.target.value) || 1) }) }), _jsx("div", { className: "flex-1 flex flex-col justify-center" })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "Audio c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "scene-audio", label: "", accept: "audio/*", value: audioUrl, onChange: (url) => {
-                                            setAudioUrl(url);
-                                            form.clearErrors();
-                                        }, onPresignedUrlChange: setAudioPreviewUrl, maxSize: 10, placeholder: "Upload file audio c\u00E2u h\u1ECFi", autoUpload: true, prefix: "questions/audio", examId: examId || undefined, partId: partId || undefined }), formErrors.audioUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: formErrors.audioUrl.message })), audioPreviewUrl && (_jsx("audio", { controls: true, className: "mt-2 w-full", src: audioPreviewUrl, children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }), _jsxs("div", { className: "space-y-3", 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-green-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-green-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng c\u1EE7a c\u00E2u h\u1ECFi n\u00E0y ", _jsx("span", { className: "text-red-500", children: "*" })] })] }), objectNodes.length === 0 ? (_jsx("p", { className: "text-sm text-amber-600 italic", children: "Vui l\u00F2ng th\u00EAm \u0111\u1ED1i t\u01B0\u1EE3ng \u1EDF b\u00EAn tr\u00EAn tr\u01B0\u1EDBc khi ch\u1ECDn \u0111\u00E1p \u00E1n." })) : (_jsx(RadioGroup, { value: correctObjectId, onValueChange: (val) => {
-                                            setCorrectObjectId(val);
-                                            form.clearErrors(); // Xóa lỗi validation khi người dùng đã chọn đáp án
-                                        }, className: "grid gap-3 sm:grid-cols-2 md:grid-cols-3", children: objectNodes.map((node, index) => (_jsxs("label", { className: `flex cursor-pointer items-start gap-3 rounded-lg border-2 p-3 transition-all ${correctObjectId === node.id
-                                                ? 'border-green-500 bg-green-50 ring-1 ring-green-500'
-                                                : 'border-gray-200 hover:border-green-300 hover:bg-green-50/50'}`, children: [_jsx(RadioGroupItem, { value: node.id, id: `correct-${node.id}`, className: "mt-1 flex-shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "font-medium text-gray-900 line-clamp-1 break-all", children: [index + 1, ". ", node.label || '(Chưa đặt tên)'] }), node.imageUrl ? (_jsx("div", { className: "mt-2 h-12 w-full max-w-16 rounded overflow-hidden bg-white border border-gray-200", children: _jsx(PresignedImage, { url: node.imageUrl, alt: node.label }) })) : (_jsx("div", { className: "mt-2 text-xs text-gray-400 italic", children: "Ch\u01B0a c\u00F3 h\u00ECnh" }))] })] }, node.id))) }))] }), formErrors.correctObjectId && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 mt-3", children: _jsxs("p", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", formErrors.correctObjectId.message] }) }))] })] }), _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, { 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" }) })] })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(ListChecks, { className: "h-3.5 w-3.5" }), title: "Nh\u00F3m \u0111\u00E1p \u00E1n", extraActions: _jsxs("span", { className: "inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600", children: ["Nh\u00F3m ", currentGroupNumber] }), points: {
+                        value: points,
+                        onValueChange: setPoints,
+                    }, preview: {
+                        onClick: () => setIsClientMode(true),
+                        disabled: !backgroundImageUrl || objectNodes.length < 2,
+                    } }), contentClassName: "hidden", children: null }), _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(ImageIcon, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: "\u1EA2nh n\u1EC1n & \u0110\u1ED1i t\u01B0\u1EE3ng trong Scene" })] }), children: [_jsx("div", { className: `rounded-xl border-2 p-5 bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200`, children: _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-blue-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-blue-600" }), "\u1EA2nh n\u1EC1n (Scene) ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "scene-background", label: "", accept: "image/*", value: backgroundImageUrl, onChange: (url) => {
+                                        setBackgroundImageUrl(url);
+                                        form.clearErrors();
+                                    }, onPresignedUrlChange: setBackgroundPreviewUrl, maxSize: 10, placeholder: "Upload h\u00ECnh \u1EA3nh n\u1EC1n c\u1EA3nh", autoUpload: true, prefix: "questions/scenes" }), formErrors.backgroundImageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: formErrors.backgroundImageUrl.message })), backgroundPreviewUrl && (_jsxs("div", { className: "mt-2 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 isolate", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsx("span", { className: "text-xs font-medium text-gray-500", children: "\u1EA2nh n\u1EC1n - K\u00E9o th\u1EA3 \u0111\u1ED1i t\u01B0\u1EE3ng \u0111\u1EC3 \u0111\u1ECBnh v\u1ECB" }) }), _jsx("div", { className: "p-2", children: _jsx(ScenePreviewWithDrag, { backgroundUrl: backgroundPreviewUrl, objectNodes: objectNodes, correctObjectId: correctObjectId, onNodeDrag: handleNodeDrag, onNodeResize: handleNodeResize }) })] }))] }) }), _jsxs("div", { className: "pt-4 border-t border-gray-100", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", 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(MousePointerClick, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs("h3", { className: "text-lg font-semibold text-gray-800", children: ["\u0110\u1ED1i t\u01B0\u1EE3ng (", objectNodes.length, " items)"] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addObjectNode, 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\u1ED1i t\u01B0\u1EE3ng"] })] }), _jsx("div", { className: "space-y-3", children: objectNodes.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50 py-10", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-100", children: _jsx(ImageIcon, { className: "h-6 w-6 text-gray-400" }) }), _jsx("p", { className: "text-sm text-gray-500", children: "Ch\u01B0a c\u00F3 \u0111\u1ED1i t\u01B0\u1EE3ng n\u00E0o. Nh\u1EA5n \"Th\u00EAm \u0111\u1ED1i t\u01B0\u1EE3ng\" \u0111\u1EC3 t\u1EA1o c\u00E1c \u0111\u1ED1i t\u01B0\u1EE3ng chung cho nh\u00F3m." })] })) : (objectNodes.map((node, index) => (_jsx(SceneObjectEditor, { node: node, index: index, isCorrect: false, onUpdate: updateObjectNode, onRemove: removeObjectNode, onSelectCorrect: () => { }, errors: {
+                                        label: formErrors.objectNodes?.[index]?.label?.message,
+                                        imageUrl: formErrors.objectNodes?.[index]?.imageUrl?.message,
+                                    } }, node.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(Volume2, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Th\u00F4ng tin c\u00E2u h\u1ECFi" })] }), children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "Audio c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "scene-audio", label: "", accept: "audio/*", value: audioUrl, onChange: (url) => {
+                                    setAudioUrl(url);
+                                    form.clearErrors();
+                                }, onPresignedUrlChange: setAudioPreviewUrl, maxSize: 10, placeholder: "Upload file audio c\u00E2u h\u1ECFi", autoUpload: true, prefix: "questions/audio", examId: examId || undefined, partId: partId || undefined }), formErrors.audioUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: formErrors.audioUrl.message })), audioPreviewUrl && (_jsx("audio", { controls: true, className: "mt-2 w-full", src: audioPreviewUrl, children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }), _jsxs("div", { className: "space-y-3", 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-green-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-green-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng c\u1EE7a c\u00E2u h\u1ECFi n\u00E0y ", _jsx("span", { className: "text-red-500", children: "*" })] })] }), objectNodes.length === 0 ? (_jsx("p", { className: "text-sm text-amber-600 italic", children: "Vui l\u00F2ng th\u00EAm \u0111\u1ED1i t\u01B0\u1EE3ng \u1EDF b\u00EAn tr\u00EAn tr\u01B0\u1EDBc khi ch\u1ECDn \u0111\u00E1p \u00E1n." })) : (_jsx(RadioGroup, { value: correctObjectId, onValueChange: (val) => {
+                                    setCorrectObjectId(val);
+                                    form.clearErrors(); // Xóa lỗi validation khi người dùng đã chọn đáp án
+                                }, className: "grid gap-3 sm:grid-cols-2 md:grid-cols-3", children: objectNodes.map((node, index) => (_jsxs("label", { className: `flex cursor-pointer items-start gap-3 rounded-lg border-2 p-3 transition-all ${correctObjectId === node.id
+                                        ? 'border-green-500 bg-green-50 ring-1 ring-green-500'
+                                        : 'border-gray-200 hover:border-green-300 hover:bg-green-50/50'}`, children: [_jsx(RadioGroupItem, { value: node.id, id: `correct-${node.id}`, className: "mt-1 flex-shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "font-medium text-gray-900 line-clamp-1 break-all", children: [index + 1, ". ", node.label || '(Chưa đặt tên)'] }), node.imageUrl ? (_jsx("div", { className: "mt-2 h-12 w-full max-w-16 rounded overflow-hidden bg-white border border-gray-200", children: _jsx(PresignedImage, { url: node.imageUrl, alt: node.label }) })) : (_jsx("div", { className: "mt-2 text-xs text-gray-400 italic", children: "Ch\u01B0a c\u00F3 h\u00ECnh" }))] })] }, node.id))) }))] }), formErrors.correctObjectId && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 mt-3", children: _jsxs("p", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", formErrors.correctObjectId.message] }) }))] }), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(explanation) })] }));
 }
 export function ListenAndChooseObjectsInSceneCreator(props) {
     return _jsx(ListenAndChooseObjectsInSceneCreatorContent, { ...props });

package/dist/components/questions/types/listen-and-drag-objects-into-scene/ListenAndDragObjectsIntoSceneClient.js

@@ -76,9 +76,9 @@ export function ListenAndDragObjectsIntoSceneClient({ questionData, onSubmit, is
         selectedDropZoneId === correctAnswer.dropZoneId;
     const selectedObject = questionData.objectNodes.find((n) => n.id === selectedObjectId);
     const selectedDropZone = questionData.dropZones.find((z) => z.id === selectedDropZoneId);
-    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: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white 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-orange-500 to-amber-600 text-white shadow-sm", children: _jsx(CircleHelp, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 k\u00E9o th\u1EA3 \u0111\u1ED1i t\u01B0\u1EE3ng v\u00E0o c\u1EA3nh" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAnswerCorrect
+    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: [_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(CircleHelp, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 k\u00E9o th\u1EA3 \u0111\u1ED1i t\u01B0\u1EE3ng v\u00E0o c\u1EA3nh" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAnswerCorrect
                                     ? 'bg-green-100 text-green-700'
-                                    : 'bg-red-100 text-red-700'), children: [isAnswerCorrect ? (_jsx(Check, { className: "h-3.5 w-3.5" })) : (_jsx(X, { className: "h-3.5 w-3.5" })), isAnswerCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-5 p-5", children: [audioUrl && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-orange-100 bg-gradient-to-r from-orange-50 to-amber-50 p-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-orange-500 text-white", children: _jsx(Volume2, { className: "h-4 w-4" }) }), _jsx("audio", { controls: true, className: "h-8 w-full", src: audioUrl, children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })] })), _jsxs("div", { className: "flex gap-4", children: [_jsx("div", { className: "flex w-24 flex-shrink-0 flex-col gap-2", children: questionData.objectNodes.slice(0, Math.ceil(questionData.objectNodes.length / 2)).map((node) => {
+                                    : 'bg-red-100 text-red-700'), children: [isAnswerCorrect ? (_jsx(Check, { className: "h-3.5 w-3.5" })) : (_jsx(X, { className: "h-3.5 w-3.5" })), isAnswerCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-3 p-3", children: [audioUrl && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-orange-100 bg-gradient-to-r from-orange-50 to-amber-50 p-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-orange-500 text-white", children: _jsx(Volume2, { className: "h-4 w-4" }) }), _jsx("audio", { controls: true, className: "h-8 w-full", src: audioUrl, children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })] })), _jsxs("div", { className: "flex gap-4", children: [_jsx("div", { className: "flex w-24 flex-shrink-0 flex-col gap-2", children: questionData.objectNodes.slice(0, Math.ceil(questionData.objectNodes.length / 2)).map((node) => {
                                             const isSelected = selectedObjectId === node.id;
                                             const isDragging = draggedObjectId === node.id;
                                             const isCorrectObj = isReviewMode && correctAnswer?.objectId === node.id;

package/dist/components/questions/types/listen-and-drag-objects-into-scene/ListenAndDragObjectsIntoSceneCreator.js

@@ -4,11 +4,9 @@ import { useState, useRef, useEffect, useCallback } 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 { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { PointsInput } from '../../../../components/ui/points-input';
 import { RadioGroup, RadioGroupItem } from '../../../../components/ui/radio-group';
-import { Pencil, Eye, Plus, Trash2, Image as ImageIcon, Volume2, Lightbulb, GripVertical, Target, Move, ChevronDown, ChevronUp, MapPin, ArrowRight, AlertTriangle, ListChecks, BookOpen, } from 'lucide-react';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
+import { Plus, Trash2, Image as ImageIcon, Volume2, Lightbulb, GripVertical, Target, Move, ChevronDown, ChevronUp, MapPin, ArrowRight, AlertTriangle, ListChecks, } from 'lucide-react';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
@@ -16,7 +14,6 @@ import { listenAndDragObjectsIntoSceneFormSchema, } from '../../../../shared/lib
 import { ListenAndDragObjectsIntoSceneClient } from './ListenAndDragObjectsIntoSceneClient';
 import { useSceneQuestionGroup } from '../../_shared/hooks/useSceneQuestionGroup';
 import { generateObjectId } from '../../_shared/utils/id-generator';
-import { CreatorGuide } from '../../components/CreatorGuide';
 import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
 // Drop zone color palette for visual correlation between editor and preview
 const DROP_ZONE_COLORS = [
@@ -417,7 +414,7 @@ function ListenAndDragObjectsIntoSceneCreatorContent({ initialData, onSave, onSa
     // ============ RENDER ============
     // Preview mode
     if (isClientMode) {
-        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: "Nghe v\u00E0 k\u00E9o th\u1EA3 \u0111\u1ED1i t\u01B0\u1EE3ng (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i ch\u1EC9nh s\u1EEDa"] })] }) }) }), _jsx(ListenAndDragObjectsIntoSceneClient, { questionData: {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(ListenAndDragObjectsIntoSceneClient, { questionData: {
                         audioUrl: audioPreviewUrl || audioUrl,
                         backgroundImageUrl: backgroundPreviewUrl || backgroundImageUrl,
                         objectNodes,
@@ -425,32 +422,32 @@ function ListenAndDragObjectsIntoSceneCreatorContent({ initialData, onSave, onSa
                     }, isReviewMode: true, userAnswer: correctObjectId && correctDropZoneId ? { objectId: correctObjectId, dropZoneId: correctDropZoneId } : undefined, correctAnswer: correctObjectId && correctDropZoneId ? { objectId: correctObjectId, dropZoneId: correctDropZoneId } : undefined, explanation: explanation })] }));
     }
     // Creator mode
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "rose", steps: [
-                    { text: 'Upload hình nền (Scene) chung cho nhóm câu hỏi' },
-                    { text: 'Thêm các đối tượng kéo-thả (draggable objects) với hình ảnh và tên' },
-                    { text: 'Thiết lập vùng thả (drop zones) trên hình nền — vị trí mà học sinh cần kéo đối tượng vào' },
-                    { text: 'Upload audio hướng dẫn cho từng câu' },
-                    { text: 'Ghép đúng đối tượng với vùng thả tương ứng', highlight: true },
-                ], tips: ['Vùng thả nên đủ lớn và rõ ràng, tránh chồng chéo'] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-rose-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-rose-500 via-pink-500 to-fuchsia-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-rose-500 to-pink-600 shadow-md", children: _jsx(ListChecks, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Nh\u00F3m \u0111\u00E1p \u00E1n" }), _jsxs("div", { className: "mt-1.5 inline-flex items-center gap-1.5 rounded-full bg-rose-100 px-3 py-1 text-sm font-medium text-rose-700", children: [_jsx("span", { children: "\uD83D\uDDBC\uFE0F" }), _jsxs("span", { children: ["Nh\u00F3m ", currentGroupNumber] }), _jsx("span", { className: "text-xs font-normal opacity-75 ml-1", children: "(D\u00F9ng chung)" })] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !backgroundImageUrl || objectNodes.length < 2 || dropZones.length < 1, className: "gap-2 border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-rose-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-rose-400 to-pink-400" }), _jsx(CardHeader, { className: "pb-3", 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-rose-100", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5 text-rose-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "\u1EA2nh n\u1EC1n & \u0110\u1ED1i t\u01B0\u1EE3ng k\u00E9o th\u1EA3" })] }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setIsGroupDataCollapsed(!isGroupDataCollapsed), className: "gap-1 text-gray-500 hover:text-gray-700", children: [isGroupDataCollapsed ? _jsx(ChevronDown, { className: "h-4 w-4" }) : _jsx(ChevronUp, { className: "h-4 w-4" }), isGroupDataCollapsed ? 'Mở rộng' : 'Thu gọn'] })] }) }), !isGroupDataCollapsed && (_jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border-2 p-5 bg-gradient-to-r from-orange-50 to-amber-50 border-orange-200", children: _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-orange-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-orange-600" }), "\u1EA2nh n\u1EC1n (Scene) ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "drag-scene-background", label: "", accept: "image/*", value: backgroundImageUrl, onChange: (url) => {
-                                                setBackgroundImageUrl(url);
-                                                form.clearErrors();
-                                            }, onPresignedUrlChange: setBackgroundPreviewUrl, maxSize: 10, placeholder: "Upload h\u00ECnh \u1EA3nh n\u1EC1n h\u00ECnh \u1EA3nh n\u1EC1n", autoUpload: true, prefix: "questions/scenes" }), form.formState.errors.backgroundImageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.backgroundImageUrl.message }))] }) }), backgroundPreviewUrl && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden isolate", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 px-4 py-2.5 bg-white", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-blue-600" }), _jsx("span", { className: "text-sm font-semibold text-gray-700", children: "H\u00ECnh \u1EA3nh n\u1EC1n" }), _jsx(SharedGroupBadge, { groupNumber: currentGroupNumber })] }), _jsx("div", { className: "text-xs text-gray-500 font-medium", children: "K\u00E9o th\u1EA3 v\u1ECB tr\u00ED \u0111\u1EC3 \u0111\u1ECBnh v\u1ECB tr\u00EAn \u1EA3nh n\u1EC1n" })] }), _jsx("div", { className: "p-3 w-full", children: _jsx(DropZonePreviewWithDrag, { backgroundUrl: backgroundPreviewUrl, dropZones: dropZones, onZoneDrag: handleZoneDrag, onZoneResize: handleZoneResize, activeZoneId: activeDropZoneId, onSelectZone: setActiveDropZoneId }) })] })), !backgroundPreviewUrl && (_jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50/50 p-6", children: _jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-gray-100", children: _jsx(Target, { className: "h-5 w-5 text-gray-400" }) }), _jsx("p", { className: "text-sm text-gray-500", children: "Upload \u1EA3nh n\u1EC1n tr\u01B0\u1EDBc \u0111\u1EC3 thi\u1EBFt l\u1EADp v\u1ECB tr\u00ED tr\u00EAn h\u00ECnh \u1EA3nh n\u1EC1n." })] }) })), backgroundPreviewUrl && (_jsxs("div", { className: "pt-4 border-t border-gray-100", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", 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-blue-100", children: _jsx(Target, { className: "h-3.5 w-3.5 text-blue-600" }) }), _jsxs("h3", { className: "text-base font-semibold text-gray-800", children: ["V\u1ECB tr\u00ED (", dropZones.length, " items)"] }), _jsx(SharedGroupBadge, { groupNumber: currentGroupNumber })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addDropZone, className: "gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm v\u1ECB tr\u00ED"] })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: dropZones.length === 0 ? (_jsxs("div", { className: "col-span-full flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50 py-10", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-100", children: _jsx(Target, { className: "h-6 w-6 text-gray-400" }) }), _jsx("p", { className: "text-sm text-gray-500", children: "Ch\u01B0a c\u00F3 v\u1ECB tr\u00ED n\u00E0o. Nh\u1EA5n \u201CTh\u00EAm v\u1ECB tr\u00ED\u201D \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u." })] })) : (dropZones.map((zone, index) => (_jsx(DropZoneEditor, { zone: zone, index: index, onUpdate: updateDropZone, onRemove: removeDropZone, isActive: activeDropZoneId === zone.id, onSelect: setActiveDropZoneId }, zone.id)))) }), form.formState.errors.dropZones && (_jsx("div", { className: "col-span-full mt-2 rounded-lg border border-red-200 bg-red-50 p-3", children: _jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.dropZones.message || "Vui lòng nhập đầy đủ thông tin cho các vị trí." }) }))] })), _jsxs("div", { className: "pt-4 border-t border-gray-100", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", 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-amber-100", children: _jsx(Move, { className: "h-3.5 w-3.5 text-amber-600" }) }), _jsxs("h3", { className: "text-base font-semibold text-gray-800", children: ["\u0110\u1ED1i t\u01B0\u1EE3ng (", objectNodes.length, " items)"] }), _jsx(SharedGroupBadge, { groupNumber: currentGroupNumber })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addObjectNode, 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\u1ED1i t\u01B0\u1EE3ng"] })] }), _jsxs("div", { className: "space-y-3", children: [objectNodes.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50 py-10", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-100", children: _jsx(ImageIcon, { className: "h-6 w-6 text-gray-400" }) }), _jsx("p", { className: "text-sm text-gray-500", children: "Ch\u01B0a c\u00F3 \u0111\u1ED1i t\u01B0\u1EE3ng n\u00E0o. Nh\u1EA5n \u201CTh\u00EAm \u0111\u1ED1i t\u01B0\u1EE3ng\u201D \u0111\u1EC3 t\u1EA1o c\u00E1c \u0111\u1ED1i t\u01B0\u1EE3ng \u1EDF sidebar." })] })) : (objectNodes.map((node, index) => (_jsx(DragObjectEditor, { node: node, index: index, onUpdate: updateObjectNode, onRemove: removeObjectNode }, node.id)))), form.formState.errors.objectNodes && (_jsx("p", { className: "mt-2 text-sm text-red-500", children: form.formState.errors.objectNodes.message || "Vui lòng nhập đầy đủ thông tin cho các đối tượng." }))] })] })] }))] }), _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-400" }), _jsx(CardHeader, { className: "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-green-100", children: _jsx(Volume2, { className: "h-4 w-4 text-green-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Th\u00F4ng tin c\u00E2u h\u1ECFi" })] }) }), _jsxs(CardContent, { className: "space-y-6 pt-2", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [_jsx("div", { className: "flex-1", children: _jsx(PointsInput, { value: points, onChange: (e) => setPoints(parseFloat(e.target.value) || 1) }) }), _jsx("div", { className: "flex-1 flex flex-col justify-center pt-2" })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "Audio c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "drag-scene-audio", label: "", accept: "audio/*", value: audioUrl, onChange: (url) => {
-                                            setAudioUrl(url);
-                                            form.clearErrors();
-                                        }, onPresignedUrlChange: setAudioPreviewUrl, maxSize: 10, placeholder: "Upload file audio c\u00E2u h\u1ECFi", autoUpload: true, prefix: "questions/audio", examId: examId || undefined, partId: partId || undefined }), form.formState.errors.audioUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.audioUrl.message })), audioPreviewUrl && (_jsx("audio", { controls: true, className: "mt-2 w-full", src: audioPreviewUrl, children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }), _jsxs("div", { className: "space-y-3", 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-green-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-green-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u1ED1i t\u01B0\u1EE3ng \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] })] }), objectNodes.length === 0 ? (_jsx("p", { className: "text-sm text-amber-600 italic", children: "Vui l\u00F2ng th\u00EAm \u0111\u1ED1i t\u01B0\u1EE3ng \u1EDF ph\u1EA7n d\u1EEF li\u1EC7u nh\u00F3m tr\u01B0\u1EDBc khi ch\u1ECDn \u0111\u00E1p \u00E1n." })) : (_jsx(RadioGroup, { value: correctObjectId, onValueChange: (val) => {
-                                            setCorrectObjectId(val);
-                                            form.clearErrors();
-                                        }, className: "grid gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4", children: objectNodes.map((node, index) => (_jsxs("label", { className: `flex cursor-pointer items-center gap-3 rounded-lg border-2 p-3 transition-all ${correctObjectId === node.id
-                                                ? 'border-green-500 bg-green-50 ring-1 ring-green-500 shadow-sm'
-                                                : 'border-gray-200 hover:border-green-300 hover:bg-green-50/50'}`, children: [_jsx(RadioGroupItem, { value: node.id, id: `correct-obj-${node.id}`, className: "flex-shrink-0" }), _jsx("div", { className: "h-12 w-12 flex-shrink-0 overflow-hidden rounded-md border border-gray-200 bg-white", children: node.imageUrl ? (_jsx(PresignedImage, { url: node.imageUrl, alt: node.label })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(ImageIcon, { className: "h-4 w-4 text-gray-300" }) })) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("p", { className: "font-medium text-gray-900 text-sm line-clamp-2 break-all", children: [index + 1, ". ", node.label || '(Chưa đặt tên)'] }) })] }, node.id))) })), form.formState.errors.correctObjectId && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 mt-2", children: _jsxs("p", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", form.formState.errors.correctObjectId.message] }) }))] }), _jsxs("div", { className: "space-y-3", 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-blue-100", children: _jsx(Target, { className: "h-3.5 w-3.5 text-blue-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["V\u1ECB tr\u00ED \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] })] }), dropZones.length === 0 ? (_jsx("p", { className: "text-sm text-amber-600 italic", children: "Vui l\u00F2ng th\u00EAm v\u1ECB tr\u00ED \u1EDF ph\u1EA7n d\u1EEF li\u1EC7u nh\u00F3m tr\u01B0\u1EDBc khi ch\u1ECDn \u0111\u00E1p \u00E1n." })) : (_jsx(RadioGroup, { value: correctDropZoneId, onValueChange: (val) => {
-                                            setCorrectDropZoneId(val);
-                                            form.clearErrors();
-                                        }, className: "grid gap-3 sm:grid-cols-2 md:grid-cols-3", children: dropZones.map((zone, index) => {
-                                            const color = getZoneColor(index);
-                                            return (_jsxs("label", { className: `flex cursor-pointer items-center gap-3 rounded-lg border-2 p-3 transition-all ${correctDropZoneId === zone.id
-                                                    ? 'border-blue-500 bg-blue-50 ring-1 ring-blue-500 shadow-sm'
-                                                    : 'border-gray-200 hover:border-blue-300 hover:bg-blue-50/50'}`, children: [_jsx(RadioGroupItem, { value: zone.id, id: `correct-dz-${zone.id}`, className: "flex-shrink-0" }), _jsx("div", { className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md ${color.dot} text-white shadow-sm`, children: _jsx(MapPin, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "font-medium text-gray-900 text-sm line-clamp-1 break-all", children: [index + 1, ". ", zone.label || '(Chưa đặt nhãn)'] }), _jsxs("p", { className: "text-[11px] text-gray-400 mt-0.5", children: ["V\u1ECB tr\u00ED: (", zone.x, "%, ", zone.y, "%) \u2014 ", zone.width, "\u00D7", zone.height, "%"] })] })] }, zone.id));
-                                        }) })), form.formState.errors.correctDropZoneId && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 mt-2", children: _jsxs("p", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", form.formState.errors.correctDropZoneId.message] }) }))] }), selectedObject && selectedDropZone && (_jsxs("div", { className: "rounded-xl border-2 border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-green-500 text-white", children: _jsx(Lightbulb, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-sm font-semibold text-green-800", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs("div", { className: "flex items-center gap-3 rounded-lg bg-white/80 p-3 border border-green-100", children: [_jsx("div", { className: "h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg border-2 border-green-300 bg-white", children: selectedObject.imageUrl ? (_jsx(PresignedImage, { url: selectedObject.imageUrl, alt: selectedObject.label })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(ImageIcon, { className: "h-5 w-5 text-gray-300" }) })) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-semibold text-gray-900 text-sm", children: selectedObject.label || '(Chưa đặt tên)' }), _jsx("p", { className: "text-xs text-gray-500", children: "\u0110\u1ED1i t\u01B0\u1EE3ng" })] }), _jsx(ArrowRight, { className: "h-5 w-5 text-green-500 flex-shrink-0 mx-1" }), _jsx("div", { className: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${selectedDropZoneIndex >= 0 ? getZoneColor(selectedDropZoneIndex).dot : 'bg-blue-500'} text-white shadow-sm`, children: _jsx(MapPin, { className: "h-5 w-5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-semibold text-gray-900 text-sm", children: selectedDropZone.label || '(Chưa đặt nhãn)' }), _jsxs("p", { className: "text-xs text-gray-500", children: ["V\u1ECB tr\u00ED (", selectedDropZone.x, "%, ", selectedDropZone.y, "%)"] })] })] })] })), (!correctObjectId || !correctDropZoneId) && objectNodes.length > 0 && dropZones.length > 0 && (_jsxs("div", { className: "flex items-start gap-2.5 rounded-lg border border-amber-200 bg-amber-50 p-3", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-amber-500 flex-shrink-0 mt-0.5" }), _jsx("p", { className: "text-sm text-amber-700", children: "Vui l\u00F2ng ch\u1ECDn c\u1EA3 \u0111\u1ED1i t\u01B0\u1EE3ng \u0111\u00FAng v\u00E0 v\u1ECB tr\u00ED \u0111\u00FAng cho c\u00E2u h\u1ECFi n\u00E0y" })] }))] })] }), _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, { 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" }) })] })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(ListChecks, { className: "h-3.5 w-3.5" }), title: "Nh\u00F3m \u0111\u00E1p \u00E1n", extraActions: _jsxs("span", { className: "inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600", children: ["Nh\u00F3m ", currentGroupNumber] }), points: {
+                        value: points ?? 1,
+                        onValueChange: setPoints,
+                    }, preview: {
+                        onClick: () => setIsClientMode(true),
+                        disabled: !backgroundImageUrl || objectNodes.length < 2 || dropZones.length < 1,
+                    } }), contentClassName: "hidden", children: null }), _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(ImageIcon, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: "\u1EA2nh n\u1EC1n & \u0110\u1ED1i t\u01B0\u1EE3ng k\u00E9o th\u1EA3" })] }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setIsGroupDataCollapsed(!isGroupDataCollapsed), className: "gap-1 text-gray-500 hover:text-gray-700", children: [isGroupDataCollapsed ? _jsx(ChevronDown, { className: "h-4 w-4" }) : _jsx(ChevronUp, { className: "h-4 w-4" }), isGroupDataCollapsed ? 'Mở rộng' : 'Thu gọn'] })] }), contentClassName: isGroupDataCollapsed ? 'hidden' : undefined, children: [_jsx("div", { className: "rounded-xl border-2 p-5 bg-gradient-to-r from-orange-50 to-amber-50 border-orange-200", children: _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-orange-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-orange-600" }), "\u1EA2nh n\u1EC1n (Scene) ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "drag-scene-background", label: "", accept: "image/*", value: backgroundImageUrl, onChange: (url) => {
+                                        setBackgroundImageUrl(url);
+                                        form.clearErrors();
+                                    }, onPresignedUrlChange: setBackgroundPreviewUrl, maxSize: 10, placeholder: "Upload h\u00ECnh \u1EA3nh n\u1EC1n h\u00ECnh \u1EA3nh n\u1EC1n", autoUpload: true, prefix: "questions/scenes" }), form.formState.errors.backgroundImageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.backgroundImageUrl.message }))] }) }), backgroundPreviewUrl && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 overflow-hidden isolate", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 px-4 py-2.5 bg-white", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-blue-600" }), _jsx("span", { className: "text-sm font-semibold text-gray-700", children: "H\u00ECnh \u1EA3nh n\u1EC1n" }), _jsx(SharedGroupBadge, { groupNumber: currentGroupNumber })] }), _jsx("div", { className: "text-xs text-gray-500 font-medium", children: "K\u00E9o th\u1EA3 v\u1ECB tr\u00ED \u0111\u1EC3 \u0111\u1ECBnh v\u1ECB tr\u00EAn \u1EA3nh n\u1EC1n" })] }), _jsx("div", { className: "p-3 w-full", children: _jsx(DropZonePreviewWithDrag, { backgroundUrl: backgroundPreviewUrl, dropZones: dropZones, onZoneDrag: handleZoneDrag, onZoneResize: handleZoneResize, activeZoneId: activeDropZoneId, onSelectZone: setActiveDropZoneId }) })] })), !backgroundPreviewUrl && (_jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50/50 p-6", children: _jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-gray-100", children: _jsx(Target, { className: "h-5 w-5 text-gray-400" }) }), _jsx("p", { className: "text-sm text-gray-500", children: "Upload \u1EA3nh n\u1EC1n tr\u01B0\u1EDBc \u0111\u1EC3 thi\u1EBFt l\u1EADp v\u1ECB tr\u00ED tr\u00EAn h\u00ECnh \u1EA3nh n\u1EC1n." })] }) })), backgroundPreviewUrl && (_jsxs("div", { className: "pt-4 border-t border-gray-100", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", 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-blue-100", children: _jsx(Target, { className: "h-3.5 w-3.5 text-blue-600" }) }), _jsxs("h3", { className: "text-base font-semibold text-gray-800", children: ["V\u1ECB tr\u00ED (", dropZones.length, " items)"] }), _jsx(SharedGroupBadge, { groupNumber: currentGroupNumber })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addDropZone, className: "gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm v\u1ECB tr\u00ED"] })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: dropZones.length === 0 ? (_jsxs("div", { className: "col-span-full flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50 py-10", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-100", children: _jsx(Target, { className: "h-6 w-6 text-gray-400" }) }), _jsx("p", { className: "text-sm text-gray-500", children: "Ch\u01B0a c\u00F3 v\u1ECB tr\u00ED n\u00E0o. Nh\u1EA5n \u201CTh\u00EAm v\u1ECB tr\u00ED\u201D \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u." })] })) : (dropZones.map((zone, index) => (_jsx(DropZoneEditor, { zone: zone, index: index, onUpdate: updateDropZone, onRemove: removeDropZone, isActive: activeDropZoneId === zone.id, onSelect: setActiveDropZoneId }, zone.id)))) }), form.formState.errors.dropZones && (_jsx("div", { className: "col-span-full mt-2 rounded-lg border border-red-200 bg-red-50 p-3", children: _jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.dropZones.message || "Vui lòng nhập đầy đủ thông tin cho các vị trí." }) }))] })), _jsxs("div", { className: "pt-4 border-t border-gray-100", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", 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-amber-100", children: _jsx(Move, { className: "h-3.5 w-3.5 text-amber-600" }) }), _jsxs("h3", { className: "text-base font-semibold text-gray-800", children: ["\u0110\u1ED1i t\u01B0\u1EE3ng (", objectNodes.length, " items)"] }), _jsx(SharedGroupBadge, { groupNumber: currentGroupNumber })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addObjectNode, 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\u1ED1i t\u01B0\u1EE3ng"] })] }), _jsxs("div", { className: "space-y-3", children: [objectNodes.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50 py-10", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-100", children: _jsx(ImageIcon, { className: "h-6 w-6 text-gray-400" }) }), _jsx("p", { className: "text-sm text-gray-500", children: "Ch\u01B0a c\u00F3 \u0111\u1ED1i t\u01B0\u1EE3ng n\u00E0o. Nh\u1EA5n \u201CTh\u00EAm \u0111\u1ED1i t\u01B0\u1EE3ng\u201D \u0111\u1EC3 t\u1EA1o c\u00E1c \u0111\u1ED1i t\u01B0\u1EE3ng \u1EDF sidebar." })] })) : (objectNodes.map((node, index) => (_jsx(DragObjectEditor, { node: node, index: index, onUpdate: updateObjectNode, onRemove: removeObjectNode }, node.id)))), form.formState.errors.objectNodes && (_jsx("p", { className: "mt-2 text-sm text-red-500", children: form.formState.errors.objectNodes.message || "Vui lòng nhập đầy đủ thông tin cho các đối tượng." }))] })] })] }), _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(Volume2, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Th\u00F4ng tin c\u00E2u h\u1ECFi" })] }), children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "Audio c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "drag-scene-audio", label: "", accept: "audio/*", value: audioUrl, onChange: (url) => {
+                                    setAudioUrl(url);
+                                    form.clearErrors();
+                                }, onPresignedUrlChange: setAudioPreviewUrl, maxSize: 10, placeholder: "Upload file audio c\u00E2u h\u1ECFi", autoUpload: true, prefix: "questions/audio", examId: examId || undefined, partId: partId || undefined }), form.formState.errors.audioUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.audioUrl.message })), audioPreviewUrl && (_jsx("audio", { controls: true, className: "mt-2 w-full", src: audioPreviewUrl, children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }), _jsxs("div", { className: "space-y-3", 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-green-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-green-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u1ED1i t\u01B0\u1EE3ng \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] })] }), objectNodes.length === 0 ? (_jsx("p", { className: "text-sm text-amber-600 italic", children: "Vui l\u00F2ng th\u00EAm \u0111\u1ED1i t\u01B0\u1EE3ng \u1EDF ph\u1EA7n d\u1EEF li\u1EC7u nh\u00F3m tr\u01B0\u1EDBc khi ch\u1ECDn \u0111\u00E1p \u00E1n." })) : (_jsx(RadioGroup, { value: correctObjectId, onValueChange: (val) => {
+                                    setCorrectObjectId(val);
+                                    form.clearErrors();
+                                }, className: "grid gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4", children: objectNodes.map((node, index) => (_jsxs("label", { className: `flex cursor-pointer items-center gap-3 rounded-lg border-2 p-3 transition-all ${correctObjectId === node.id
+                                        ? 'border-green-500 bg-green-50 ring-1 ring-green-500 shadow-sm'
+                                        : 'border-gray-200 hover:border-green-300 hover:bg-green-50/50'}`, children: [_jsx(RadioGroupItem, { value: node.id, id: `correct-obj-${node.id}`, className: "flex-shrink-0" }), _jsx("div", { className: "h-12 w-12 flex-shrink-0 overflow-hidden rounded-md border border-gray-200 bg-white", children: node.imageUrl ? (_jsx(PresignedImage, { url: node.imageUrl, alt: node.label })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(ImageIcon, { className: "h-4 w-4 text-gray-300" }) })) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("p", { className: "font-medium text-gray-900 text-sm line-clamp-2 break-all", children: [index + 1, ". ", node.label || '(Chưa đặt tên)'] }) })] }, node.id))) })), form.formState.errors.correctObjectId && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 mt-2", children: _jsxs("p", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", form.formState.errors.correctObjectId.message] }) }))] }), _jsxs("div", { className: "space-y-3", 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-blue-100", children: _jsx(Target, { className: "h-3.5 w-3.5 text-blue-600" }) }), _jsxs(Label, { className: "text-base font-semibold text-gray-800", children: ["V\u1ECB tr\u00ED \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] })] }), dropZones.length === 0 ? (_jsx("p", { className: "text-sm text-amber-600 italic", children: "Vui l\u00F2ng th\u00EAm v\u1ECB tr\u00ED \u1EDF ph\u1EA7n d\u1EEF li\u1EC7u nh\u00F3m tr\u01B0\u1EDBc khi ch\u1ECDn \u0111\u00E1p \u00E1n." })) : (_jsx(RadioGroup, { value: correctDropZoneId, onValueChange: (val) => {
+                                    setCorrectDropZoneId(val);
+                                    form.clearErrors();
+                                }, className: "grid gap-3 sm:grid-cols-2 md:grid-cols-3", children: dropZones.map((zone, index) => {
+                                    const color = getZoneColor(index);
+                                    return (_jsxs("label", { className: `flex cursor-pointer items-center gap-3 rounded-lg border-2 p-3 transition-all ${correctDropZoneId === zone.id
+                                            ? 'border-blue-500 bg-blue-50 ring-1 ring-blue-500 shadow-sm'
+                                            : 'border-gray-200 hover:border-blue-300 hover:bg-blue-50/50'}`, children: [_jsx(RadioGroupItem, { value: zone.id, id: `correct-dz-${zone.id}`, className: "flex-shrink-0" }), _jsx("div", { className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md ${color.dot} text-white shadow-sm`, children: _jsx(MapPin, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "font-medium text-gray-900 text-sm line-clamp-1 break-all", children: [index + 1, ". ", zone.label || '(Chưa đặt nhãn)'] }), _jsxs("p", { className: "text-[11px] text-gray-400 mt-0.5", children: ["V\u1ECB tr\u00ED: (", zone.x, "%, ", zone.y, "%) \u2014 ", zone.width, "\u00D7", zone.height, "%"] })] })] }, zone.id));
+                                }) })), form.formState.errors.correctDropZoneId && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 mt-2", children: _jsxs("p", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", form.formState.errors.correctDropZoneId.message] }) }))] }), selectedObject && selectedDropZone && (_jsxs("div", { className: "rounded-xl border-2 border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-green-500 text-white", children: _jsx(Lightbulb, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-sm font-semibold text-green-800", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs("div", { className: "flex items-center gap-3 rounded-lg bg-white/80 p-3 border border-green-100", children: [_jsx("div", { className: "h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg border-2 border-green-300 bg-white", children: selectedObject.imageUrl ? (_jsx(PresignedImage, { url: selectedObject.imageUrl, alt: selectedObject.label })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(ImageIcon, { className: "h-5 w-5 text-gray-300" }) })) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-semibold text-gray-900 text-sm", children: selectedObject.label || '(Chưa đặt tên)' }), _jsx("p", { className: "text-xs text-gray-500", children: "\u0110\u1ED1i t\u01B0\u1EE3ng" })] }), _jsx(ArrowRight, { className: "h-5 w-5 text-green-500 flex-shrink-0 mx-1" }), _jsx("div", { className: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${selectedDropZoneIndex >= 0 ? getZoneColor(selectedDropZoneIndex).dot : 'bg-blue-500'} text-white shadow-sm`, children: _jsx(MapPin, { className: "h-5 w-5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-semibold text-gray-900 text-sm", children: selectedDropZone.label || '(Chưa đặt nhãn)' }), _jsxs("p", { className: "text-xs text-gray-500", children: ["V\u1ECB tr\u00ED (", selectedDropZone.x, "%, ", selectedDropZone.y, "%)"] })] })] })] })), (!correctObjectId || !correctDropZoneId) && objectNodes.length > 0 && dropZones.length > 0 && (_jsxs("div", { className: "flex items-start gap-2.5 rounded-lg border border-amber-200 bg-amber-50 p-3", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-amber-500 flex-shrink-0 mt-0.5" }), _jsx("p", { className: "text-sm text-amber-700", children: "Vui l\u00F2ng ch\u1ECDn c\u1EA3 \u0111\u1ED1i t\u01B0\u1EE3ng \u0111\u00FAng v\u00E0 v\u1ECB tr\u00ED \u0111\u00FAng cho c\u00E2u h\u1ECFi n\u00E0y" })] }))] }), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(explanation) })] }));
 }
 export function ListenAndDragObjectsIntoSceneCreator(props) {
     return _jsx(ListenAndDragObjectsIntoSceneCreatorContent, { ...props });

package/dist/components/questions/types/listen-and-speak-answer/ListenAndSpeakAnswerClient.js

@@ -13,7 +13,7 @@ function QuestionAudioPlayer({ audioUrl }) {
 // ─── Main Client Component ───────────────────────────────────────────────────
 export function ListenAndSpeakAnswerClient({ questionData, isReviewMode = false, }) {
     const { previewUrl: backgroundUrl } = usePresignedFileUrl(questionData.backgroundImageUrl || '');
-    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: "Nghe v\u00E0 tr\u1EA3 l\u1EDDi" })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [questionData.audioUrl ? (_jsx(QuestionAudioPlayer, { audioUrl: questionData.audioUrl })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), backgroundUrl && questionData.arrowNode && (_jsxs("div", { className: "relative w-full max-w-3xl mx-auto rounded-xl overflow-hidden shadow-sm border border-gray-200 bg-gray-50", children: [_jsx("img", { src: backgroundUrl, alt: "Background", className: "w-full object-contain pointer-events-none" }), _jsx("div", { className: "absolute", style: {
+    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: "Nghe v\u00E0 tr\u1EA3 l\u1EDDi" })] }) }), _jsxs("div", { className: "p-3 space-y-3", children: [questionData.audioUrl ? (_jsx(QuestionAudioPlayer, { audioUrl: questionData.audioUrl })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), backgroundUrl && questionData.arrowNode && (_jsxs("div", { className: "relative w-full max-w-3xl mx-auto rounded-xl overflow-hidden shadow-sm border border-gray-200 bg-gray-50", children: [_jsx("img", { src: backgroundUrl, alt: "Background", className: "w-full object-contain pointer-events-none" }), _jsx("div", { className: "absolute", style: {
                                             left: `${questionData.arrowNode.x}%`,
                                             top: `${questionData.arrowNode.y}%`,
                                             width: `${questionData.arrowNode.width}%`,

package/dist/components/questions/types/listen-and-speak-answer/ListenAndSpeakAnswerCreator.js

@@ -4,18 +4,15 @@ import { useState, useRef, useEffect, useCallback } 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 { PointsInput } from '../../../../components/ui/points-input';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
-import { Pencil, Eye, Plus, Trash2, Mic, Volume2, ImageIcon, Locate, MessageSquareText, Info, ListChecks, BookOpen } from 'lucide-react';
+import { Plus, Trash2, Mic, Volume2, ImageIcon, Locate, MessageSquareText, Info, ListChecks } from 'lucide-react';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { useSceneQuestionGroup } from '../../_shared/hooks/useSceneQuestionGroup';
 import { ListenAndSpeakAnswerClient } from './ListenAndSpeakAnswerClient';
 import { ArrowIndicatorSVG } from './ArrowIndicator';
 import { listenAndSpeakAnswerFormSchema, } from '../../../../shared/lib/validation/listen-and-speak-answer.validation';
-import { CreatorGuide } from '../../components/CreatorGuide';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 function ArrowPreviewWithDrag({ backgroundUrl, arrowNode, onNodeUpdate, }) {
     const containerRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
@@ -262,30 +259,31 @@ export function ListenAndSpeakAnswerCreator({ initialData, onSave, onCancel, onC
             backgroundImageUrl,
             arrowNode: watchedArrowNode,
         };
-        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: "Nghe v\u00E0 tr\u1EA3 l\u1EDDi (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Preview mode" })] }), _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(ListenAndSpeakAnswerClient, { questionData: questionData, isReviewMode: true })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(ListenAndSpeakAnswerClient, { questionData: questionData, isReviewMode: true })] }));
     }
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "blue", steps: [
-                    { text: 'Upload hình nền chung cho nhóm — giám khảo sẽ chỉ vào hình và đặt câu hỏi' },
-                    { text: 'Đặt mũi tên chỉ vào vị trí trên hình nền — kéo để di chuyển, kéo góc để thay đổi kích thước' },
-                    { text: 'Upload audio câu hỏi cho từng câu' },
-                    { text: 'Nhập các đáp án mong muốn — có thể nhiều đáp án', highlight: true },
-                    { text: 'Thêm giải thích (không bắt buộc) cho đáp án đúng' },
-                ], tips: ['Mũi tên giúp học sinh biết giám khảo đang hỏi về phần nào của hình'] }), _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-blue-500 via-indigo-500 to-purple-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-blue-500 to-indigo-600 shadow-md", children: _jsx(ListChecks, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Nh\u00F3m \u0111\u00E1p \u00E1n" }), _jsxs("div", { className: "mt-1.5 inline-flex items-center gap-1.5 rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-700", children: [_jsx("span", { children: "\uD83D\uDDBC\uFE0F" }), _jsxs("span", { children: ["Nh\u00F3m ", currentGroupNumber] }), _jsx("span", { className: "text-xs font-normal opacity-75 ml-1", children: "(D\u00F9ng chung)" })] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !watchedAudioUrl || watchedExpectedAnswers.filter((a) => a.trim()).length === 0, className: "gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-blue-400 to-indigo-400" }), _jsx(CardHeader, { className: "pb-4", 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-blue-100", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5 text-blue-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "H\u00ECnh \u1EA3nh n\u1EC1n & M\u0169i t\u00EAn ch\u1EC9 th\u1ECB" })] }) }), _jsx(CardContent, { className: "space-y-6", children: _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-blue-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-blue-600" }), "H\u00ECnh \u1EA3nh n\u1EC1n"] }), _jsxs("div", { className: "mt-2", children: [_jsx(FileUpload, { id: "scene-background", label: "", accept: "image/*", value: backgroundImageUrl, onChange: (url) => {
-                                                setBackgroundImageUrl(url);
-                                                form.setValue('backgroundImageUrl', url, { shouldValidate: true });
-                                            }, maxSize: 10, placeholder: "Upload h\u00ECnh \u1EA3nh n\u1EC1n", autoUpload: true, prefix: "questions/scenes" }), form.hasError('backgroundImageUrl') && (_jsx("p", { className: "text-sm text-red-600 mt-1", children: form.getFieldError('backgroundImageUrl') }))] }), backgroundPreviewUrl && (_jsxs("div", { className: "mt-4 overflow-hidden rounded-lg border border-gray-200 bg-white", children: [_jsxs("div", { className: "border-b border-gray-100 px-3 py-2 bg-gray-50 flex items-center gap-2", children: [_jsx(Locate, { className: "h-4 w-4 text-blue-500" }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "K\u00E9o th\u1EA3 v\u00E0 \u0111i\u1EC1u ch\u1EC9nh k\u00EDch th\u01B0\u1EDBc m\u0169i t\u00EAn \u0111\u1EC3 ch\u1EC9 v\u00E0o \u0111\u1ED1i t\u01B0\u1EE3ng" })] }), _jsx("div", { className: "p-2", children: _jsx(ArrowPreviewWithDrag, { backgroundUrl: backgroundPreviewUrl, arrowNode: watchedArrowNode, onNodeUpdate: (updates) => {
-                                                    form.setValue('arrowNode', { ...watchedArrowNode, ...updates }, { shouldValidate: true });
-                                                } }) })] }))] }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-indigo-500 to-blue-500" }), _jsx(CardHeader, { className: "pb-4", 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-indigo-500 to-blue-600 shadow-md", children: _jsx(Mic, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Nghe v\u00E0 tr\u1EA3 l\u1EDDi" }), _jsx("p", { className: "text-sm text-gray-500", children: "H\u1ECDc sinh nghe \u00E2m thanh v\u00E0 thu \u00E2m c\u00E2u tr\u1EA3 l\u1EDDi" })] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: _jsx("div", { className: "flex flex-col gap-4", children: _jsx("div", { className: "w-full md:w-1/2", children: _jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.hasError('points') ? form.getFieldError('points') : undefined }) }) }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "Audio c\u00E2u h\u1ECFi"] }), _jsx(FileUpload, { id: "audioUrl", label: "", accept: "audio/*", value: watchedAudioUrl || '', onChange: (url) => {
-                                            form.setValue('audioUrl', url, { shouldValidate: true });
-                                        }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "listen-and-speak" }), form.hasError('audioUrl') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('audioUrl') })), audioPreviewUrl && (_jsx("audio", { controls: true, className: "mt-2 w-full", src: audioPreviewUrl, children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }), 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 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))) })] }) }))] })] }), _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" }) }), _jsx("div", { children: _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n mong mu\u1ED1n (", watchedExpectedAnswers.filter((a) => a.trim()).length, ")"] }) })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
-                                        const currentAnswers = form.getValues('expectedAnswers');
-                                        form.setValue('expectedAnswers', [...currentAnswers, '']);
-                                    }, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-4", 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" }), _jsxs("div", { className: "text-xs text-blue-700 space-y-1", children: [_jsx("p", { children: "Nh\u1EADp c\u00E1c c\u00E2u tr\u1EA3 l\u1EDDi mong mu\u1ED1n. C\u00F3 th\u1EC3 th\u00EAm nhi\u1EC1u \u0111\u00E1p \u00E1n n\u1EBFu c\u00F3 nhi\u1EC1u c\u00E1ch tr\u1EA3 l\u1EDDi \u0111\u00FAng." }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m th\u1EE7 c\u00F4ng:" }), " Gi\u00E1o vi\u00EAn d\u00F9ng c\u00E1c \u0111\u00E1p \u00E1n n\u00E0y l\u00E0m tham kh\u1EA3o \u0111\u1EC3 ch\u1EA5m \u0111i\u1EC3m."] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m t\u1EF1 \u0111\u1ED9ng (AI):" }), " H\u1EC7 th\u1ED1ng d\u00F9ng AI so s\u00E1nh gi\u1ECDng n\u00F3i c\u1EE7a h\u1ECDc sinh v\u1EDBi c\u00E1c \u0111\u00E1p \u00E1n \u0111\u1EC3 t\u1EF1 \u0111\u1ED9ng ch\u1EA5m \u0111i\u1EC3m."] })] })] }), _jsxs("div", { className: "space-y-3", children: [watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 font-semibold shadow-sm text-sm", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { value: answer || '', onChange: (e) => {
-                                                            const newAnswers = [...watchedExpectedAnswers];
-                                                            newAnswers[index] = e.target.value;
-                                                            form.setValue('expectedAnswers', newAnswers, { shouldValidate: true });
-                                                        }, placeholder: `Ví dụ: I have a dog...`, className: "border-gray-200 focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
-                                                    const newAnswers = watchedExpectedAnswers.filter((_, i) => i !== index);
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(ListChecks, { className: "h-3.5 w-3.5" }), title: "Nh\u00F3m \u0111\u00E1p \u00E1n", extraActions: _jsxs("span", { className: "inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600", children: ["Nh\u00F3m ", currentGroupNumber] }), points: {
+                        value: watchedPoints,
+                        onValueChange: (value) => form.setValue('points', value, { shouldValidate: true }),
+                        error: form.hasError('points') ? form.getFieldError('points') : undefined,
+                    }, preview: {
+                        onClick: () => setIsClientMode(true),
+                        disabled: !watchedAudioUrl || watchedExpectedAnswers.filter((a) => a.trim()).length === 0,
+                    } }), contentClassName: "hidden", children: null }), _jsx(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(ImageIcon, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: "H\u00ECnh \u1EA3nh n\u1EC1n & M\u0169i t\u00EAn ch\u1EC9 th\u1ECB" })] }), children: _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-blue-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-blue-600" }), "H\u00ECnh \u1EA3nh n\u1EC1n"] }), _jsxs("div", { className: "mt-2", children: [_jsx(FileUpload, { id: "scene-background", label: "", accept: "image/*", value: backgroundImageUrl, onChange: (url) => {
+                                        setBackgroundImageUrl(url);
+                                        form.setValue('backgroundImageUrl', url, { shouldValidate: true });
+                                    }, maxSize: 10, placeholder: "Upload h\u00ECnh \u1EA3nh n\u1EC1n", autoUpload: true, prefix: "questions/scenes" }), form.hasError('backgroundImageUrl') && (_jsx("p", { className: "text-sm text-red-600 mt-1", children: form.getFieldError('backgroundImageUrl') }))] }), backgroundPreviewUrl && (_jsxs("div", { className: "mt-4 overflow-hidden rounded-lg border border-gray-200 bg-white", children: [_jsxs("div", { className: "border-b border-gray-100 px-3 py-2 bg-gray-50 flex items-center gap-2", children: [_jsx(Locate, { className: "h-4 w-4 text-blue-500" }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "K\u00E9o th\u1EA3 v\u00E0 \u0111i\u1EC1u ch\u1EC9nh k\u00EDch th\u01B0\u1EDBc m\u0169i t\u00EAn \u0111\u1EC3 ch\u1EC9 v\u00E0o \u0111\u1ED1i t\u01B0\u1EE3ng" })] }), _jsx("div", { className: "p-2", children: _jsx(ArrowPreviewWithDrag, { backgroundUrl: backgroundPreviewUrl, arrowNode: watchedArrowNode, onNodeUpdate: (updates) => {
+                                            form.setValue('arrowNode', { ...watchedArrowNode, ...updates }, { shouldValidate: true });
+                                        } }) })] }))] }) }), _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" }) }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Nghe v\u00E0 tr\u1EA3 l\u1EDDi" })] }), children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-indigo-500" }), "Audio c\u00E2u h\u1ECFi"] }), _jsx(FileUpload, { id: "audioUrl", label: "", accept: "audio/*", value: watchedAudioUrl || '', onChange: (url) => {
+                                    form.setValue('audioUrl', url, { shouldValidate: true });
+                                }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "listen-and-speak" }), form.hasError('audioUrl') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('audioUrl') })), audioPreviewUrl && (_jsx("audio", { controls: true, className: "mt-2 w-full", src: audioPreviewUrl, children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }), 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 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))) })] }) }))] }), _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("p", { className: "text-sm font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n mong mu\u1ED1n (", watchedExpectedAnswers.filter((a) => a.trim()).length, ")"] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                                const currentAnswers = form.getValues('expectedAnswers');
+                                form.setValue('expectedAnswers', [...currentAnswers, '']);
+                            }, className: "gap-2 border-green-200 text-green-600 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" }), _jsxs("div", { className: "text-xs text-blue-700 space-y-1", children: [_jsx("p", { children: "Nh\u1EADp c\u00E1c c\u00E2u tr\u1EA3 l\u1EDDi mong mu\u1ED1n. C\u00F3 th\u1EC3 th\u00EAm nhi\u1EC1u \u0111\u00E1p \u00E1n n\u1EBFu c\u00F3 nhi\u1EC1u c\u00E1ch tr\u1EA3 l\u1EDDi \u0111\u00FAng." }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m th\u1EE7 c\u00F4ng:" }), " Gi\u00E1o vi\u00EAn d\u00F9ng c\u00E1c \u0111\u00E1p \u00E1n n\u00E0y l\u00E0m tham kh\u1EA3o \u0111\u1EC3 ch\u1EA5m \u0111i\u1EC3m."] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Ch\u1EA5m t\u1EF1 \u0111\u1ED9ng (AI):" }), " H\u1EC7 th\u1ED1ng d\u00F9ng AI so s\u00E1nh gi\u1ECDng n\u00F3i c\u1EE7a h\u1ECDc sinh v\u1EDBi c\u00E1c \u0111\u00E1p \u00E1n \u0111\u1EC3 t\u1EF1 \u0111\u1ED9ng ch\u1EA5m \u0111i\u1EC3m."] })] })] }), _jsxs("div", { className: "space-y-3", children: [watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 font-semibold shadow-sm text-sm", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { value: answer || '', onChange: (e) => {
+                                                    const newAnswers = [...watchedExpectedAnswers];
+                                                    newAnswers[index] = e.target.value;
                                                     form.setValue('expectedAnswers', newAnswers, { shouldValidate: true });
-                                                }, className: "text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))), form.formState.errors?.expectedAnswers && !Array.isArray(form.formState.errors.expectedAnswers) && (_jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.expectedAnswers.message }))] })] })] }), _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, { value: watchedExplanation, onChange: (e) => form.setValue('explanation', e.target.value, { shouldValidate: true }), 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" }) })] })] }));
+                                                }, placeholder: `Ví dụ: I have a dog...`, className: "border-gray-200 focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                            const newAnswers = watchedExpectedAnswers.filter((_, i) => i !== index);
+                                            form.setValue('expectedAnswers', newAnswers, { shouldValidate: true });
+                                        }, className: "text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))), form.formState.errors?.expectedAnswers && !Array.isArray(form.formState.errors.expectedAnswers) && (_jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.expectedAnswers.message }))] })] }), _jsx(CompactExplanationToggle, { value: watchedExplanation || '', onValueChange: (value) => form.setValue('explanation', value, { shouldValidate: true }), defaultVisible: Boolean(watchedExplanation) })] }));
 }

package/dist/components/questions/types/listen-and-speak-compare-images/ListenAndSpeakCompareImagesClient.js

@@ -28,5 +28,5 @@ export function ListenAndSpeakCompareImagesClient({ questionData, isReviewMode =
     // fall back to store values (exam-taking mode populates the store)
     const candidateImageUrl = questionData.candidateImageUrl || storeCandidateImageUrl;
     const examinerImageUrl = questionData.examinerImageUrl || storeExaminerImageUrl;
-    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(GitCompareArrows, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 n\u00F3i (So s\u00E1nh h\u00ECnh \u1EA3nh)" })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [audioUrl ? (_jsx(QuestionAudioPlayer, { audioUrl: audioUrl })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), (candidateImageUrl || examinerImageUrl) && (_jsxs("div", { className: "space-y-4 bg-gradient-to-br from-amber-100 to-orange-100 p-5 rounded-2xl border border-amber-200 shadow-sm", children: [candidateImageUrl && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "inline-block rounded-lg border-2 border-amber-400 bg-gradient-to-r from-gray-600 to-gray-700 px-8 py-2 text-sm font-bold uppercase tracking-widest text-white shadow-lg ring-1 ring-amber-300/50", children: "Candidate's Copy" }) }), _jsx("div", { className: "w-full rounded-xl overflow-hidden shadow-md bg-white border border-amber-200", children: _jsx(CompareImagePreview, { imageUrl: candidateImageUrl, label: "Candidate's Copy" }) })] })), examinerImageUrl && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "inline-block rounded-lg border-2 border-orange-400 bg-gradient-to-r from-gray-600 to-gray-700 px-8 py-2 text-sm font-bold uppercase tracking-widest text-white shadow-lg ring-1 ring-orange-300/50", children: "Examiner's Copy" }) }), _jsx("div", { className: "w-full rounded-xl overflow-hidden shadow-md bg-white border border-amber-200", children: _jsx(CompareImagePreview, { imageUrl: examinerImageUrl, label: "Examiner's Copy" }) })] }))] })), _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: "H\u1ECDc sinh s\u1EBD nh\u1EA5n n\u00FAt ghi \u00E2m v\u00E0 n\u00F3i c\u00E2u tr\u1EA3 l\u1EDDi t\u1EA1i \u0111\u00E2y" })] }), isReviewMode && 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: 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 && explanation && (_jsxs("div", { className: "rounded-xl border border-indigo-200 bg-indigo-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-indigo-600" }), _jsx("p", { className: "text-sm font-semibold text-indigo-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("p", { className: "text-sm text-indigo-700 leading-relaxed", children: 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(GitCompareArrows, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 n\u00F3i (So s\u00E1nh h\u00ECnh \u1EA3nh)" })] }) }), _jsxs("div", { className: "p-3 space-y-3", children: [audioUrl ? (_jsx(QuestionAudioPlayer, { audioUrl: audioUrl })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), (candidateImageUrl || examinerImageUrl) && (_jsxs("div", { className: "space-y-4 bg-gradient-to-br from-amber-100 to-orange-100 p-5 rounded-2xl border border-amber-200 shadow-sm", children: [candidateImageUrl && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "inline-block rounded-lg border-2 border-amber-400 bg-gradient-to-r from-gray-600 to-gray-700 px-8 py-2 text-sm font-bold uppercase tracking-widest text-white shadow-lg ring-1 ring-amber-300/50", children: "Candidate's Copy" }) }), _jsx("div", { className: "w-full rounded-xl overflow-hidden shadow-md bg-white border border-amber-200", children: _jsx(CompareImagePreview, { imageUrl: candidateImageUrl, label: "Candidate's Copy" }) })] })), examinerImageUrl && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "inline-block rounded-lg border-2 border-orange-400 bg-gradient-to-r from-gray-600 to-gray-700 px-8 py-2 text-sm font-bold uppercase tracking-widest text-white shadow-lg ring-1 ring-orange-300/50", children: "Examiner's Copy" }) }), _jsx("div", { className: "w-full rounded-xl overflow-hidden shadow-md bg-white border border-amber-200", children: _jsx(CompareImagePreview, { imageUrl: examinerImageUrl, label: "Examiner's Copy" }) })] }))] })), _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: "H\u1ECDc sinh s\u1EBD nh\u1EA5n n\u00FAt ghi \u00E2m v\u00E0 n\u00F3i c\u00E2u tr\u1EA3 l\u1EDDi t\u1EA1i \u0111\u00E2y" })] }), isReviewMode && 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: 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 && explanation && (_jsxs("div", { className: "rounded-xl border border-indigo-200 bg-indigo-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-indigo-600" }), _jsx("p", { className: "text-sm font-semibold text-indigo-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("p", { className: "text-sm text-indigo-700 leading-relaxed", children: explanation })] }))] })] })] }));
 }