@tinyweb_dev/oe-exam-sdk 0.1.0

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

@@ -0,0 +1,111 @@
+import { ListenAndDragObjectsIntoSceneCreator } from './ListenAndDragObjectsIntoSceneCreator';
+export const listenAndDragObjectsIntoSceneRegistration = {
+    component: ListenAndDragObjectsIntoSceneCreator,
+    transformInitialData: (initialData) => {
+        if (!initialData)
+            return undefined;
+        const d = initialData;
+        // Group scene data
+        // Use data from questionGroup.payload first (API format), fallback to answer (reverse-transformed)
+        const backgroundImageUrl = d?.questionGroup?.payload?.backgroundImageUrl ||
+            d?.answer?.backgroundImageUrl ||
+            d?.content?.backgroundImageUrl ||
+            d?.backgroundImageUrl || '';
+        const objectNodes = (d?.questionGroup?.payload?.objectNodes?.length > 0 && d?.questionGroup?.payload?.objectNodes) ||
+            (d?.answer?.objectNodes?.length > 0 && d?.answer?.objectNodes) ||
+            (d?.content?.objectNodes?.length > 0 && d?.content?.objectNodes) ||
+            d?.objectNodes || [];
+        const dropZones = (d?.questionGroup?.payload?.dropZones?.length > 0 && d?.questionGroup?.payload?.dropZones) ||
+            (d?.answer?.dropZones?.length > 0 && d?.answer?.dropZones) ||
+            (d?.content?.dropZones?.length > 0 && d?.content?.dropZones) ||
+            d?.dropZones || [];
+        // Question specific data - prioritize content (API) then answer (reverse-transformed)
+        const audioUrl = d?.content?.audioUrl || d?.answer?.audioUrl || d?.audioUrl || '';
+        // Correct object ID from multiple possible locations
+        const correctObjectId = d?.answer?.correctObjectId ||
+            d?.correctAnswer?.objectId ||
+            d?.answer?.objectId ||
+            d?.content?.correctObjectId ||
+            d?.correctObjectId || '';
+        // Correct drop zone ID from multiple possible locations
+        const correctDropZoneId = d?.answer?.correctDropZoneId ||
+            d?.correctAnswer?.dropZoneId ||
+            d?.answer?.dropZoneId ||
+            d?.content?.correctDropZoneId ||
+            d?.correctDropZoneId || '';
+        // Points and explanation
+        const points = d?.points || d?.answer?.points || 1;
+        const explanation = d?.explanation || d?.answer?.explanation || d?.content?.explanation || '';
+        const isBackup = d?.content?.isBackup || d?.isBackup || false;
+        console.log('[LISTEN_AND_DRAG_OBJECTS_INTO_SCENE register] transformInitialData:', {
+            correctObjectId,
+            correctDropZoneId,
+            audioUrl: audioUrl ? '✓' : '✗',
+            backgroundImageUrl: backgroundImageUrl ? '✓' : '✗',
+            objectNodesCount: objectNodes?.length || 0,
+            dropZonesCount: dropZones?.length || 0,
+        });
+        return {
+            audioUrl,
+            backgroundImageUrl,
+            objectNodes,
+            dropZones,
+            correctObjectId,
+            correctDropZoneId,
+            points,
+            explanation,
+            isBackup,
+            isCompleted: d?.isCompleted,
+        };
+    },
+    getExtraProps: (ctx) => ({
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            isBackup: data.isBackup || false,
+        },
+        answer: {
+            audioUrl: data.audioUrl,
+            backgroundImageUrl: data.backgroundImageUrl,
+            objectNodes: data.objectNodes,
+            dropZones: data.dropZones,
+            correctObjectId: data.correctObjectId,
+            correctDropZoneId: data.correctDropZoneId,
+            groupNumber: data.groupNumber,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            isBackup: data.isBackup || false,
+        },
+        answer: {
+            audioUrl: data.audioUrl,
+            backgroundImageUrl: data.backgroundImageUrl,
+            objectNodes: data.objectNodes,
+            dropZones: data.dropZones,
+            correctObjectId: data.correctObjectId,
+            correctDropZoneId: data.correctDropZoneId,
+            groupNumber: data.groupNumber,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        explanation: data?.explanation || '',
+    }),
+};
+//# sourceMappingURL=register.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","sourceRoot":"","sources":["../../../../../src/components/questions/types/listen-and-drag-objects-into-scene/register.tsx"],"names":[],"mappings":"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"}

package/dist/components/questions/types/listen-and-drag-objects-into-scene/transform.d.ts

@@ -0,0 +1,3 @@
+import type { TransformHandler } from '../../../../shared/lib/utils/question-transform-types';
+export declare const transformListenAndDragObjectsIntoScene: TransformHandler;
+//# sourceMappingURL=transform.d.ts.map

package/dist/components/questions/types/listen-and-drag-objects-into-scene/transform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../../../src/components/questions/types/listen-and-drag-objects-into-scene/transform.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAA2C,MAAM,6CAA6C,CAAC;AAE7H,eAAO,MAAM,sCAAsC,EAAE,gBAuCpD,CAAC"}

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

@@ -0,0 +1,36 @@
+export const transformListenAndDragObjectsIntoScene = (question) => {
+    const answerData = question.answer;
+    const apiContent = {};
+    if (answerData?.audioUrl) {
+        apiContent.audioUrl = answerData.audioUrl;
+    }
+    const sceneData = {
+        backgroundImageUrl: answerData.backgroundImageUrl,
+        objectNodes: (answerData.objectNodes || []).map((node) => ({
+            id: node.id,
+            imageUrl: node.imageUrl,
+            label: node.label,
+        })),
+        dropZones: (answerData.dropZones || []).map((zone) => ({
+            id: zone.id,
+            label: zone.label,
+            x: zone.x,
+            y: zone.y,
+            width: zone.width,
+            height: zone.height,
+        })),
+    };
+    const apiCorrectAnswer = {
+        objectId: answerData.correctObjectId || '',
+        dropZoneId: answerData.correctDropZoneId || '',
+    };
+    // Get group number directly from the component payload
+    const groupNumber = answerData.groupNumber || 1;
+    return {
+        apiContent,
+        apiCorrectAnswer,
+        sceneData,
+        groupNumber,
+    };
+};
+//# sourceMappingURL=transform.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"transform.js","sourceRoot":"","sources":["../../../../../src/components/questions/types/listen-and-drag-objects-into-scene/transform.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,sCAAsC,GAAqB,CAAC,QAAQ,EAAE,EAAE;IACjF,MAAM,UAAU,GAAG,QAAQ,CAAC,MAA4D,CAAC;IAEzF,MAAM,UAAU,GAAwB,EAAE,CAAC;IAC3C,IAAI,UAAU,EAAE,QAAQ,EAAE,CAAC;QACvB,UAAU,CAAC,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC;IAC9C,CAAC;IAED,MAAM,SAAS,GAAG;QACd,kBAAkB,EAAE,UAAU,CAAC,kBAAkB;QACjD,WAAW,EAAE,CAAC,UAAU,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACvD,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK;SACpB,CAAC,CAAC;QACH,SAAS,EAAE,CAAC,UAAU,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YACnD,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;SACtB,CAAC,CAAC;KACN,CAAC;IAEF,MAAM,gBAAgB,GAAG;QACrB,QAAQ,EAAE,UAAU,CAAC,eAAe,IAAI,EAAE;QAC1C,UAAU,EAAE,UAAU,CAAC,iBAAiB,IAAI,EAAE;KACjD,CAAC;IAEF,uDAAuD;IACvD,MAAM,WAAW,GAAG,UAAU,CAAC,WAAW,IAAI,CAAC,CAAC;IAEhD,OAAO;QACH,UAAU;QACV,gBAAgB;QAChB,SAAS;QACT,WAAW;KACd,CAAC;AACN,CAAC,CAAC"}

package/dist/components/questions/types/listen-and-speak-answer/ArrowIndicator.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Premium arrow indicator SVG component
+ * Used in both Creator (draggable editor) and Client (display) modes
+ * for the LISTEN_AND_SPEAK_ANSWER question type.
+ *
+ * Features:
+ * - 3D-style gradient with highlight/shine
+ * - Subtle pulsing glow animation (client mode)
+ * - Soft shadow for depth
+ * - Rounded, modern arrow shape
+ */
+interface ArrowIndicatorSVGProps {
+    /** Unique suffix for SVG gradient/filter IDs to avoid conflicts when multiple arrows render */
+    idSuffix?: string;
+    /** Enable gentle pulse animation (for client/student view) */
+    animated?: boolean;
+    className?: string;
+}
+export declare function ArrowIndicatorSVG({ idSuffix, animated, className, }: ArrowIndicatorSVGProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ArrowIndicator.d.ts.map

package/dist/components/questions/types/listen-and-speak-answer/ArrowIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/questions/types/listen-and-speak-answer/ArrowIndicator.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,UAAU,sBAAsB;IAC9B,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAa,EACb,QAAgB,EAChB,SAAc,GACf,EAAE,sBAAsB,+BA4HxB"}

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

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ArrowIndicatorSVG({ idSuffix = '', animated = false, className = '', }) {
+    const gradientId = `arrow-grad${idSuffix}`;
+    const shadowId = `arrow-shadow${idSuffix}`;
+    const glowId = `arrow-glow${idSuffix}`;
+    return (_jsxs("svg", { viewBox: "0 0 64 80", className: className, xmlns: "http://www.w3.org/2000/svg", style: { filter: `url(#${shadowId})` }, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: gradientId, x1: "0.5", y1: "0", x2: "0.5", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "#FF4D6A" }), _jsx("stop", { offset: "45%", stopColor: "#E8364F" }), _jsx("stop", { offset: "100%", stopColor: "#C41E3A" })] }), _jsx("filter", { id: shadowId, x: "-20%", y: "-10%", width: "140%", height: "130%", children: _jsx("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "#C41E3A", floodOpacity: "0.35" }) }), animated && (_jsxs("filter", { id: glowId, x: "-30%", y: "-20%", width: "160%", height: "150%", children: [_jsx("feGaussianBlur", { stdDeviation: "4", result: "blur" }), _jsx("feFlood", { floodColor: "#FF4D6A", floodOpacity: "0.4", result: "color" }), _jsx("feComposite", { in: "color", in2: "blur", operator: "in", result: "glow" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "glow" }), _jsx("feMergeNode", { in: "SourceGraphic" })] })] }))] }), _jsxs("g", { style: animated ? { filter: `url(#${glowId})` } : undefined, children: [_jsx("path", { d: "\n            M32 72\n            C31 72 30 71.5 29.2 70.5\n            L6 44\n            C4 41.5 5.5 38 8.5 38\n            L19 38\n            C20.1 38 21 37.1 21 36\n            L21 12\n            C21 8.7 23.7 6 27 6\n            L37 6\n            C40.3 6 43 8.7 43 12\n            L43 36\n            C43 37.1 43.9 38 45 38\n            L55.5 38\n            C58.5 38 60 41.5 58 44\n            L34.8 70.5\n            C34 71.5 33 72 32 72\n            Z\n          ", fill: `url(#${gradientId})`, stroke: "#a01830", strokeWidth: "1", strokeOpacity: "0.25" }), _jsx("path", { d: "\n            M28 10\n            C26.3 10 25 11.3 25 13\n            L25 36\n            C25 37.7 23.7 39 22 39\n            L12 39\n            L30 63\n            L30 36\n            C30 34.5 28 33 26 33\n            L12 33\n            L12 39\n            L22 39\n            C23.7 39 25 37.7 25 36\n            L25 13\n            C25 11.3 26.3 10 28 10\n            Z\n          ", fill: "white", opacity: "0.12" }), _jsx("rect", { x: "25", y: "8", width: "10", height: "20", rx: "5", fill: "white", opacity: "0.18" }), _jsx("circle", { cx: "28", cy: "14", r: "2.5", fill: "white", opacity: "0.3" })] }), animated && (_jsxs("circle", { cx: "32", cy: "72", r: "4", fill: "#FF4D6A", opacity: "0.6", children: [_jsx("animate", { attributeName: "r", values: "3;8;3", dur: "2s", repeatCount: "indefinite" }), _jsx("animate", { attributeName: "opacity", values: "0.5;0;0.5", dur: "2s", repeatCount: "indefinite" })] }))] }));
+}
+//# sourceMappingURL=ArrowIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowIndicator.js","sourceRoot":"","sources":["../../../../../src/components/questions/types/listen-and-speak-answer/ArrowIndicator.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import { ListenAndSpeakAnswerClientProps } from '../../_shared/types/listen-and-speak-answer.type';
+export declare function ListenAndSpeakAnswerClient({ questionData, isReviewMode, }: ListenAndSpeakAnswerClientProps): import("react").JSX.Element;
+//# sourceMappingURL=ListenAndSpeakAnswerClient.d.ts.map

package/dist/components/questions/types/listen-and-speak-answer/ListenAndSpeakAnswerClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListenAndSpeakAnswerClient.d.ts","sourceRoot":"","sources":["../../../../../src/components/questions/types/listen-and-speak-answer/ListenAndSpeakAnswerClient.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,+BAA+B,EAAE,MAAM,mEAAmE,CAAC;AA+CpH,wBAAgB,0BAA0B,CAAC,EACzC,YAAY,EACZ,YAAoB,GACrB,EAAE,+BAA+B,+BA+FjC"}

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mic, Volume2, CheckCircle2, Play, Pause, Info } from 'lucide-react';
+import { Button } from '../../../../components/ui/button';
+import { usePresignedFileUrl, useAudioPreview } from '../../../../shared/lib/hooks';
+import { ArrowIndicatorSVG } from './ArrowIndicator';
+// ─── Sub-component: Custom Audio Player ──────────────────────────────────────
+function QuestionAudioPlayer({ audioUrl }) {
+    const { previewUrl } = usePresignedFileUrl(audioUrl);
+    const { isPlaying, currentTime, duration, progressPercentage, handlePlayPause, handleProgressClick, formatTime, } = useAudioPreview(previewUrl);
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200 px-4 py-2.5", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: handlePlayPause, disabled: !previewUrl, className: "h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100", children: isPlaying ? _jsx(Pause, { className: "h-3.5 w-3.5" }) : _jsx(Play, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "text-muted-foreground min-w-[70px] text-xs", children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsx("div", { className: "bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full", onClick: handleProgressClick, children: _jsx("div", { className: "bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all", style: { width: `${progressPercentage}%` } }) }), _jsx(Volume2, { className: "h-4 w-4 text-indigo-400" })] }));
+}
+// ─── 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: {
+                                            left: `${questionData.arrowNode.x}%`,
+                                            top: `${questionData.arrowNode.y}%`,
+                                            width: `${questionData.arrowNode.width}%`,
+                                            height: `${questionData.arrowNode.height}%`,
+                                        }, children: _jsx("div", { className: "flex h-full w-full items-center justify-center overflow-hidden p-[6%]", children: _jsx(ArrowIndicatorSVG, { idSuffix: "-client", animated: true, className: "w-full h-full" }) }) })] })), _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 && questionData.expectedAnswers && questionData.expectedAnswers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "C\u00E1c \u0111\u00E1p \u00E1n mong mu\u1ED1n" })] }), _jsx("div", { className: "space-y-2", children: questionData.expectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, index))) })] })), isReviewMode && questionData.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: questionData.explanation })] }))] })] })] }));
+}
+//# sourceMappingURL=ListenAndSpeakAnswerClient.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListenAndSpeakAnswerClient.js","sourceRoot":"","sources":["../../../../../src/components/questions/types/listen-and-speak-answer/ListenAndSpeakAnswerClient.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import { ListenAndSpeakAnswerCreatorProps } from '../../_shared/types/listen-and-speak-answer.type';
+interface CreatorProps extends ListenAndSpeakAnswerCreatorProps {
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    groups?: any[];
+    questionIndexInPart?: number;
+    partId?: string;
+}
+export declare function ListenAndSpeakAnswerCreator({ initialData, onSave, onCancel, onChange, externalErrors, validationRef, groups, questionIndexInPart, partId, }: CreatorProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ListenAndSpeakAnswerCreator.d.ts.map

package/dist/components/questions/types/listen-and-speak-answer/ListenAndSpeakAnswerCreator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListenAndSpeakAnswerCreator.d.ts","sourceRoot":"","sources":["../../../../../src/components/questions/types/listen-and-speak-answer/ListenAndSpeakAnswerCreator.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,gCAAgC,EAAE,MAAM,mEAAmE,CAAC;AAOrH,UAAU,YAAa,SAAQ,gCAAgC;IAC7D,sBAAsB,CAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsJD,wBAAgB,2BAA2B,CAAC,EAC1C,WAAW,EACX,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,aAAa,EACb,MAAM,EACN,mBAAuB,EACvB,MAAW,GACZ,EAAE,YAAY,+BAsiBd"}

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

@@ -0,0 +1,292 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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';
+function ArrowPreviewWithDrag({ backgroundUrl, arrowNode, onNodeUpdate, }) {
+    const containerRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+    const [isResizing, setIsResizing] = useState(false);
+    const [resizeType, setResizeType] = useState(null);
+    const [resizeStartPos, setResizeStartPos] = useState({ x: 0, y: 0 });
+    const [resizeStartDim, setResizeStartDim] = useState({ width: 0, height: 0 });
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+        if (e.target.dataset.resizeHandle)
+            return;
+        setIsDragging(true);
+        if (containerRef.current) {
+            const rect = containerRef.current.getBoundingClientRect();
+            const mouseXPercent = ((e.clientX - rect.left) / rect.width) * 100;
+            const mouseYPercent = ((e.clientY - rect.top) / rect.height) * 100;
+            setDragOffset({
+                x: mouseXPercent - arrowNode.x,
+                y: mouseYPercent - arrowNode.y,
+            });
+        }
+    };
+    const handleResizeMouseDown = (type, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsResizing(true);
+        setResizeType(type);
+        setResizeStartPos({ x: e.clientX, y: e.clientY });
+        setResizeStartDim({ width: arrowNode.width, height: arrowNode.height });
+    };
+    const handleMouseMove = useCallback((e) => {
+        if (!containerRef.current)
+            return;
+        if (isDragging) {
+            const rect = containerRef.current.getBoundingClientRect();
+            const mouseXPercent = ((e.clientX - rect.left) / rect.width) * 100;
+            const mouseYPercent = ((e.clientY - rect.top) / rect.height) * 100;
+            const x = Math.max(0, Math.min(100 - arrowNode.width, mouseXPercent - dragOffset.x));
+            const y = Math.max(0, Math.min(100 - arrowNode.height, mouseYPercent - dragOffset.y));
+            onNodeUpdate({ x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 });
+        }
+        else if (isResizing && resizeType) {
+            const rect = containerRef.current.getBoundingClientRect();
+            const dx = ((e.clientX - resizeStartPos.x) / rect.width) * 100;
+            const dy = ((e.clientY - resizeStartPos.y) / rect.height) * 100;
+            let newWidth = resizeStartDim.width;
+            let newHeight = resizeStartDim.height;
+            if (resizeType === 'e' || resizeType === 'se') {
+                newWidth = Math.max(1, Math.min(100 - arrowNode.x, resizeStartDim.width + dx));
+            }
+            if (resizeType === 's' || resizeType === 'se') {
+                newHeight = Math.max(1, Math.min(100 - arrowNode.y, resizeStartDim.height + dy));
+            }
+            onNodeUpdate({ width: Math.round(newWidth * 10) / 10, height: Math.round(newHeight * 10) / 10 });
+        }
+    }, [isDragging, isResizing, resizeType, resizeStartPos, resizeStartDim, dragOffset, arrowNode, onNodeUpdate]);
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false);
+        setIsResizing(false);
+        setResizeType(null);
+    }, []);
+    useEffect(() => {
+        if (isDragging || isResizing) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                window.removeEventListener('mousemove', handleMouseMove);
+                window.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
+    return (_jsxs("div", { ref: containerRef, className: "relative w-full select-none overflow-hidden rounded-md", children: [_jsx("img", { src: backgroundUrl, alt: "Scene background", className: "w-full rounded-md object-contain", draggable: false }), _jsxs("div", { className: `absolute cursor-move rounded-lg border-2 transition-all duration-150 group ${isDragging || isResizing ? 'border-indigo-400 shadow-md' : 'border-indigo-300/60 border-dashed hover:border-indigo-400 hover:border-solid hover:shadow-sm'}`, style: {
+                    left: `${arrowNode.x}%`,
+                    top: `${arrowNode.y}%`,
+                    width: `${arrowNode.width}%`,
+                    height: `${arrowNode.height}%`,
+                }, onMouseDown: handleMouseDown, children: [_jsx("div", { className: "absolute -top-6 left-1/2 -translate-x-1/2 rounded-md bg-indigo-600/90 px-2 py-0.5 text-[10px] font-medium text-white whitespace-nowrap opacity-0 transition-opacity group-hover:opacity-100 shadow-sm backdrop-blur-sm", children: "M\u0169i t\u00EAn ch\u1EC9 th\u1ECB" }), _jsx("div", { className: "flex h-full w-full items-center justify-center overflow-hidden rounded-md p-[8%]", children: _jsx(ArrowIndicatorSVG, { idSuffix: "-creator", className: "w-full h-full" }) }), _jsx("div", { "data-resize-handle": "true", className: "absolute -right-1 top-1/2 h-2.5 w-2.5 -translate-y-1/2 cursor-e-resize rounded-full border border-indigo-400 bg-white shadow-sm opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100", onMouseDown: (e) => handleResizeMouseDown('e', e) }), _jsx("div", { "data-resize-handle": "true", className: "absolute -bottom-1 left-1/2 h-2.5 w-2.5 -translate-x-1/2 cursor-s-resize rounded-full border border-indigo-400 bg-white shadow-sm opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100", onMouseDown: (e) => handleResizeMouseDown('s', e) }), _jsx("div", { "data-resize-handle": "true", className: "absolute -bottom-1 -right-1 h-2.5 w-2.5 cursor-se-resize rounded-full border border-indigo-400 bg-white shadow-sm opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100", onMouseDown: (e) => handleResizeMouseDown('se', e) })] }), _jsxs("div", { className: "absolute bottom-2 right-2 rounded-md bg-black/50 px-2 py-1 text-[10px] font-mono text-white/80 backdrop-blur-sm", style: { zIndex: 1 }, children: ["x:", arrowNode.x, "% y:", arrowNode.y, "% w:", arrowNode.width, "% h:", arrowNode.height, "%"] })] }));
+}
+export function ListenAndSpeakAnswerCreator({ initialData, onSave, onCancel, onChange, externalErrors, validationRef, groups, questionIndexInPart = 0, partId = '', }) {
+    const apiData = initialData;
+    // Use group hook for scene background
+    const sceneGroupInitialData = {
+        backgroundImageUrl: apiData?.backgroundImageUrl || '',
+    };
+    const { currentGroupNumber, backgroundImageUrl, setBackgroundImageUrl, } = useSceneQuestionGroup({
+        partId,
+        groups,
+        questionIndexInPart,
+        initialData: sceneGroupInitialData,
+    });
+    const { previewUrl: backgroundPreviewUrl } = usePresignedFileUrl(backgroundImageUrl);
+    const form = useReactHookForm({
+        defaultValues: {
+            audioUrl: apiData?.content?.audioUrl || apiData?.audioUrl || '',
+            expectedAnswers: (apiData?.correctAnswer?.expectedAnswers || apiData?.expectedAnswers)?.length > 0
+                ? (apiData?.correctAnswer?.expectedAnswers || apiData?.expectedAnswers)
+                : [''],
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 1,
+            backgroundImageUrl: backgroundImageUrl,
+            arrowNode: apiData?.content?.arrowNode || apiData?.arrowNode || { x: 40, y: 30, width: 10, height: 20 },
+            isBackup: apiData?.isBackup || false,
+        },
+        zodSchema: listenAndSpeakAnswerFormSchema,
+        mode: 'onBlur',
+    });
+    const [isClientMode, setIsClientMode] = useState(false);
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    const watchedAudioUrl = form.watch('audioUrl');
+    const watchedExpectedAnswers = form.watch('expectedAnswers');
+    const watchedExplanation = form.watch('explanation');
+    const watchedPoints = form.watch('points');
+    const watchedArrowNode = form.watch('arrowNode');
+    const watchedIsBackup = form.watch('isBackup');
+    // Presigned URL for audio playback (must be after form init so watchedAudioUrl is available)
+    const { previewUrl: audioPreviewUrl } = usePresignedFileUrl(watchedAudioUrl || '');
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return await form.trigger();
+                },
+                getFormData: () => ({
+                    audioUrl: watchedAudioUrl,
+                    expectedAnswers: watchedExpectedAnswers,
+                    explanation: watchedExplanation,
+                    points: watchedPoints,
+                    backgroundImageUrl,
+                    arrowNode: watchedArrowNode,
+                    isBackup: watchedIsBackup,
+                    groupNumber: currentGroupNumber,
+                }),
+            };
+        }
+    }, [validationRef, form, watchedAudioUrl, watchedExpectedAnswers, watchedExplanation, watchedPoints, watchedIsBackup, backgroundImageUrl, watchedArrowNode, currentGroupNumber]);
+    useEffect(() => {
+        const apiData = initialData;
+        const normalizedInitialData = {
+            audioUrl: apiData?.content?.audioUrl || apiData?.audioUrl || '',
+            expectedAnswers: (apiData?.correctAnswer?.expectedAnswers || apiData?.expectedAnswers)?.length > 0
+                ? (apiData?.correctAnswer?.expectedAnswers || apiData?.expectedAnswers)
+                : [''],
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 1,
+            isBackup: apiData?.isBackup || false,
+        };
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged) {
+            return;
+        }
+        previousInitialDataRef.current = initialData;
+        const currentFormData = {
+            audioUrl: watchedAudioUrl,
+            expectedAnswers: watchedExpectedAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+            isBackup: watchedIsBackup,
+        };
+        const isEchoFromOnChange = currentFormData.points === normalizedInitialData.points &&
+            currentFormData.explanation === normalizedInitialData.explanation &&
+            currentFormData.audioUrl === normalizedInitialData.audioUrl &&
+            JSON.stringify(currentFormData.expectedAnswers) === JSON.stringify(normalizedInitialData.expectedAnswers);
+        const wasJustSaved = initialData?.isCompleted === true;
+        if (isEchoFromOnChange && wasJustSaved) {
+            return;
+        }
+        const shouldReset = !isEchoFromOnChange &&
+            (normalizedInitialData.audioUrl !== currentFormData.audioUrl ||
+                JSON.stringify(normalizedInitialData.expectedAnswers) !== JSON.stringify(currentFormData.expectedAnswers));
+        if (shouldReset) {
+            isInitializingRef.current = true;
+            form.reset(normalizedInitialData);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData, form, watchedAudioUrl, watchedExpectedAnswers, watchedExplanation, watchedPoints, watchedIsBackup]);
+    const watchedExpectedAnswersString = JSON.stringify(watchedExpectedAnswers);
+    const watchedArrowNodeString = JSON.stringify(watchedArrowNode);
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                audioUrl: watchedAudioUrl,
+                expectedAnswers: watchedExpectedAnswers,
+                explanation: watchedExplanation,
+                points: watchedPoints,
+                backgroundImageUrl,
+                arrowNode: watchedArrowNode,
+                isBackup: watchedIsBackup,
+                groupNumber: currentGroupNumber,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            audioUrl: watchedAudioUrl,
+            expectedAnswers: watchedExpectedAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+            backgroundImageUrl,
+            arrowNode: watchedArrowNode,
+            isBackup: watchedIsBackup,
+            groupNumber: currentGroupNumber,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedAudioUrl,
+        watchedExpectedAnswersString,
+        watchedExplanation,
+        watchedPoints,
+        watchedIsBackup,
+        watchedArrowNodeString,
+        backgroundImageUrl,
+        currentGroupNumber,
+        debouncedOnChange,
+    ]);
+    const handleSave = form.handleSubmit((data) => {
+        onSave?.({
+            ...data,
+            backgroundImageUrl,
+            groupNumber: currentGroupNumber,
+        });
+    });
+    if (isClientMode) {
+        const questionData = {
+            audioUrl: watchedAudioUrl,
+            expectedAnswers: watchedExpectedAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+            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-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);
+                                                    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" }) })] })] }));
+}
+//# sourceMappingURL=ListenAndSpeakAnswerCreator.js.map