@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

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

@@ -1 +1,110 @@
-import{ListenAndDragObjectsIntoSceneCreator as e}from"./ListenAndDragObjectsIntoSceneCreator";export const listenAndDragObjectsIntoSceneRegistration={component:e,transformInitialData:e=>{if(!e)return;const o=e,t=o?.questionGroup?.payload?.backgroundImageUrl||o?.answer?.backgroundImageUrl||o?.content?.backgroundImageUrl||o?.backgroundImageUrl||"",n=o?.questionGroup?.payload?.objectNodes?.length>0&&o?.questionGroup?.payload?.objectNodes||o?.answer?.objectNodes?.length>0&&o?.answer?.objectNodes||o?.content?.objectNodes?.length>0&&o?.content?.objectNodes||o?.objectNodes||[],r=o?.questionGroup?.payload?.dropZones?.length>0&&o?.questionGroup?.payload?.dropZones||o?.answer?.dropZones?.length>0&&o?.answer?.dropZones||o?.content?.dropZones?.length>0&&o?.content?.dropZones||o?.dropZones||[],a=o?.content?.audioUrl||o?.answer?.audioUrl||o?.audioUrl||"",c=o?.answer?.correctObjectId||o?.correctAnswer?.objectId||o?.answer?.objectId||o?.content?.correctObjectId||o?.correctObjectId||"",s=o?.answer?.correctDropZoneId||o?.correctAnswer?.dropZoneId||o?.answer?.dropZoneId||o?.content?.correctDropZoneId||o?.correctDropZoneId||"",d=o?.points||o?.answer?.points||1,p=o?.explanation||o?.answer?.explanation||o?.content?.explanation||"",l=o?.content?.isBackup||o?.isBackup||!1;return console.log("[LISTEN_AND_DRAG_OBJECTS_INTO_SCENE register] transformInitialData:",{correctObjectId:c,correctDropZoneId:s,audioUrl:a?"✓":"✗",backgroundImageUrl:t?"✓":"✗",objectNodesCount:n?.length||0,dropZonesCount:r?.length||0}),{audioUrl:a,backgroundImageUrl:t,objectNodes:n,dropZones:r,correctObjectId:c,correctDropZoneId:s,points:d,explanation:p,isBackup:l,isCompleted:o?.isCompleted}},getExtraProps:e=>({groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId,onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef}),wrapOnSave:(e,o)=>({type:o.questionType,content:{..."object"==typeof o.state.content&&null!==o.state.content?o.state.content:{},isBackup:e.isBackup||!1},answer:{audioUrl:e.audioUrl,backgroundImageUrl:e.backgroundImageUrl,objectNodes:e.objectNodes,dropZones:e.dropZones,correctObjectId:e.correctObjectId,correctDropZoneId:e.correctDropZoneId,groupNumber:e.groupNumber},points:e?.points??o.state.points??1,level:o.state.level,difficulty:o.state.difficulty,skill:o.state.skill,explanation:e?.explanation||""}),wrapOnChange:(e,o)=>({type:o.questionType,content:{..."object"==typeof o.state.content&&null!==o.state.content?o.state.content:{},isBackup:e.isBackup||!1},answer:{audioUrl:e.audioUrl,backgroundImageUrl:e.backgroundImageUrl,objectNodes:e.objectNodes,dropZones:e.dropZones,correctObjectId:e.correctObjectId,correctDropZoneId:e.correctDropZoneId,groupNumber:e.groupNumber},points:e?.points??o.state.points??1,level:o.state.level,difficulty:o.state.difficulty,skill:o.state.skill,explanation:e?.explanation||""})};
+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 || '',
+    }),
+};

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

@@ -1 +1,35 @@
-export const transformListenAndDragObjectsIntoScene=e=>{const r=e.answer,o={};r?.audioUrl&&(o.audioUrl=r.audioUrl);const t={backgroundImageUrl:r.backgroundImageUrl,objectNodes:(r.objectNodes||[]).map(e=>({id:e.id,imageUrl:e.imageUrl,label:e.label})),dropZones:(r.dropZones||[]).map(e=>({id:e.id,label:e.label,x:e.x,y:e.y,width:e.width,height:e.height}))};return{apiContent:o,apiCorrectAnswer:{objectId:r.correctObjectId||"",dropZoneId:r.correctDropZoneId||""},sceneData:t,groupNumber:r.groupNumber||1}};
+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,
+    };
+};

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

@@ -1 +1,8 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";export function ArrowIndicatorSVG({idSuffix:i="",animated:r=!1,className:o=""}){const n=`arrow-grad${i}`,l=`arrow-shadow${i}`,a=`arrow-glow${i}`;return t("svg",{viewBox:"0 0 64 80",className:o,xmlns:"http://www.w3.org/2000/svg",style:{filter:`url(#${l})`},children:[t("defs",{children:[t("linearGradient",{id:n,x1:"0.5",y1:"0",x2:"0.5",y2:"1",children:[e("stop",{offset:"0%",stopColor:"#FF4D6A"}),e("stop",{offset:"45%",stopColor:"#E8364F"}),e("stop",{offset:"100%",stopColor:"#C41E3A"})]}),e("filter",{id:l,x:"-20%",y:"-10%",width:"140%",height:"130%",children:e("feDropShadow",{dx:"0",dy:"2",stdDeviation:"3",floodColor:"#C41E3A",floodOpacity:"0.35"})}),r&&t("filter",{id:a,x:"-30%",y:"-20%",width:"160%",height:"150%",children:[e("feGaussianBlur",{stdDeviation:"4",result:"blur"}),e("feFlood",{floodColor:"#FF4D6A",floodOpacity:"0.4",result:"color"}),e("feComposite",{in:"color",in2:"blur",operator:"in",result:"glow"}),t("feMerge",{children:[e("feMergeNode",{in:"glow"}),e("feMergeNode",{in:"SourceGraphic"})]})]})]}),t("g",{style:r?{filter:`url(#${a})`}:void 0,children:[e("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(#${n})`,stroke:"#a01830",strokeWidth:"1",strokeOpacity:"0.25"}),e("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"}),e("rect",{x:"25",y:"8",width:"10",height:"20",rx:"5",fill:"white",opacity:"0.18"}),e("circle",{cx:"28",cy:"14",r:"2.5",fill:"white",opacity:"0.3"})]}),r&&t("circle",{cx:"32",cy:"72",r:"4",fill:"#FF4D6A",opacity:"0.6",children:[e("animate",{attributeName:"r",values:"3;8;3",dur:"2s",repeatCount:"indefinite"}),e("animate",{attributeName:"opacity",values:"0.5;0;0.5",dur:"2s",repeatCount:"indefinite"})]})]})}
+'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" })] }))] }));
+}

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

@@ -1 +1,22 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Mic as i,Volume2 as d,CheckCircle2 as n,Play as t,Pause as a,Info as s}from"lucide-react";import{Button as l}from"../../../../components/ui/button";import{usePresignedFileUrl as o,useAudioPreview as c}from"../../../../shared/lib/hooks";import{ArrowIndicatorSVG as m}from"./ArrowIndicator";function g({audioUrl:i}){const{previewUrl:n}=o(i),{isPlaying:s,currentTime:m,duration:g,progressPercentage:h,handlePlayPause:x,handleProgressClick:u,formatTime:p}=c(n);return r("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:[e(l,{variant:"outline",size:"icon",onClick:x,disabled:!n,className:"h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100",children:e(s?a:t,{className:"h-3.5 w-3.5"})}),r("div",{className:"text-muted-foreground min-w-[70px] text-xs",children:[p(m)," / ",p(g)]}),e("div",{className:"bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full",onClick:u,children:e("div",{className:"bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all",style:{width:`${h}%`}})}),e(d,{className:"h-4 w-4 text-indigo-400"})]})}export function ListenAndSpeakAnswerClient({questionData:t,isReviewMode:a=!1}){const{previewUrl:l}=o(t.backgroundImageUrl||"");return r("div",{className:"space-y-4",children:[t.isBackup&&r("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:[e("span",{children:"🔄"})," Câu hỏi dự phòng"]}),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[e("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:r("div",{className:"flex items-center gap-3",children:[e("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:e(i,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Nghe và trả lời"})]})}),r("div",{className:"p-5 space-y-5",children:[t.audioUrl?e(g,{audioUrl:t.audioUrl}):r("div",{className:"flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3",children:[e(d,{className:"h-4 w-4 text-gray-400"}),e("span",{className:"text-xs text-gray-400",children:"Chưa có audio câu hỏi"})]}),l&&t.arrowNode&&r("div",{className:"relative w-full max-w-3xl mx-auto rounded-xl overflow-hidden shadow-sm border border-gray-200 bg-gray-50",children:[e("img",{src:l,alt:"Background",className:"w-full object-contain pointer-events-none"}),e("div",{className:"absolute",style:{left:`${t.arrowNode.x}%`,top:`${t.arrowNode.y}%`,width:`${t.arrowNode.width}%`,height:`${t.arrowNode.height}%`},children:e("div",{className:"flex h-full w-full items-center justify-center overflow-hidden p-[6%]",children:e(m,{idSuffix:"-client",animated:!0,className:"w-full h-full"})})})]}),r("div",{className:"flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3",children:[e("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:e(i,{className:"w-4 h-4 text-indigo-400"})}),e("p",{className:"text-xs text-gray-400",children:"Học sinh sẽ nhấn nút ghi âm và nói câu trả lời tại đây"})]}),a&&t.expectedAnswers&&t.expectedAnswers.length>0&&r("div",{className:"rounded-xl border border-green-200 bg-green-50/80 p-4",children:[r("div",{className:"flex items-center gap-2 mb-3",children:[e(n,{className:"h-4 w-4 text-green-600"}),e("h4",{className:"text-sm font-semibold text-green-800",children:"Các đáp án mong muốn"})]}),e("div",{className:"space-y-2",children:t.expectedAnswers.map((i,d)=>r("div",{className:"flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2",children:[e("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:d+1}),e("span",{className:"text-sm text-green-800",children:i})]},d))})]}),a&&t.explanation&&r("div",{className:"rounded-xl border border-indigo-200 bg-indigo-50 p-4",children:[r("div",{className:"flex items-center gap-2 mb-2",children:[e(s,{className:"h-4 w-4 text-indigo-600"}),e("p",{className:"text-sm font-semibold text-indigo-800",children:"Giải thích"})]}),e("p",{className:"text-sm text-indigo-700 leading-relaxed",children:t.explanation})]})]})]})]})}
+'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 })] }))] })] })] }));
+}

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

@@ -1 +1,291 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useRef as a,useEffect as i,useCallback as n}from"react";import{Button as s}from"../../../../components/ui/button";import{Label as o}from"../../../../components/ui/label";import{Input as l}from"../../../../components/ui/input";import{Textarea as d}from"../../../../components/ui/textarea";import{PointsInput as c}from"../../../../components/ui/points-input";import{Card as h,CardContent as m,CardHeader as u,CardTitle as g}from"../../../../components/ui/card";import{useDebouncedCallback as p,usePresignedFileUrl as x}from"../../../../shared/lib/hooks";import{useReactHookForm as b}from"../../../../shared/lib/hooks/useReactHookForm";import{Pencil as w,Eye as f,Plus as N,Trash2 as v,Mic as y,Volume2 as k,ImageIcon as A,Locate as U,MessageSquareText as S,Info as I,ListChecks as C,BookOpen as M}from"lucide-react";import{FileUpload as V}from"../../../../components/ui/file-upload";import{useSceneQuestionGroup as z}from"../../_shared/hooks/useSceneQuestionGroup";import{ListenAndSpeakAnswerClient as j}from"./ListenAndSpeakAnswerClient";import{ArrowIndicatorSVG as B}from"./ArrowIndicator";import{listenAndSpeakAnswerFormSchema as D}from"../../../../shared/lib/validation/listen-and-speak-answer.validation";import{CreatorGuide as E}from"../../components/CreatorGuide";function J({backgroundUrl:s,arrowNode:o,onNodeUpdate:l}){const d=a(null),[c,h]=t(!1),[m,u]=t({x:0,y:0}),[g,p]=t(!1),[x,b]=t(null),[w,f]=t({x:0,y:0}),[N,v]=t({width:0,height:0}),y=(e,r)=>{r.preventDefault(),r.stopPropagation(),p(!0),b(e),f({x:r.clientX,y:r.clientY}),v({width:o.width,height:o.height})},k=n(e=>{if(d.current)if(c){const r=d.current.getBoundingClientRect(),t=(e.clientX-r.left)/r.width*100,a=(e.clientY-r.top)/r.height*100,i=Math.max(0,Math.min(100-o.width,t-m.x)),n=Math.max(0,Math.min(100-o.height,a-m.y));l({x:Math.round(10*i)/10,y:Math.round(10*n)/10})}else if(g&&x){const r=d.current.getBoundingClientRect(),t=(e.clientX-w.x)/r.width*100,a=(e.clientY-w.y)/r.height*100;let i=N.width,n=N.height;"e"!==x&&"se"!==x||(i=Math.max(1,Math.min(100-o.x,N.width+t))),"s"!==x&&"se"!==x||(n=Math.max(1,Math.min(100-o.y,N.height+a))),l({width:Math.round(10*i)/10,height:Math.round(10*n)/10})}},[c,g,x,w,N,m,o,l]),A=n(()=>{h(!1),p(!1),b(null)},[]);return i(()=>{if(c||g)return window.addEventListener("mousemove",k),window.addEventListener("mouseup",A),()=>{window.removeEventListener("mousemove",k),window.removeEventListener("mouseup",A)}},[c,g,k,A]),r("div",{ref:d,className:"relative w-full select-none overflow-hidden rounded-md",children:[e("img",{src:s,alt:"Scene background",className:"w-full rounded-md object-contain",draggable:!1}),r("div",{className:"absolute cursor-move rounded-lg border-2 transition-all duration-150 group "+(c||g?"border-indigo-400 shadow-md":"border-indigo-300/60 border-dashed hover:border-indigo-400 hover:border-solid hover:shadow-sm"),style:{left:`${o.x}%`,top:`${o.y}%`,width:`${o.width}%`,height:`${o.height}%`},onMouseDown:e=>{if(e.preventDefault(),!e.target.dataset.resizeHandle&&(h(!0),d.current)){const r=d.current.getBoundingClientRect(),t=(e.clientX-r.left)/r.width*100,a=(e.clientY-r.top)/r.height*100;u({x:t-o.x,y:a-o.y})}},children:[e("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ũi tên chỉ thị"}),e("div",{className:"flex h-full w-full items-center justify-center overflow-hidden rounded-md p-[8%]",children:e(B,{idSuffix:"-creator",className:"w-full h-full"})}),e("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=>y("e",e)}),e("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=>y("s",e)}),e("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=>y("se",e)})]}),r("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:",o.x,"% y:",o.y,"% w:",o.width,"% h:",o.height,"%"]})]})}export function ListenAndSpeakAnswerCreator({initialData:n,onSave:B,onCancel:O,onChange:G,externalErrors:H,validationRef:L,groups:P,questionIndexInPart:R=0,partId:F=""}){const T=n,q={backgroundImageUrl:T?.backgroundImageUrl||""},{currentGroupNumber:X,backgroundImageUrl:Y,setBackgroundImageUrl:$}=z({partId:F,groups:P,questionIndexInPart:R,initialData:q}),{previewUrl:K}=x(Y),Q=b({defaultValues:{audioUrl:T?.content?.audioUrl||T?.audioUrl||"",expectedAnswers:(T?.correctAnswer?.expectedAnswers||T?.expectedAnswers)?.length>0?T?.correctAnswer?.expectedAnswers||T?.expectedAnswers:[""],explanation:T?.explanation||"",points:T?.points??1,backgroundImageUrl:Y,arrowNode:T?.content?.arrowNode||T?.arrowNode||{x:40,y:30,width:10,height:20},isBackup:T?.isBackup||!1},zodSchema:D,mode:"onBlur"}),[_,W]=t(!1),Z=a(n),ee=a(!1),re=a(G),te=a("");i(()=>{re.current=G},[G]);const ae=p(e=>{re.current?.(e)},300),ie=Q.watch("audioUrl"),ne=Q.watch("expectedAnswers"),se=Q.watch("explanation"),oe=Q.watch("points"),le=Q.watch("arrowNode"),de=Q.watch("isBackup"),{previewUrl:ce}=x(ie||"");i(()=>{L&&(L.current={triggerValidation:async()=>await Q.trigger(),getFormData:()=>({audioUrl:ie,expectedAnswers:ne,explanation:se,points:oe,backgroundImageUrl:Y,arrowNode:le,isBackup:de,groupNumber:X})})},[L,Q,ie,ne,se,oe,de,Y,le,X]),i(()=>{const e=n,r={audioUrl:e?.content?.audioUrl||e?.audioUrl||"",expectedAnswers:(e?.correctAnswer?.expectedAnswers||e?.expectedAnswers)?.length>0?e?.correctAnswer?.expectedAnswers||e?.expectedAnswers:[""],explanation:e?.explanation||"",points:e?.points??1,isBackup:e?.isBackup||!1};if(!(JSON.stringify(Z.current)!==JSON.stringify(n)))return;Z.current=n;const t={audioUrl:ie,expectedAnswers:ne,explanation:se,points:oe,isBackup:de},a=t.points===r.points&&t.explanation===r.explanation&&t.audioUrl===r.audioUrl&&JSON.stringify(t.expectedAnswers)===JSON.stringify(r.expectedAnswers);if(a&&!0===n?.isCompleted)return;!a&&(r.audioUrl!==t.audioUrl||JSON.stringify(r.expectedAnswers)!==JSON.stringify(t.expectedAnswers))&&(ee.current=!0,Q.reset(r),setTimeout(()=>{ee.current=!1},150))},[n,Q,ie,ne,se,oe,de]);const he=JSON.stringify(ne),me=JSON.stringify(le);i(()=>{if(ee.current){const e=JSON.stringify({audioUrl:ie,expectedAnswers:ne,explanation:se,points:oe,backgroundImageUrl:Y,arrowNode:le,isBackup:de,groupNumber:X});return void(te.current=e)}const e={audioUrl:ie,expectedAnswers:ne,explanation:se,points:oe,backgroundImageUrl:Y,arrowNode:le,isBackup:de,groupNumber:X},r=JSON.stringify(e);te.current!==r&&(te.current=r,ae(e))},[ie,he,se,oe,de,me,Y,X,ae]);Q.handleSubmit(e=>{B?.({...e,backgroundImageUrl:Y,groupNumber:X})});if(_){const t={audioUrl:ie,expectedAnswers:ne,explanation:se,points:oe,backgroundImageUrl:Y,arrowNode:le};return r("div",{className:"space-y-6",children:[e(h,{children:e(u,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(g,{children:"Nghe và trả lời (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Preview mode"})]}),r(s,{variant:"outline",size:"sm",onClick:()=>W(!1),children:[e(w,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(j,{questionData:t,isReviewMode:!0})]})}return r("div",{className:"space-y-6",children:[e(E,{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:!0},{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"]}),r(h,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"}),e(u,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-3",children:[e("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:e(C,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(g,{className:"text-xl font-bold text-gray-900",children:"Nhóm đáp án"}),r("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:[e("span",{children:"🖼️"}),r("span",{children:["Nhóm ",X]}),e("span",{className:"text-xs font-normal opacity-75 ml-1",children:"(Dùng chung)"})]})]})]}),r(s,{variant:"outline",size:"sm",onClick:()=>W(!0),disabled:!ie||0===ne.filter(e=>e.trim()).length,className:"gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700",children:[e(f,{className:"h-4 w-4"}),"Preview"]})]})})]}),r(h,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-blue-400 to-indigo-400"}),e(u,{className:"pb-4",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-blue-100",children:e(A,{className:"h-3.5 w-3.5 text-blue-600"})}),e(g,{className:"text-lg font-semibold text-gray-800",children:"Hình ảnh nền & Mũi tên chỉ thị"})]})}),e(m,{className:"space-y-6",children:r("div",{className:"rounded-xl border border-gray-200 bg-gray-50 p-4",children:[r(o,{className:"flex items-center gap-2 text-base font-semibold text-blue-800",children:[e(A,{className:"h-4 w-4 text-blue-600"}),"Hình ảnh nền"]}),r("div",{className:"mt-2",children:[e(V,{id:"scene-background",label:"",accept:"image/*",value:Y,onChange:e=>{$(e),Q.setValue("backgroundImageUrl",e,{shouldValidate:!0})},maxSize:10,placeholder:"Upload hình ảnh nền",autoUpload:!0,prefix:"questions/scenes"}),Q.hasError("backgroundImageUrl")&&e("p",{className:"text-sm text-red-600 mt-1",children:Q.getFieldError("backgroundImageUrl")})]}),K&&r("div",{className:"mt-4 overflow-hidden rounded-lg border border-gray-200 bg-white",children:[r("div",{className:"border-b border-gray-100 px-3 py-2 bg-gray-50 flex items-center gap-2",children:[e(U,{className:"h-4 w-4 text-blue-500"}),e("span",{className:"text-sm font-medium text-gray-700",children:"Kéo thả và điều chỉnh kích thước mũi tên để chỉ vào đối tượng"})]}),e("div",{className:"p-2",children:e(J,{backgroundUrl:K,arrowNode:le,onNodeUpdate:e=>{Q.setValue("arrowNode",{...le,...e},{shouldValidate:!0})}})})]})]})})]}),r(h,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-indigo-500 to-blue-500"}),e(u,{className:"pb-4",children:r("div",{className:"flex items-center gap-3",children:[e("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:e(y,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(g,{className:"text-xl font-bold text-gray-900",children:"Nghe và trả lời"}),e("p",{className:"text-sm text-gray-500",children:"Học sinh nghe âm thanh và thu âm câu trả lời"})]})]})}),r(m,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gray-50 p-4",children:e("div",{className:"flex flex-col gap-4",children:e("div",{className:"w-full md:w-1/2",children:e(c,{...Q.register("points",{valueAsNumber:!0}),error:Q.hasError("points")?Q.getFieldError("points"):void 0})})})}),r("div",{className:"space-y-2",children:[r(o,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(k,{className:"h-4 w-4 text-indigo-500"}),"Audio câu hỏi"]}),e(V,{id:"audioUrl",label:"",accept:"audio/*",value:ie||"",onChange:e=>{Q.setValue("audioUrl",e,{shouldValidate:!0})},maxSize:10,placeholder:"Tải lên file âm thanh (mp3, wav...)",autoUpload:!0,prefix:"listen-and-speak"}),Q.hasError("audioUrl")&&e("p",{className:"text-sm text-red-600",children:Q.getFieldError("audioUrl")}),ce&&e("audio",{controls:!0,className:"mt-2 w-full",src:ce,children:"Trình duyệt không hỗ trợ audio."})]}),H&&H.length>0&&e("div",{className:"flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4",children:r("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Cần phải sửa các lỗi sau:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:H.map((r,t)=>e("li",{children:r},t))})]})})]})]}),r(h,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-green-400 to-emerald-500"}),e(u,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-3",children:[e("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:e(S,{className:"h-4 w-4 text-white"})}),e("div",{children:r(g,{className:"text-lg font-semibold text-gray-800",children:["Đáp án mong muốn (",ne.filter(e=>e.trim()).length,")"]})})]}),r(s,{variant:"outline",size:"sm",onClick:()=>{const e=Q.getValues("expectedAnswers");Q.setValue("expectedAnswers",[...e,""])},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50",children:[e(N,{className:"h-4 w-4"}),"Thêm đáp án"]})]})}),r(m,{className:"space-y-4",children:[r("div",{className:"flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5",children:[e(I,{className:"h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"}),r("div",{className:"text-xs text-blue-700 space-y-1",children:[e("p",{children:"Nhập các câu trả lời mong muốn. Có thể thêm nhiều đáp án nếu có nhiều cách trả lời đúng."}),r("p",{children:[e("span",{className:"font-semibold",children:"• Chấm thủ công:"})," Giáo viên dùng các đáp án này làm tham khảo để chấm điểm."]}),r("p",{children:[e("span",{className:"font-semibold",children:"• Chấm tự động (AI):"})," Hệ thống dùng AI so sánh giọng nói của học sinh với các đáp án để tự động chấm điểm."]})]})]}),r("div",{className:"space-y-3",children:[ne.map((t,a)=>r("div",{className:"flex items-start gap-3 group/answer",children:[e("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:a+1}),r("div",{className:"flex-1",children:[e(l,{value:t||"",onChange:e=>{const r=[...ne];r[a]=e.target.value,Q.setValue("expectedAnswers",r,{shouldValidate:!0})},placeholder:"Ví dụ: I have a dog...",className:"border-gray-200 focus:border-green-300 focus:ring-green-200"}),Q.formState.errors?.expectedAnswers?.[a]?.message&&e("p",{className:"mt-1 text-sm text-red-500",children:Q.formState.errors.expectedAnswers[a]?.message})]}),ne.length>1&&e(s,{variant:"ghost",size:"sm",onClick:()=>{const e=ne.filter((e,r)=>r!==a);Q.setValue("expectedAnswers",e,{shouldValidate:!0})},className:"text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity",children:e(v,{className:"h-4 w-4"})})]},a)),Q.formState.errors?.expectedAnswers&&!Array.isArray(Q.formState.errors.expectedAnswers)&&e("p",{className:"text-sm text-red-500",children:Q.formState.errors.expectedAnswers.message})]})]})]}),r(h,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),e(u,{className:"pb-4",children:r("div",{className:"flex items-center gap-3",children:[e("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:e(M,{className:"h-4 w-4 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(g,{className:"text-lg font-semibold text-gray-800",children:"Giải thích"}),e("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ông bắt buộc"})]}),e("p",{className:"text-sm text-gray-500 mt-0.5",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(m,{children:e(d,{value:se,onChange:e=>Q.setValue("explanation",e.target.value,{shouldValidate:!0}),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}
+'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" }) })] })] }));
+}

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

@@ -1 +1,2 @@
-export*from"./ListenAndSpeakAnswerCreator";export*from"./ListenAndSpeakAnswerClient";
+export * from './ListenAndSpeakAnswerCreator';
+export * from './ListenAndSpeakAnswerClient';