@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

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

@@ -1 +1,79 @@
-import{ListenAndSpeakCompareImagesCreator as e}from"./ListenAndSpeakCompareImagesCreator";export const ListenAndSpeakCompareImagesRegistration={component:e,wrapOnSave:(e,a)=>({type:a.questionType,points:e?.points??a.state.points??1,level:a.state.level,difficulty:a.state.difficulty,skill:a.state.skill,explanation:e.explanation||"",content:{audioUrl:e.audioUrl,isBackup:e.isBackup||!1},answer:{expectedAnswers:e.expectedAnswers},...a.groupNumber&&{questionGroup:{payload:{candidateImageUrl:e.candidateImageUrl||"",examinerImageUrl:e.examinerImageUrl||""},groupNumber:a.groupNumber}}}),getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef,groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId}),wrapOnChange:(e,a)=>({type:a.questionType,points:e?.points??a.state.points??1,level:a.state.level,difficulty:a.state.difficulty,skill:a.state.skill,explanation:e.explanation||"",content:{audioUrl:e.audioUrl,isBackup:e.isBackup||!1},correct_answer:{expectedAnswers:e.expectedAnswers},...a.groupNumber&&{questionGroup:{payload:{candidateImageUrl:e.candidateImageUrl||"",examinerImageUrl:e.examinerImageUrl||""},groupNumber:a.groupNumber}}}),transformInitialData:e=>{let a=e?.answer;const t=e?.content,n=e?.answer||e?.correctAnswer||e?.correct_answer,r=e?.total_points?parseFloat(e.total_points):e?.points||t?.points||n?.points||1,i=e?.explanation||t?.explanation||n?.explanation||"";return t&&"object"==typeof t&&void 0!==t.audioUrl?a={audioUrl:t.audioUrl||"",expectedAnswers:n?.expectedAnswers||[],candidateImageUrl:t.candidateImageUrl||e?.questionGroup?.payload?.candidateImageUrl||"",examinerImageUrl:t.examinerImageUrl||e?.questionGroup?.payload?.examinerImageUrl||"",explanation:i,points:r,isBackup:t.isBackup||!1}:n&&"object"==typeof n&&void 0!==n.expectedAnswers&&(a={...n,audioUrl:n.audioUrl||t?.audioUrl||"",candidateImageUrl:n.candidateImageUrl||e?.questionGroup?.payload?.candidateImageUrl||"",examinerImageUrl:n.examinerImageUrl||e?.questionGroup?.payload?.examinerImageUrl||"",explanation:i,points:r,isBackup:t?.isBackup||!1}),a||e}};
+import { ListenAndSpeakCompareImagesCreator } from './ListenAndSpeakCompareImagesCreator';
+export const ListenAndSpeakCompareImagesRegistration = {
+    component: ListenAndSpeakCompareImagesCreator,
+    wrapOnSave: (data, ctx) => {
+        return {
+            type: ctx.questionType,
+            points: data?.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            explanation: data.explanation || '',
+            content: {
+                audioUrl: data.audioUrl,
+                isBackup: data.isBackup || false,
+            },
+            answer: {
+                expectedAnswers: data.expectedAnswers,
+            },
+            ...(ctx.groupNumber && { questionGroup: { payload: { candidateImageUrl: data.candidateImageUrl || '', examinerImageUrl: data.examinerImageUrl || '' }, groupNumber: ctx.groupNumber } })
+        };
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+    }),
+    wrapOnChange: (data, ctx) => {
+        return {
+            type: ctx.questionType,
+            points: data?.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            explanation: data.explanation || '',
+            content: {
+                audioUrl: data.audioUrl,
+                isBackup: data.isBackup || false,
+            },
+            correct_answer: {
+                expectedAnswers: data.expectedAnswers,
+            },
+            ...(ctx.groupNumber && { questionGroup: { payload: { candidateImageUrl: data.candidateImageUrl || '', examinerImageUrl: data.examinerImageUrl || '' }, groupNumber: ctx.groupNumber } })
+        };
+    },
+    transformInitialData: (data) => {
+        let creatorData = data?.answer;
+        const content = data?.content;
+        const answer = data?.answer || data?.correctAnswer || data?.correct_answer;
+        const points = data?.total_points
+            ? parseFloat(data.total_points)
+            : (data?.points || content?.points || answer?.points || 1);
+        const explanation = data?.explanation || content?.explanation || answer?.explanation || '';
+        if (content && typeof content === 'object' && content.audioUrl !== undefined) {
+            creatorData = {
+                audioUrl: content.audioUrl || '',
+                expectedAnswers: answer?.expectedAnswers || [],
+                candidateImageUrl: content.candidateImageUrl || data?.questionGroup?.payload?.candidateImageUrl || '',
+                examinerImageUrl: content.examinerImageUrl || data?.questionGroup?.payload?.examinerImageUrl || '',
+                explanation,
+                points,
+                isBackup: content.isBackup || false,
+            };
+        }
+        else if (answer && typeof answer === 'object' && answer.expectedAnswers !== undefined) {
+            creatorData = {
+                ...answer,
+                audioUrl: answer.audioUrl || content?.audioUrl || '',
+                candidateImageUrl: answer.candidateImageUrl || data?.questionGroup?.payload?.candidateImageUrl || '',
+                examinerImageUrl: answer.examinerImageUrl || data?.questionGroup?.payload?.examinerImageUrl || '',
+                explanation,
+                points,
+                isBackup: content?.isBackup || false,
+            };
+        }
+        return creatorData || data;
+    },
+};

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

@@ -1 +1,27 @@
-export const transformListenAndSpeakCompareImages=e=>{const a=e.content,r=e.answer,n=e.questionGroup,o=r?.expectedAnswers||[],p={apiContent:{audioUrl:a?.audioUrl||r?.audioUrl||"",isBackup:a?.isBackup||r?.isBackup||!1},apiCorrectAnswer:{expectedAnswers:o}},t=r?.candidateImageUrl||n?.payload?.candidateImageUrl||"",m=r?.examinerImageUrl||n?.payload?.examinerImageUrl||"";return(t||m)&&(p.compareImagesGroupData={candidateImageUrl:t,examinerImageUrl:m},p.groupNumber=r?.groupNumber||n?.groupNumber||1),p};
+export const transformListenAndSpeakCompareImages = (question) => {
+    const contentData = question.content;
+    const answerData = question.answer;
+    const questionGroup = question.questionGroup;
+    const expectedAnswers = answerData?.expectedAnswers || [];
+    const apiContent = {
+        audioUrl: contentData?.audioUrl || answerData?.audioUrl || '',
+        isBackup: contentData?.isBackup || answerData?.isBackup || false,
+    };
+    const result = {
+        apiContent,
+        apiCorrectAnswer: {
+            expectedAnswers: expectedAnswers,
+        },
+    };
+    // Handle group data for candidate/examiner images
+    const candidateImageUrl = answerData?.candidateImageUrl || questionGroup?.payload?.candidateImageUrl || '';
+    const examinerImageUrl = answerData?.examinerImageUrl || questionGroup?.payload?.examinerImageUrl || '';
+    if (candidateImageUrl || examinerImageUrl) {
+        result.compareImagesGroupData = {
+            candidateImageUrl,
+            examinerImageUrl,
+        };
+        result.groupNumber = answerData?.groupNumber || questionGroup?.groupNumber || 1;
+    }
+    return result;
+};

package/dist/components/questions/types/listen-and-speak-image-group/ListenAndSpeakImageGroupClient.js

@@ -1 +1,34 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Mic as t,Volume2 as i,CheckCircle2 as a,Images as s,Play as l,Pause as n,ImageIcon as d,Info as o}from"lucide-react";import{Button as c}from"../../../../components/ui/button";import{usePresignedFileUrl as m,useAudioPreview as h}from"../../../../shared/lib/hooks";import{cn as g}from"../../../../shared/lib/utils";function x({audioUrl:t}){const{previewUrl:a}=m(t),{isPlaying:s,currentTime:d,duration:o,progressPercentage:g,handlePlayPause:x,handleProgressClick:u,formatTime:b}=h(a);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(c,{variant:"outline",size:"icon",onClick:x,disabled:!a,className:"h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100",children:e(s?n:l,{className:"h-3.5 w-3.5"})}),r("div",{className:"text-muted-foreground min-w-[70px] text-xs",children:[b(d)," / ",b(o)]}),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:`${g}%`}})}),e(i,{className:"h-4 w-4 text-indigo-400"})]})}function u({url:r,alt:t}){const{previewUrl:i}=m(r);return e("img",{src:i||r,alt:t,className:"max-w-full max-h-full object-contain p-2"})}export function ListenAndSpeakImageGroupClient({questionData:l,isReviewMode:n=!1}){const{audioUrl:c,activeImageId:m,groupImages:h=[],expectedAnswers:b=[],explanation:p}=l;return r("div",{className:"space-y-4",children:[l.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(s,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Nghe và nói (Nhóm hình ảnh)"})]})}),r("div",{className:"p-5 space-y-5",children:[c?e(x,{audioUrl:c}):r("div",{className:"flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3",children:[e(i,{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"})]}),h.length>0?e("div",{className:"rounded-xl border border-gray-100 bg-gradient-to-b from-gray-50/80 to-white p-5",children:e("div",{className:"flex flex-row justify-center gap-4 sm:gap-5 flex-wrap",children:h.map((t,i)=>{const s=t.id===m,l=String.fromCharCode(65+i);return r("div",{className:g("flex flex-col items-center gap-2 transition-transform duration-300",s&&"scale-[1.03]"),children:[r("div",{className:g("relative w-28 h-28 sm:w-36 sm:h-36 rounded-xl overflow-hidden flex items-center justify-center bg-white transition-all duration-300",s?"border-[3px] border-blue-400 shadow-lg shadow-blue-100/70 ring-2 ring-blue-200/40":"border-2 border-gray-200 shadow-sm hover:shadow-md hover:border-gray-300"),children:[t.url?e(u,{url:t.url,alt:t.label||`Image ${i+1}`}):e("div",{className:"w-full h-full bg-gray-50 flex items-center justify-center text-gray-300",children:e(d,{className:"h-10 w-10"})}),e("div",{className:g("absolute top-1.5 left-1.5 flex h-6 w-6 items-center justify-center rounded-lg text-xs font-bold shadow-sm",s?"bg-blue-500 text-white":"bg-white/90 text-gray-500 border border-gray-200"),children:l}),s&&e("div",{className:"absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center shadow-sm",children:e(a,{className:"h-3.5 w-3.5 text-white"})})]}),r("div",{className:"flex flex-col items-center gap-0.5",children:[e("span",{className:g("text-sm font-semibold px-2.5 py-0.5 rounded-md transition-colors",s?"text-blue-700 bg-blue-50":"text-gray-600"),children:t.label||`Hình ${i+1}`}),s&&e("span",{className:"text-[10px] font-medium text-blue-500 animate-pulse",children:"Đang hỏi"})]})]},t.id)})})}):r("div",{className:"flex flex-col items-center justify-center py-10 px-4 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50",children:[e(d,{className:"h-12 w-12 text-gray-300 mb-3"}),e("p",{className:"text-sm font-medium text-gray-500",children:"Chưa có hình ảnh nào"}),e("p",{className:"text-xs text-gray-400 mt-1",children:"Hình ảnh sẽ hiển thị tại đây"})]}),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(t,{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"})]}),n&&b.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(a,{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:b.map((t,i)=>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:i+1}),e("span",{className:"text-sm text-green-800",children:t})]},i))})]}),n&&p&&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(o,{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:p})]})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mic, Volume2, CheckCircle2, Images, Play, Pause, ImageIcon, Info } from 'lucide-react';
+import { Button } from '../../../../components/ui/button';
+import { usePresignedFileUrl, useAudioPreview } from '../../../../shared/lib/hooks';
+import { cn } from '../../../../shared/lib/utils';
+// ─── 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" })] }));
+}
+// ─── Sub-component: Presigned Image ──────────────────────────────────────────
+function ImageWithPresigned({ url, alt }) {
+    const { previewUrl } = usePresignedFileUrl(url);
+    return (_jsx("img", { src: previewUrl || url, alt: alt, className: "max-w-full max-h-full object-contain p-2" }));
+}
+// ─── Main Client Component ───────────────────────────────────────────────────
+export function ListenAndSpeakImageGroupClient({ questionData, isReviewMode = false, }) {
+    const { audioUrl, activeImageId, groupImages = [], expectedAnswers = [], explanation } = questionData;
+    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(Images, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 n\u00F3i (Nh\u00F3m h\u00ECnh \u1EA3nh)" })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [audioUrl ? (_jsx(QuestionAudioPlayer, { audioUrl: audioUrl })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 text-gray-400" }), _jsx("span", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 audio c\u00E2u h\u1ECFi" })] })), groupImages.length > 0 ? (_jsx("div", { className: "rounded-xl border border-gray-100 bg-gradient-to-b from-gray-50/80 to-white p-5", children: _jsx("div", { className: "flex flex-row justify-center gap-4 sm:gap-5 flex-wrap", children: groupImages.map((img, index) => {
+                                        const isActive = img.id === activeImageId;
+                                        const letter = String.fromCharCode(65 + index);
+                                        return (_jsxs("div", { className: cn('flex flex-col items-center gap-2 transition-transform duration-300', isActive && 'scale-[1.03]'), children: [_jsxs("div", { className: cn('relative w-28 h-28 sm:w-36 sm:h-36 rounded-xl overflow-hidden flex items-center justify-center bg-white transition-all duration-300', isActive
+                                                        ? 'border-[3px] border-blue-400 shadow-lg shadow-blue-100/70 ring-2 ring-blue-200/40'
+                                                        : 'border-2 border-gray-200 shadow-sm hover:shadow-md hover:border-gray-300'), children: [img.url ? (_jsx(ImageWithPresigned, { url: img.url, alt: img.label || `Image ${index + 1}` })) : (_jsx("div", { className: "w-full h-full bg-gray-50 flex items-center justify-center text-gray-300", children: _jsx(ImageIcon, { className: "h-10 w-10" }) })), _jsx("div", { className: cn('absolute top-1.5 left-1.5 flex h-6 w-6 items-center justify-center rounded-lg text-xs font-bold shadow-sm', isActive
+                                                                ? 'bg-blue-500 text-white'
+                                                                : 'bg-white/90 text-gray-500 border border-gray-200'), children: letter }), isActive && (_jsx("div", { className: "absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center shadow-sm", children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-white" }) }))] }), _jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [_jsx("span", { className: cn('text-sm font-semibold px-2.5 py-0.5 rounded-md transition-colors', isActive
+                                                                ? 'text-blue-700 bg-blue-50'
+                                                                : 'text-gray-600'), children: img.label || `Hình ${index + 1}` }), isActive && (_jsx("span", { className: "text-[10px] font-medium text-blue-500 animate-pulse", children: "\u0110ang h\u1ECFi" }))] })] }, img.id));
+                                    }) }) })) : (
+                            /* Empty state for no images */
+                            _jsxs("div", { className: "flex flex-col items-center justify-center py-10 px-4 rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50", children: [_jsx(ImageIcon, { className: "h-12 w-12 text-gray-300 mb-3" }), _jsx("p", { className: "text-sm font-medium text-gray-500", children: "Ch\u01B0a c\u00F3 h\u00ECnh \u1EA3nh n\u00E0o" }), _jsx("p", { className: "text-xs text-gray-400 mt-1", children: "H\u00ECnh \u1EA3nh s\u1EBD hi\u1EC3n th\u1ECB t\u1EA1i \u0111\u00E2y" })] })), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-indigo-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: "H\u1ECDc sinh s\u1EBD nh\u1EA5n n\u00FAt ghi \u00E2m v\u00E0 n\u00F3i c\u00E2u tr\u1EA3 l\u1EDDi t\u1EA1i \u0111\u00E2y" })] }), isReviewMode && expectedAnswers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "C\u00E1c \u0111\u00E1p \u00E1n mong mu\u1ED1n" })] }), _jsx("div", { className: "space-y-2", children: expectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, index))) })] })), isReviewMode && explanation && (_jsxs("div", { className: "rounded-xl border border-indigo-200 bg-indigo-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-indigo-600" }), _jsx("p", { className: "text-sm font-semibold text-indigo-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("p", { className: "text-sm text-indigo-700 leading-relaxed", children: explanation })] }))] })] })] }));
+}

package/dist/components/questions/types/listen-and-speak-image-group/ListenAndSpeakImageGroupCreator.js

@@ -1 +1,285 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useEffect as t,useMemo as a,useRef as i,useState as s}from"react";import{Card as n,CardContent as l,CardHeader as d,CardTitle as o}from"../../../../components/ui/card";import{Label as c}from"../../../../components/ui/label";import{Button as m}from"../../../../components/ui/button";import{Input as h}from"../../../../components/ui/input";import{Textarea as g}from"../../../../components/ui/textarea";import{Plus as u,Trash2 as p,Pencil as x,Eye as f,Mic as b,Volume2 as N,ImageIcon as v,Image as w,CheckCircle2 as y,MessageSquareText as I,Info as C,ListChecks as k,BookOpen as A}from"lucide-react";import{useReactHookForm as U}from"../../../../shared/lib/hooks/useReactHookForm";import{useDebouncedCallback as S,usePresignedFileUrl as j}from"../../../../shared/lib/hooks";import{FileUpload as V}from"../../../../components/ui/file-upload";import{PointsInput as D}from"../../../../components/ui/points-input";import{useImageQuestionGroup as z}from"../../_shared/hooks/useImageQuestionGroup";import{generateObjectId as B}from"../../_shared/utils/id-generator";import{ListenAndSpeakImageGroupClient as J}from"./ListenAndSpeakImageGroupClient";import{listenAndSpeakImageGroupFormSchema as O}from"../../../../shared/lib/validation/listen-and-speak-image-group.validation";import{CreatorGuide as E}from"../../components/CreatorGuide";function G({imageUrl:r}){const{previewUrl:t}=j(r);return t?e("div",{className:"mt-2 rounded-lg border border-gray-200 overflow-hidden",children:e("img",{src:t,alt:"Preview",className:"h-24 w-full object-contain bg-gray-50"})}):null}function q({imageUrl:r}){const{previewUrl:t}=j(r);return t?e("img",{src:t,alt:"Preview",className:"h-16 w-full rounded-lg object-contain bg-gray-50"}):e("div",{className:"flex h-16 w-full items-center justify-center rounded-lg bg-gray-100",children:e(w,{className:"h-6 w-6 text-gray-300"})})}export function ListenAndSpeakImageGroupCreator({initialData:P,onSave:T,onCancel:H,onChange:F,externalErrors:R,onUnsavedChangesChange:L,validationRef:M,groups:Q,questionIndexInPart:_,partId:K}){const{isGrouped:$,currentGroupNumber:W,images:X,setImages:Y}=z({partId:K,groups:Q,questionIndexInPart:_,initialData:{images:P?.groupImages||[]}}),Z=(a(()=>{if(!Q||!Q.length||void 0===_)return!0;let e=0;for(const r of Q){if(_===e)return!0;e+=r.questionCount}return!1},[Q,_]),P),ee=U({zodSchema:O,defaultValues:{audioUrl:Z?.audioUrl||"",expectedAnswers:Z?.expectedAnswers?.length>0?Z.expectedAnswers:[""],explanation:Z?.explanation||"",points:Z?.points??1,activeImageId:Z?.activeImageId||"",isBackup:Z?.isBackup||!1},mode:"onBlur"}),[re,te]=s(!1),ae=ee.watch("audioUrl"),ie=ee.watch("expectedAnswers"),se=ee.watch("activeImageId"),ne=ee.watch("explanation"),le=ee.watch("points"),de=ee.watch("isBackup"),{previewUrl:oe}=j(ae||""),ce=i(P),me=i(!1),he=i(F),ge=i("");t(()=>{he.current=F},[F]);const ue=S(e=>{he.current?.(e)},300);t(()=>{M&&(M.current={triggerValidation:async()=>await ee.trigger(),getFormData:()=>({audioUrl:ae,expectedAnswers:ie,explanation:ne,points:le,activeImageId:se,isBackup:de,groupImages:X,groupNumber:$?W:void 0})})},[M,ee,ae,ie,ne,le,se,de,X,$,W]),t(()=>{const e={audioUrl:Z?.audioUrl||"",expectedAnswers:Z?.expectedAnswers?.length>0?Z.expectedAnswers:[""],explanation:Z?.explanation||"",points:Z?.points??1,activeImageId:Z?.activeImageId||"",isBackup:Z?.isBackup||!1};if(!(JSON.stringify(ce.current)!==JSON.stringify(P)))return;ce.current=P;const r={audioUrl:ae,expectedAnswers:ie,explanation:ne,points:le,activeImageId:se,isBackup:de},t=r.points===e.points&&r.explanation===e.explanation&&r.audioUrl===e.audioUrl&&r.activeImageId===e.activeImageId&&JSON.stringify(r.expectedAnswers)===JSON.stringify(e.expectedAnswers);if(t&&!0===P?.isCompleted)return;!t&&(e.audioUrl!==r.audioUrl||e.activeImageId!==r.activeImageId||JSON.stringify(e.expectedAnswers)!==JSON.stringify(r.expectedAnswers))&&(me.current=!0,ee.reset(e),setTimeout(()=>{me.current=!1},150))},[P,ee,ae,ie,ne,le,se,de]);const pe=JSON.stringify(ie),xe=JSON.stringify(X);t(()=>{if(me.current){const e=JSON.stringify({audioUrl:ae,expectedAnswers:ie,explanation:ne,points:le,activeImageId:se,isBackup:de,groupImages:X,groupNumber:$?W:void 0});return void(ge.current=e)}const e={audioUrl:ae,expectedAnswers:ie,explanation:ne,points:le,activeImageId:se,isBackup:de,groupImages:X,groupNumber:$?W:void 0},r=JSON.stringify(e);ge.current!==r&&(ge.current=r,ue(e))},[ae,pe,ne,le,se,de,xe,ue]),t(()=>{L&&L(ee.formState.isDirty)},[ee.formState.isDirty,L]);const fe=()=>{Y([...X,{id:B(),url:"",label:String(X.length+1)}])},be=(e,r,t)=>{const a=[...X];a[e]={...a[e],[r]:t},Y(a)};if(re){const t={audioUrl:ae,expectedAnswers:ie,explanation:ne,points:le,activeImageId:se,isBackup:de,groupImages:X,groupNumber:$?W:void 0};return r("div",{className:"space-y-6",children:[e(n,{children:e(d,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(o,{children:"Nghe và trả lời theo nhóm ảnh (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Preview mode"})]}),r(m,{variant:"outline",size:"sm",onClick:()=>te(!1),children:[e(x,{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:"emerald",steps:[{text:"Thêm hình ảnh vào nhóm — mỗi hình cần có URL và nhãn mô tả"},{text:"Hình ảnh dùng chung cho tất cả câu hỏi trong nhóm (câu hỏi đầu tiên sẽ quản lý)"},{text:"Upload audio câu hỏi cho từng câu — giám khảo sẽ hỏi về từng hình"},{text:"Chọn hình ảnh đang được hỏi (active image) cho mỗi câu",highlight:!0},{text:"Nhập các đáp án mong muốn và giải thích"}],tips:["Sắp xếp hình ảnh theo thứ tự logic, gắn nhãn rõ ràng"]}),r(n,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-emerald-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500"}),e(d,{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-emerald-500 to-teal-600 shadow-md",children:e(k,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(o,{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-emerald-100 px-3 py-1 text-sm font-medium text-emerald-700",children:[e("span",{children:"🖼️"}),r("span",{children:["Nhóm ",W]}),e("span",{className:"text-xs font-normal opacity-75 ml-1",children:"(Dùng chung)"})]})]})]}),r(m,{variant:"outline",size:"sm",onClick:()=>te(!0),disabled:!ae||0===ie.filter(e=>e.trim()).length,className:"gap-2 border-emerald-200 text-emerald-600 hover:bg-emerald-50 hover:text-emerald-700",children:[e(f,{className:"h-4 w-4"}),"Preview"]})]})})]}),r(n,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-emerald-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-emerald-400 to-teal-400"}),e(d,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",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-emerald-100",children:e(w,{className:"h-3.5 w-3.5 text-emerald-600"})}),e(o,{className:"text-lg font-semibold text-gray-800",children:"Nhóm Hình Ảnh"})]}),X.length<4&&r(m,{variant:"outline",size:"sm",onClick:fe,className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(u,{className:"h-4 w-4"}),"Thêm hình ảnh"]})]})}),r(l,{className:"space-y-4",children:[e("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:X.map((t,a)=>r("div",{className:"rounded-xl border border-gray-200 bg-gray-50 p-4",children:[r("div",{className:"flex items-center justify-between mb-3",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white text-sm font-bold shadow-sm",children:String.fromCharCode(65+a)}),r("span",{className:"text-sm font-semibold text-gray-700",children:["Hình ảnh ",String.fromCharCode(65+a)]})]}),X.length>1&&e(m,{variant:"ghost",size:"sm",onClick:()=>(e=>{Y(X.filter((r,t)=>t!==e)),X[e].id===se&&ee.setValue("activeImageId","",{shouldValidate:!0,shouldDirty:!0})})(a),className:"h-7 w-7 p-0 text-red-500 hover:text-red-700 hover:bg-red-50",children:e(p,{className:"h-3.5 w-3.5"})})]}),e(V,{id:`group-img-${t.id}`,label:"",accept:"image/*",value:t.url,onChange:e=>be(a,"url",e),maxSize:5,placeholder:"Upload hình ảnh",autoUpload:!0,prefix:"questions/images"}),t.url&&e(G,{imageUrl:t.url}),r("div",{className:"mt-3",children:[e(c,{className:"text-xs font-medium text-gray-600",children:"Nhãn"}),e(h,{value:t.label,onChange:e=>be(a,"label",e.target.value),placeholder:"Nhập nhãn / mô tả ngắn",className:"mt-1 border-gray-200"})]})]},t.id))}),0===X.length&&r("div",{className:"flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-indigo-300 p-8 bg-indigo-50/50",children:[e(w,{className:"h-10 w-10 text-indigo-400 mb-2"}),e("p",{className:"text-sm text-gray-500 mb-3",children:"Chưa có hình ảnh nào"}),r(m,{variant:"outline",size:"sm",onClick:fe,className:"gap-2",children:[e(u,{className:"h-4 w-4"}),"Thêm hình ảnh đầu tiên"]})]})]})]}),r(n,{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(d,{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(b,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(o,{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 cho bức ảnh được chọn"})]})]})}),r(l,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gray-50 p-4",children:e("div",{className:"w-full md:w-1/2",children:e(D,{...ee.register("points",{valueAsNumber:!0}),error:ee.hasError("points")?ee.getFieldError("points"):void 0})})}),r("div",{className:"space-y-2",children:[r(c,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(v,{className:"h-4 w-4 text-indigo-500"}),"Chọn hình ảnh đang được hỏi"]}),X.filter(e=>e.url).length>0?e("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-4",children:X.map((t,a)=>{if(!t.url)return null;const i=se===t.id;return r("button",{type:"button",onClick:()=>{ee.setValue("activeImageId",t.id,{shouldValidate:!0,shouldDirty:!0})},className:"relative text-left rounded-xl border-2 p-2 transition-all "+(i?"border-indigo-500 bg-indigo-50 ring-2 ring-indigo-200 shadow-md":"border-gray-200 hover:border-gray-400 hover:shadow-sm"),children:[r("div",{className:"flex flex-col items-center gap-2",children:[e("div",{className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold shadow-sm "+(i?"bg-indigo-500 text-white":"bg-gray-100 text-gray-600"),children:String.fromCharCode(65+a)}),e(q,{imageUrl:t.url}),t.label&&e("p",{className:"text-xs text-center "+(i?"text-indigo-700 font-medium":"text-gray-600"),children:t.label})]}),i&&e("div",{className:"absolute top-1 right-1",children:e(y,{className:"h-5 w-5 text-indigo-500"})})]},t.id)})}):e("p",{className:"text-sm text-amber-600 italic",children:"Vui lòng upload ảnh cho hình ảnh ở phần trên trước"}),ee.hasError("activeImageId")&&e("div",{className:"mt-2 rounded-lg border border-red-200 bg-red-50 p-3",children:r("p",{className:"text-sm text-red-700",children:["⚠️ ",ee.getFieldError("activeImageId")]})}),!ee.hasError("activeImageId")&&!se&&X.filter(e=>e.url).length>0&&e("p",{className:"mt-1 text-xs text-amber-600",children:"Chưa chọn hình ảnh đang được hỏi"})]}),r("div",{className:"space-y-2",children:[r(c,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(N,{className:"h-4 w-4 text-indigo-500"}),"Audio câu hỏi"]}),e(V,{id:"question-audio",label:"",accept:"audio/*",value:ae,onChange:e=>ee.setValue("audioUrl",e,{shouldValidate:!0,shouldDirty:!0}),maxSize:20,placeholder:"Tải lên file âm thanh (mp3, wav...)",autoUpload:!0,prefix:"questions/audio"}),ee.hasError("audioUrl")&&e("p",{className:"text-sm text-red-600",children:ee.getFieldError("audioUrl")}),oe&&e("audio",{controls:!0,className:"mt-2 w-full",src:oe,children:"Trình duyệt không hỗ trợ audio."})]}),R&&R.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:R.map((r,t)=>e("li",{children:r},t))})]})})]})]}),r(n,{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(d,{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(I,{className:"h-4 w-4 text-white"})}),e("div",{children:r(o,{className:"text-lg font-semibold text-gray-800",children:["Đáp án mong muốn (",ie.filter(e=>e.trim()).length,")"]})})]}),r(m,{variant:"outline",size:"sm",onClick:()=>{const e=ee.getValues("expectedAnswers");ee.setValue("expectedAnswers",[...e,""],{shouldValidate:!0,shouldDirty:!0})},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50",children:[e(u,{className:"h-4 w-4"}),"Thêm đáp án"]})]})}),r(l,{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(C,{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:[ie.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(h,{value:t||"",onChange:e=>((e,r)=>{const t=[...ie];t[e]=r,ee.setValue("expectedAnswers",t,{shouldValidate:!0,shouldDirty:!0})})(a,e.target.value),placeholder:"Ví dụ: "+(0===a?"A kite":"It is a kite"),className:"border-gray-200 focus:border-green-300 focus:ring-green-200"}),ee.formState.errors?.expectedAnswers?.[a]?.message&&e("p",{className:"mt-1 text-sm text-red-500",children:ee.formState.errors.expectedAnswers[a]?.message})]}),ie.length>1&&e(m,{variant:"ghost",size:"sm",onClick:()=>(e=>{if(ie.length>1){const r=ie.filter((r,t)=>t!==e);ee.setValue("expectedAnswers",r,{shouldValidate:!0,shouldDirty:!0})}})(a),className:"text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity",children:e(p,{className:"h-4 w-4"})})]},a)),ee.formState.errors?.expectedAnswers&&!Array.isArray(ee.formState.errors.expectedAnswers)&&e("p",{className:"text-sm text-red-500",children:ee.formState.errors.expectedAnswers.message})]})]})]}),r(n,{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(d,{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(A,{className:"h-4 w-4 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(o,{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(l,{children:e(g,{value:ne,onChange:e=>ee.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 { useEffect, useMemo, useRef, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Label } from '../../../../components/ui/label';
+import { Button } from '../../../../components/ui/button';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Plus, Trash2, Pencil, Eye, Mic, Volume2, ImageIcon, Image as ImageIcon2, CheckCircle2, MessageSquareText, Info, ListChecks, BookOpen } from 'lucide-react';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { PointsInput } from '../../../../components/ui/points-input';
+// Stores & hooks
+import { useImageQuestionGroup } from '../../_shared/hooks/useImageQuestionGroup';
+import { generateObjectId } from '../../_shared/utils/id-generator';
+// Client component
+import { ListenAndSpeakImageGroupClient } from './ListenAndSpeakImageGroupClient';
+// Validation & Types
+import { listenAndSpeakImageGroupFormSchema } from '../../../../shared/lib/validation/listen-and-speak-image-group.validation';
+import { CreatorGuide } from '../../components/CreatorGuide';
+// ─── Sub-component: Image preview with presigned URL ─────────────────────────
+function ImagePreview({ imageUrl }) {
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    if (!previewUrl)
+        return null;
+    return (_jsx("div", { className: "mt-2 rounded-lg border border-gray-200 overflow-hidden", children: _jsx("img", { src: previewUrl, alt: "Preview", className: "h-24 w-full object-contain bg-gray-50" }) }));
+}
+// ─── Sub-component: Inline image preview (for active image selection) ────────
+function ImagePreviewInline({ imageUrl }) {
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    if (!previewUrl) {
+        return (_jsx("div", { className: "flex h-16 w-full items-center justify-center rounded-lg bg-gray-100", children: _jsx(ImageIcon2, { className: "h-6 w-6 text-gray-300" }) }));
+    }
+    return (_jsx("img", { src: previewUrl, alt: "Preview", className: "h-16 w-full rounded-lg object-contain bg-gray-50" }));
+}
+export function ListenAndSpeakImageGroupCreator({ initialData, onSave, onCancel, onChange, externalErrors, onUnsavedChangesChange, validationRef, groups, questionIndexInPart, partId, }) {
+    // 1. Group level data (Shared images)
+    const { isGrouped, currentGroupNumber, images, setImages } = useImageQuestionGroup({
+        partId,
+        groups,
+        questionIndexInPart,
+        initialData: {
+            images: initialData?.groupImages || [],
+        },
+    });
+    const isFirstInGroup = useMemo(() => {
+        if (!groups || !groups.length || questionIndexInPart === undefined)
+            return true;
+        let cumulative = 0;
+        for (const group of groups) {
+            if (questionIndexInPart === cumulative)
+                return true;
+            cumulative += group.questionCount;
+        }
+        return false;
+    }, [groups, questionIndexInPart]);
+    // 2. Question level form data (Audio, ActiveImageId, ExpectedAnswers)
+    const apiData = initialData;
+    const form = useReactHookForm({
+        zodSchema: listenAndSpeakImageGroupFormSchema,
+        defaultValues: {
+            audioUrl: apiData?.audioUrl || '',
+            expectedAnswers: apiData?.expectedAnswers?.length > 0 ? apiData.expectedAnswers : [''],
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 1,
+            activeImageId: apiData?.activeImageId || '',
+            isBackup: apiData?.isBackup || false,
+        },
+        mode: 'onBlur',
+    });
+    const [isClientMode, setIsClientMode] = useState(false);
+    const watchedAudioUrl = form.watch('audioUrl');
+    const watchedExpectedAnswers = form.watch('expectedAnswers');
+    const watchedActiveImageId = form.watch('activeImageId');
+    const watchedExplanation = form.watch('explanation');
+    const watchedPoints = form.watch('points');
+    const watchedIsBackup = form.watch('isBackup');
+    // Presigned URL for audio playback
+    const { previewUrl: audioPreviewUrl } = usePresignedFileUrl(watchedAudioUrl || '');
+    // ---------------------------------------------------------------
+    // Refs to prevent infinite loops (following ListenAndSpeakAnswerCreator pattern)
+    // ---------------------------------------------------------------
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    // Keep onChange ref up to date without triggering re-renders
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Debounced onChange that uses the ref (avoids stale closure & dependency issues)
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // ---------------------------------------------------------------
+    // Connect to external validation trigger
+    // ---------------------------------------------------------------
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return await form.trigger();
+                },
+                getFormData: () => ({
+                    audioUrl: watchedAudioUrl,
+                    expectedAnswers: watchedExpectedAnswers,
+                    explanation: watchedExplanation,
+                    points: watchedPoints,
+                    activeImageId: watchedActiveImageId,
+                    isBackup: watchedIsBackup,
+                    groupImages: images,
+                    groupNumber: isGrouped ? currentGroupNumber : undefined,
+                }),
+            };
+        }
+    }, [validationRef, form, watchedAudioUrl, watchedExpectedAnswers, watchedExplanation, watchedPoints, watchedActiveImageId, watchedIsBackup, images, isGrouped, currentGroupNumber]);
+    // ---------------------------------------------------------------
+    // Sync form values if initialData props change
+    // ---------------------------------------------------------------
+    useEffect(() => {
+        const normalizedInitialData = {
+            audioUrl: apiData?.audioUrl || '',
+            expectedAnswers: apiData?.expectedAnswers?.length > 0 ? apiData.expectedAnswers : [''],
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 1,
+            activeImageId: apiData?.activeImageId || '',
+            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,
+            activeImageId: watchedActiveImageId,
+            isBackup: watchedIsBackup,
+        };
+        // Detect if the new initialData is just an echo of what we already sent via onChange
+        const isEchoFromOnChange = currentFormData.points === normalizedInitialData.points &&
+            currentFormData.explanation === normalizedInitialData.explanation &&
+            currentFormData.audioUrl === normalizedInitialData.audioUrl &&
+            currentFormData.activeImageId === normalizedInitialData.activeImageId &&
+            JSON.stringify(currentFormData.expectedAnswers) === JSON.stringify(normalizedInitialData.expectedAnswers);
+        const wasJustSaved = initialData?.isCompleted === true;
+        if (isEchoFromOnChange && wasJustSaved) {
+            return;
+        }
+        // Only reset if the incoming data is genuinely different from current form
+        const shouldReset = !isEchoFromOnChange &&
+            (normalizedInitialData.audioUrl !== currentFormData.audioUrl ||
+                normalizedInitialData.activeImageId !== currentFormData.activeImageId ||
+                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, watchedActiveImageId, watchedIsBackup]);
+    // ---------------------------------------------------------------
+    // Fire onChange when form values change
+    // ---------------------------------------------------------------
+    const watchedExpectedAnswersString = JSON.stringify(watchedExpectedAnswers);
+    const imagesString = JSON.stringify(images);
+    useEffect(() => {
+        // Skip onChange during form reset (initialization)
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                audioUrl: watchedAudioUrl,
+                expectedAnswers: watchedExpectedAnswers,
+                explanation: watchedExplanation,
+                points: watchedPoints,
+                activeImageId: watchedActiveImageId,
+                isBackup: watchedIsBackup,
+                groupImages: images,
+                groupNumber: isGrouped ? currentGroupNumber : undefined,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            audioUrl: watchedAudioUrl,
+            expectedAnswers: watchedExpectedAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+            activeImageId: watchedActiveImageId,
+            isBackup: watchedIsBackup,
+            groupImages: images,
+            groupNumber: isGrouped ? currentGroupNumber : undefined,
+        };
+        const payloadString = JSON.stringify(payload);
+        // Only fire onChange if data actually changed (deduplication)
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedAudioUrl,
+        watchedExpectedAnswersString,
+        watchedExplanation,
+        watchedPoints,
+        watchedActiveImageId,
+        watchedIsBackup,
+        imagesString,
+        debouncedOnChange,
+    ]);
+    // Track unsaved changes
+    useEffect(() => {
+        if (onUnsavedChangesChange) {
+            onUnsavedChangesChange(form.formState.isDirty);
+        }
+    }, [form.formState.isDirty, onUnsavedChangesChange]);
+    // ---------------------------------------------------------------
+    // Handlers
+    // ---------------------------------------------------------------
+    const addExpectedAnswer = () => {
+        const currentAnswers = form.getValues('expectedAnswers');
+        form.setValue('expectedAnswers', [...currentAnswers, ''], { shouldValidate: true, shouldDirty: true });
+    };
+    const updateExpectedAnswer = (index, value) => {
+        const newAnswers = [...watchedExpectedAnswers];
+        newAnswers[index] = value;
+        form.setValue('expectedAnswers', newAnswers, { shouldValidate: true, shouldDirty: true });
+    };
+    const removeExpectedAnswer = (index) => {
+        if (watchedExpectedAnswers.length > 1) {
+            const newAnswers = watchedExpectedAnswers.filter((_, i) => i !== index);
+            form.setValue('expectedAnswers', newAnswers, { shouldValidate: true, shouldDirty: true });
+        }
+    };
+    const handleAddImage = () => {
+        setImages([...images, { id: generateObjectId(), url: '', label: String(images.length + 1) }]);
+    };
+    const handleRemoveImage = (index) => {
+        setImages(images.filter((_, i) => i !== index));
+        // Reset activeImageId if the removed image was selected
+        if (images[index].id === watchedActiveImageId) {
+            form.setValue('activeImageId', '', { shouldValidate: true, shouldDirty: true });
+        }
+    };
+    const handleUpdateImage = (index, field, value) => {
+        const newImages = [...images];
+        newImages[index] = { ...newImages[index], [field]: value };
+        setImages(newImages);
+    };
+    // ─── Client Mode Preview ──────────────────────────────────────────────────
+    if (isClientMode) {
+        const questionData = {
+            audioUrl: watchedAudioUrl,
+            expectedAnswers: watchedExpectedAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+            activeImageId: watchedActiveImageId,
+            isBackup: watchedIsBackup,
+            groupImages: images,
+            groupNumber: isGrouped ? currentGroupNumber : undefined,
+        };
+        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 theo nh\u00F3m \u1EA3nh (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(ListenAndSpeakImageGroupClient, { questionData: questionData, isReviewMode: true })] }));
+    }
+    // ─── Creator UI ────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "emerald", steps: [
+                    { text: 'Thêm hình ảnh vào nhóm — mỗi hình cần có URL và nhãn mô tả' },
+                    { text: 'Hình ảnh dùng chung cho tất cả câu hỏi trong nhóm (câu hỏi đầu tiên sẽ quản lý)' },
+                    { text: 'Upload audio câu hỏi cho từng câu — giám khảo sẽ hỏi về từng hình' },
+                    { text: 'Chọn hình ảnh đang được hỏi (active image) cho mỗi câu', highlight: true },
+                    { text: 'Nhập các đáp án mong muốn và giải thích' },
+                ], tips: ['Sắp xếp hình ảnh theo thứ tự logic, gắn nhãn rõ ràng'] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-emerald-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-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-emerald-500 to-teal-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-emerald-100 px-3 py-1 text-sm font-medium text-emerald-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-emerald-200 text-emerald-600 hover:bg-emerald-50 hover:text-emerald-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-emerald-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-emerald-400 to-teal-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-emerald-100", children: _jsx(ImageIcon2, { className: "h-3.5 w-3.5 text-emerald-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Nh\u00F3m H\u00ECnh \u1EA2nh" })] }), images.length < 4 && (_jsxs(Button, { variant: "outline", size: "sm", onClick: handleAddImage, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm h\u00ECnh \u1EA3nh"] }))] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: images.map((img, index) => (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white text-sm font-bold shadow-sm", children: String.fromCharCode(65 + index) }), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["H\u00ECnh \u1EA3nh ", String.fromCharCode(65 + index)] })] }), images.length > 1 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleRemoveImage(index), className: "h-7 w-7 p-0 text-red-500 hover:text-red-700 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }), _jsx(FileUpload, { id: `group-img-${img.id}`, label: "", accept: "image/*", value: img.url, onChange: (url) => handleUpdateImage(index, 'url', url), maxSize: 5, placeholder: "Upload h\u00ECnh \u1EA3nh", autoUpload: true, prefix: "questions/images" }), img.url && _jsx(ImagePreview, { imageUrl: img.url }), _jsxs("div", { className: "mt-3", children: [_jsx(Label, { className: "text-xs font-medium text-gray-600", children: "Nh\u00E3n" }), _jsx(Input, { value: img.label, onChange: (e) => handleUpdateImage(index, 'label', e.target.value), placeholder: "Nh\u1EADp nh\u00E3n / m\u00F4 t\u1EA3 ng\u1EAFn", className: "mt-1 border-gray-200" })] })] }, img.id))) }), images.length === 0 && (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-indigo-300 p-8 bg-indigo-50/50", children: [_jsx(ImageIcon2, { className: "h-10 w-10 text-indigo-400 mb-2" }), _jsx("p", { className: "text-sm text-gray-500 mb-3", children: "Ch\u01B0a c\u00F3 h\u00ECnh \u1EA3nh n\u00E0o" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleAddImage, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm h\u00ECnh \u1EA3nh \u0111\u1EA7u ti\u00EAn"] })] }))] })] }), _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 cho b\u1EE9c \u1EA3nh \u0111\u01B0\u1EE3c ch\u1ECDn" })] })] }) }), _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: "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(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "Ch\u1ECDn h\u00ECnh \u1EA3nh \u0111ang \u0111\u01B0\u1EE3c h\u1ECFi"] }), images.filter((o) => o.url).length > 0 ? (_jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4", children: images.map((img, index) => {
+                                            if (!img.url)
+                                                return null;
+                                            const isSelected = watchedActiveImageId === img.id;
+                                            return (_jsxs("button", { type: "button", onClick: () => {
+                                                    form.setValue('activeImageId', img.id, { shouldValidate: true, shouldDirty: true });
+                                                }, className: `relative text-left rounded-xl border-2 p-2 transition-all ${isSelected
+                                                    ? 'border-indigo-500 bg-indigo-50 ring-2 ring-indigo-200 shadow-md'
+                                                    : 'border-gray-200 hover:border-gray-400 hover:shadow-sm'}`, children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: `flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold shadow-sm ${isSelected
+                                                                    ? 'bg-indigo-500 text-white'
+                                                                    : 'bg-gray-100 text-gray-600'}`, children: String.fromCharCode(65 + index) }), _jsx(ImagePreviewInline, { imageUrl: img.url }), img.label && (_jsx("p", { className: `text-xs text-center ${isSelected ? 'text-indigo-700 font-medium' : 'text-gray-600'}`, children: img.label }))] }), isSelected && (_jsx("div", { className: "absolute top-1 right-1", children: _jsx(CheckCircle2, { className: "h-5 w-5 text-indigo-500" }) }))] }, img.id));
+                                        }) })) : (_jsx("p", { className: "text-sm text-amber-600 italic", children: "Vui l\u00F2ng upload \u1EA3nh cho h\u00ECnh \u1EA3nh \u1EDF ph\u1EA7n tr\u00EAn tr\u01B0\u1EDBc" })), form.hasError('activeImageId') && (_jsx("div", { className: "mt-2 rounded-lg border border-red-200 bg-red-50 p-3", children: _jsxs("p", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", form.getFieldError('activeImageId')] }) })), !form.hasError('activeImageId') && !watchedActiveImageId && images.filter((o) => o.url).length > 0 && (_jsx("p", { className: "mt-1 text-xs text-amber-600", children: "Ch\u01B0a ch\u1ECDn h\u00ECnh \u1EA3nh \u0111ang \u0111\u01B0\u1EE3c h\u1ECFi" }))] }), _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: "question-audio", label: "", accept: "audio/*", value: watchedAudioUrl, onChange: (url) => form.setValue('audioUrl', url, { shouldValidate: true, shouldDirty: true }), maxSize: 20, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "questions/audio" }), 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: addExpectedAnswer, 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) => updateExpectedAnswer(index, e.target.value), placeholder: `Ví dụ: ${index === 0 ? 'A kite' : 'It is a kite'}`, 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: () => removeExpectedAnswer(index), 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-image-group/register.js

@@ -1 +1,81 @@
-import{ListenAndSpeakImageGroupCreator as e}from"./ListenAndSpeakImageGroupCreator";export const listenAndSpeakImageGroupRegistration={component:e,transformInitialData:e=>{const{content:t,answer:a,questionGroup:o,explanation:n,points:s}=e;let p={audioUrl:"",expectedAnswers:[""]};return t&&"object"==typeof t?p={audioUrl:t.audioUrl||"",activeImageId:t.activeImageId||"",expectedAnswers:a?.expectedAnswers||[],groupImages:a?.groupImages||t.groupImages||o?.payload?.images||[],groupNumber:a?.groupNumber||t.groupNumber||o?.groupNumber||1,explanation:n,points:s||1,isBackup:t.isBackup||!1}:a&&"object"==typeof a&&(p={...a,audioUrl:a.audioUrl||t?.audioUrl||"",activeImageId:a.activeImageId||t?.activeImageId||"",groupImages:a.groupImages||t?.groupImages||o?.payload?.images||[],groupNumber:a.groupNumber||t?.groupNumber||o?.groupNumber||1,explanation:n,points:s||1,isBackup:t?.isBackup||!1}),p},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef,groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId}),wrapOnSave:(e,t)=>({type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},audioUrl:e.audioUrl,activeImageId:e.activeImageId,groupImages:e.groupImages,groupNumber:e.groupNumber,isBackup:e.isBackup||!1},points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:e.expectedAnswers},explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},audioUrl:e.audioUrl,activeImageId:e.activeImageId,groupImages:e.groupImages,groupNumber:e.groupNumber,isBackup:e.isBackup||!1},points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:e.expectedAnswers},explanation:e?.explanation||""})};
+import { ListenAndSpeakImageGroupCreator } from './ListenAndSpeakImageGroupCreator';
+export const listenAndSpeakImageGroupRegistration = {
+    component: ListenAndSpeakImageGroupCreator,
+    transformInitialData: (apiData) => {
+        const { content, answer, questionGroup, explanation, points } = apiData;
+        let creatorData = {
+            audioUrl: '',
+            expectedAnswers: [''],
+        };
+        if (content && typeof content === 'object') {
+            creatorData = {
+                audioUrl: content.audioUrl || '',
+                activeImageId: content.activeImageId || '',
+                expectedAnswers: answer?.expectedAnswers || [],
+                groupImages: answer?.groupImages || content.groupImages || questionGroup?.payload?.images || [],
+                groupNumber: answer?.groupNumber || content.groupNumber || questionGroup?.groupNumber || 1,
+                explanation,
+                points: points || 1,
+                isBackup: content.isBackup || false,
+            };
+        }
+        else if (answer && typeof answer === 'object') {
+            creatorData = {
+                ...answer,
+                audioUrl: answer.audioUrl || content?.audioUrl || '',
+                activeImageId: answer.activeImageId || content?.activeImageId || '',
+                groupImages: answer.groupImages || content?.groupImages || questionGroup?.payload?.images || [],
+                groupNumber: answer.groupNumber || content?.groupNumber || questionGroup?.groupNumber || 1,
+                explanation,
+                points: points || 1,
+                isBackup: content?.isBackup || false,
+            };
+        }
+        return creatorData;
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            audioUrl: data.audioUrl,
+            activeImageId: data.activeImageId,
+            groupImages: data.groupImages,
+            groupNumber: data.groupNumber,
+            isBackup: data.isBackup || false,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: {
+            expectedAnswers: data.expectedAnswers,
+        },
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            audioUrl: data.audioUrl,
+            activeImageId: data.activeImageId,
+            groupImages: data.groupImages,
+            groupNumber: data.groupNumber,
+            isBackup: data.isBackup || false,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: {
+            expectedAnswers: data.expectedAnswers,
+        },
+        explanation: data?.explanation || '',
+    }),
+};