@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/types/listen-and-speak-question-list/ListenAndSpeakQuestionListClient.js

@@ -1 +1,26 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Mic as i,Volume2 as t,CheckCircle2 as s,Play as a,Pause as d,ListChecks as n,Info as l}from"lucide-react";import{Button as o}from"../../../../components/ui/button";import{usePresignedFileUrl as c,useAudioPreview as m}from"../../../../shared/lib/hooks";import{cn as h}from"../../../../shared/lib/utils";function g({audioUrl:i}){const{previewUrl:s}=c(i),{isPlaying:n,currentTime:l,duration:h,progressPercentage:g,handlePlayPause:x,handleProgressClick:b,formatTime:u}=m(s);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(o,{variant:"outline",size:"icon",onClick:x,disabled:!s,className:"h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100",children:e(n?d:a,{className:"h-3.5 w-3.5"})}),r("div",{className:"text-muted-foreground min-w-[70px] text-xs",children:[u(l)," / ",u(h)]}),e("div",{className:"bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full",onClick:b,children:e("div",{className:"bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all",style:{width:`${g}%`}})}),e(t,{className:"h-4 w-4 text-indigo-400"})]})}export function ListenAndSpeakQuestionListClient({questionData:a,isReviewMode:d=!1}){const{audioUrl:o,expectedAnswers:c,activeQuestionId:m,questions:x=[],explanation:b}=a;return r("div",{className:"space-y-4",children:[a.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(n,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Nghe và nói (Danh sách câu hỏi)"})]})}),r("div",{className:"p-5 space-y-5",children:[o?e(g,{audioUrl:o}):r("div",{className:"flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3",children:[e(t,{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"})]}),x.length>0?e("div",{className:"rounded-xl border border-gray-100 bg-gradient-to-b from-gray-50/80 to-white p-5 space-y-2.5",children:x.map((i,t)=>{const a=i.id===m;return r("div",{className:h("flex items-center gap-3 rounded-lg px-4 py-3 transition-all duration-200",a?"bg-blue-50 border-[2px] border-blue-300 shadow-sm shadow-blue-100/50":"bg-white border border-gray-200 hover:border-gray-300 hover:shadow-sm"),children:[e("div",{className:h("flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-xs font-bold shadow-sm",a?"bg-blue-500 text-white":"bg-gray-100 text-gray-500 border border-gray-200"),children:t+1}),e("span",{className:h("text-sm font-medium flex-1",a?"text-blue-800":"text-gray-700"),children:i.text||e("span",{className:"italic text-gray-400",children:"(Chưa nhập nội dung)"})}),a&&r("div",{className:"flex items-center gap-1.5",children:[e("span",{className:"text-[10px] font-medium text-blue-500 animate-pulse",children:"Đang hỏi"}),e(s,{className:"h-4 w-4 text-blue-500"})]})]},i.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(n,{className:"h-12 w-12 text-gray-300 mb-3"}),e("p",{className:"text-sm font-medium text-gray-500",children:"Chưa có câu hỏi nào"}),e("p",{className:"text-xs text-gray-400 mt-1",children:"Danh sách câu hỏi 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(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"})]}),d&&c&&c.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(s,{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:c.map((i,t)=>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:t+1}),e("span",{className:"text-sm text-green-800",children:i})]},t))})]}),d&&b&&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(l,{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:b})]})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mic, Volume2, CheckCircle2, Play, Pause, ListChecks, 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" })] }));
+}
+// ─── Main Client Component ───────────────────────────────────────────────────
+export function ListenAndSpeakQuestionListClient({ questionData, isReviewMode = false, }) {
+    const { audioUrl, expectedAnswers, activeQuestionId, questions = [], 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(ListChecks, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 n\u00F3i (Danh s\u00E1ch c\u00E2u h\u1ECFi)" })] }) }), _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" })] })), questions.length > 0 ? (_jsx("div", { className: "rounded-xl border border-gray-100 bg-gradient-to-b from-gray-50/80 to-white p-5 space-y-2.5", children: questions.map((q, idx) => {
+                                    const isActive = q.id === activeQuestionId;
+                                    return (_jsxs("div", { className: cn('flex items-center gap-3 rounded-lg px-4 py-3 transition-all duration-200', isActive
+                                            ? 'bg-blue-50 border-[2px] border-blue-300 shadow-sm shadow-blue-100/50'
+                                            : 'bg-white border border-gray-200 hover:border-gray-300 hover:shadow-sm'), children: [_jsx("div", { className: cn('flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-xs font-bold shadow-sm', isActive
+                                                    ? 'bg-blue-500 text-white'
+                                                    : 'bg-gray-100 text-gray-500 border border-gray-200'), children: idx + 1 }), _jsx("span", { className: cn('text-sm font-medium flex-1', isActive ? 'text-blue-800' : 'text-gray-700'), children: q.text || _jsx("span", { className: "italic text-gray-400", children: "(Ch\u01B0a nh\u1EADp n\u1ED9i dung)" }) }), isActive && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-[10px] font-medium text-blue-500 animate-pulse", children: "\u0110ang h\u1ECFi" }), _jsx(CheckCircle2, { className: "h-4 w-4 text-blue-500" })] }))] }, q.id));
+                                }) })) : (
+                            /* Empty state */
+                            _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(ListChecks, { 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 c\u00E2u h\u1ECFi n\u00E0o" }), _jsx("p", { className: "text-xs text-gray-400 mt-1", children: "Danh s\u00E1ch c\u00E2u h\u1ECFi 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 && 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-question-list/ListenAndSpeakQuestionListCreator.js

@@ -1 +1,256 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useEffect as i,useMemo as n,useRef as r,useState as s}from"react";import{Card as a,CardContent as l,CardHeader as c,CardTitle as o}from"../../../../components/ui/card";import{Label as d}from"../../../../components/ui/label";import{Button as h}from"../../../../components/ui/button";import{Input as m}from"../../../../components/ui/input";import{Textarea as u}from"../../../../components/ui/textarea";import{Form as g,FormControl as p,FormField as x,FormItem as f,FormMessage as b}from"../../../../components/ui/form";import{Select as N,SelectContent as v,SelectItem as w,SelectTrigger as y,SelectValue as k}from"../../../../components/ui/select";import{FileUpload as C}from"../../../../components/ui/file-upload";import{PointsInput as A}from"../../../../components/ui/points-input";import{useQuestionListGroup as I}from"../../_shared/hooks/useQuestionListGroup";import{generateObjectId as Q}from"../../_shared/utils/id-generator";import{ListenAndSpeakQuestionListClient as S}from"./ListenAndSpeakQuestionListClient";import{listenAndSpeakQuestionListFormSchema as j}from"../../../../shared/lib/validation/listen-and-speak-question-list.validation";import{Plus as U,Trash2 as q,Mic as D,Volume2 as V,ListChecks as B,MessageSquareText as J,Info as O,BookOpen as z,Eye as T,Pencil as G}from"lucide-react";import{useReactHookForm as H}from"../../../../shared/lib/hooks/useReactHookForm";import{useDebouncedCallback as L}from"../../../../shared/lib/hooks/useDebouncedCallback";import{CreatorGuide as P}from"../../components/CreatorGuide";export function ListenAndSpeakQuestionListCreator({questionIndex:F,initialData:M,onChange:R,validationRef:X,isFirstInGroup:$,partId:E,groups:_,questionIndexInPart:K}){const[W,Y]=s(!1),Z=Boolean(_&&_.length>0),ee=n(()=>{if(void 0!==$)return $;if(!_||!_.length||void 0===K)return!0;let e=0;for(const t of _){if(K===e)return!0;e+=t.questionCount}return!1},[$,_,K]),{questions:te,setQuestions:ie,currentGroupNumber:ne}=I({partId:E,groups:_,questionIndexInPart:K,initialData:M?.groupQuestions?{questions:M.groupQuestions}:void 0}),re=M,se=H({zodSchema:j,defaultValues:{audioUrl:re?.audioUrl||"",expectedAnswers:re?.expectedAnswers?.length>0?re.expectedAnswers:[""],activeQuestionId:re?.activeQuestionId||void 0,points:re?.points??1,explanation:re?.explanation||"",isBackup:re?.isBackup||!1}}),{control:ae,watch:le,setValue:ce,trigger:oe,clearErrors:de}=se,he=le("audioUrl"),me=le("activeQuestionId"),ue=le("expectedAnswers"),ge=le("points"),pe=le("explanation"),xe=le("isBackup"),fe=r(M),be=r(!1),Ne=r(R),ve=r("");i(()=>{Ne.current=R},[R]);const we=L(e=>{Ne.current?.(e)},300);i(()=>{const e={audioUrl:re?.audioUrl||"",expectedAnswers:re?.expectedAnswers?.length>0?re.expectedAnswers:[""],activeQuestionId:re?.activeQuestionId||void 0,points:re?.points??1,explanation:re?.explanation||"",isBackup:re?.isBackup||!1};if(!(JSON.stringify(fe.current)!==JSON.stringify(M)))return;fe.current=M;const t={audioUrl:he,expectedAnswers:ue,activeQuestionId:me,points:ge,explanation:pe,isBackup:xe},i=t.points===e.points&&t.explanation===e.explanation&&t.audioUrl===e.audioUrl&&t.activeQuestionId===e.activeQuestionId&&JSON.stringify(t.expectedAnswers)===JSON.stringify(e.expectedAnswers);if(i&&!0===M?.isCompleted)return;!i&&(e.audioUrl!==t.audioUrl||e.activeQuestionId!==t.activeQuestionId||JSON.stringify(e.expectedAnswers)!==JSON.stringify(t.expectedAnswers))&&(be.current=!0,se.reset(e),setTimeout(()=>{be.current=!1},150))},[M,se,he,ue,pe,ge,me,xe]);const ye=JSON.stringify(ue);i(()=>{if(be.current){const e=JSON.stringify({audioUrl:he,activeQuestionId:me,expectedAnswers:ue,points:ge,explanation:pe,isBackup:xe,questions:te,groupNumber:Z?ne:void 0});return void(ve.current=e)}const e={audioUrl:he,activeQuestionId:me,expectedAnswers:ue,points:ge,explanation:pe,isBackup:xe,questions:te,groupNumber:Z?ne:void 0},t=JSON.stringify(e);ve.current!==t&&(ve.current=t,we(e))},[he,me,ye,ge,pe,xe,te,Z,ne,we]),i(()=>{X&&(X.current={triggerValidation:async()=>{const e=await oe();let t=!0;return Z&&ee&&(t=te.length>0&&te.every(e=>e.text.trim().length>0)),e&&t},getFormData:()=>({...se.getValues(),questions:te,groupNumber:Z?ne:void 0})})},[oe,X,ee,te,Z,ne,se]);const ke="number"!=typeof F||isNaN(F)?"number"!=typeof K||isNaN(K)?"?":K+1:F+1;if(W){const i={audioUrl:he,expectedAnswers:ue,explanation:pe,points:ge,activeQuestionId:me,isBackup:xe,questions:te,groupNumber:Z?ne:void 0};return t("div",{className:"space-y-6",children:[e(a,{children:e(c,{children:t("div",{className:"flex items-center justify-between",children:[t("div",{children:[e(o,{children:"Nghe & Trả lời theo danh sách câu hỏi (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước"})]}),t(h,{variant:"outline",size:"sm",onClick:()=>Y(!1),children:[e(G,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(S,{questionData:i,isReviewMode:!0})]})}return t("div",{className:"space-y-6",children:[e(P,{colorScheme:"blue",steps:[{text:"Nhập danh sách câu hỏi cho nhóm — câu hỏi đầu tiên sẽ quản lý danh sách chung"},{text:"Upload audio câu hỏi cho từng câu trong nhóm"},{text:"Chọn câu hỏi đang active (active question) tương ứng với câu đang hỏi",highlight:!0},{text:"Nhập các đáp án mong muốn cho mỗi câu"},{text:"Thêm giải thích nếu cần thiết"}],tips:["Câu hỏi nên ngắn gọn, rõ ràng và phù hợp với trình độ học sinh"]}),t(a,{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-500 via-indigo-500 to-purple-500"}),e(c,{className:"pb-4",children:t("div",{className:"flex items-center justify-between",children:[t("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-blue-500 to-indigo-600 shadow-sm",children:e(B,{className:"h-4 w-4 text-white"})}),t("div",{children:[e(o,{className:"text-lg font-bold text-gray-900",children:"Nhóm đáp án"}),t("p",{className:"text-sm text-gray-500",children:["Nhóm ",ne," — Dùng chung cho tất cả câu hỏi"]})]})]}),t(h,{type:"button",variant:"outline",size:"sm",onClick:()=>Y(!0),disabled:!he||0===ue.filter(e=>e.trim()).length,className:"gap-2 border-blue-200 text-blue-600 hover:bg-blue-50 disabled:opacity-50",children:[e(T,{className:"h-4 w-4"}),"Preview"]})]})})]}),t(a,ee?{className:"overflow-hidden border-0 bg-white shadow-lg shadow-cyan-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-cyan-400 to-sky-400"}),e(c,{className:"pb-4",children:t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-cyan-100",children:e(B,{className:"h-3.5 w-3.5 text-cyan-600"})}),t("div",{className:"flex-1",children:[t("div",{className:"flex items-center gap-2",children:[e(o,{className:"text-lg font-bold text-gray-900",children:"Danh sách câu hỏi"}),t("span",{className:"inline-flex items-center rounded-full border border-indigo-300 bg-indigo-100 px-2.5 py-0.5 text-xs font-semibold text-indigo-700",children:["Nhóm ",ne]})]}),e("p",{className:"text-sm text-gray-500",children:"Dùng chung cho tất cả câu hỏi trong nhóm — Thêm các câu hỏi text để học sinh chọn và trả lời"})]})]})}),t(l,{className:"space-y-4",children:[e("div",{className:"space-y-3",children:te.map((i,n)=>t("div",{className:"flex gap-3 items-center",children:[e("div",{className:"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700 font-semibold text-sm shadow-sm",children:n+1}),e(m,{value:i.text,onChange:e=>((e,t)=>{const i=[...te];i[e]={...i[e],text:t},ie(i)})(n,e.target.value),placeholder:"VD: Now, how old are you?",className:"flex-1 border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200"}),e(h,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{const t=te.filter((t,i)=>i!==e);ie(t),me&&!t.find(e=>e.id===me)&&ce("activeQuestionId","",{shouldValidate:!0,shouldDirty:!0})})(n),className:"shrink-0 text-gray-400 hover:text-red-600 hover:bg-red-50","aria-label":`Xóa câu hỏi ${n+1}`,children:e(q,{className:"h-4 w-4"})})]},i.id))}),0===te.length&&t("div",{className:"flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-indigo-200 bg-indigo-50/50 py-8 px-4 text-center",children:[e("div",{className:"flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 mb-3",children:e(B,{className:"h-6 w-6 text-indigo-500"})}),e("p",{className:"text-sm font-medium text-gray-700",children:"Chưa có câu hỏi nào"}),e("p",{className:"text-xs text-gray-500 mt-1",children:"Vui lòng thêm ít nhất một câu hỏi cho nhóm này"})]}),t(h,{type:"button",variant:"outline",onClick:()=>{ie([...te,{id:Q(),text:""}])},className:"w-full gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:border-indigo-300",children:[e(U,{className:"h-4 w-4"}),"Thêm câu hỏi"]})]})]}:{className:"overflow-hidden border-0 bg-white shadow shadow-indigo-100/30",children:[e("div",{className:"h-1 bg-gradient-to-r from-indigo-400 via-blue-400 to-cyan-400"}),e(c,{className:"pb-3",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-100 shadow-sm",children:e(B,{className:"h-4 w-4 text-indigo-600"})}),t("div",{className:"flex-1",children:[t("div",{className:"flex items-center gap-2",children:[e(o,{className:"text-base font-semibold text-gray-800",children:"Danh sách câu hỏi"}),t("span",{className:"inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500",children:["Nhóm ",ne," — Chỉ đọc"]})]}),e("p",{className:"text-xs text-gray-400 mt-0.5",children:"Được quản lý bởi câu hỏi đầu tiên trong nhóm"})]})]})}),e(l,{className:"pt-0",children:te.length>0?e("div",{className:"space-y-2",children:te.map((i,n)=>t("div",{className:"flex gap-2.5 items-center px-3 py-2 rounded-lg bg-gray-50 border border-gray-100",children:[e("div",{className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md bg-indigo-50 text-indigo-600 font-semibold text-xs",children:n+1}),e("span",{className:"text-sm text-gray-700",children:i.text||e("span",{className:"italic text-gray-400",children:"(Chưa nhập nội dung)"})})]},i.id))}):e("div",{className:"text-center py-4 text-sm text-gray-400 italic",children:"Chưa có câu hỏi nào trong nhóm"})})]}),t(g,{...se,children:[t(a,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"}),e(c,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm",children:e(D,{className:"h-4 w-4 text-white"})}),t("div",{children:[e(o,{className:"text-lg font-bold text-gray-900",children:"Câu hỏi Nghe & Trả lời"}),e("p",{className:"text-sm text-gray-500",children:"Học sinh nghe âm thanh và nói câu trả lời"})]})]})}),t(l,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:e("div",{className:"flex flex-col gap-4",children:e("div",{className:"w-full md:w-1/2",children:e(A,{...se.register("points",{valueAsNumber:!0}),error:se.formState.errors?.points?.message})})})}),t("div",{className:"space-y-2",children:[t(d,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(J,{className:"h-4 w-4 text-indigo-500"}),"Câu hỏi được hỏi trong audio ",e("span",{className:"text-red-500",children:"*"})]}),t("div",{className:"flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5",children:[e(O,{className:"h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"}),t("div",{className:"text-xs text-blue-700 space-y-1",children:[e("p",{children:"Chọn câu hỏi mà học sinh sẽ nghe trong đoạn audio này."}),t("p",{children:[e("span",{className:"font-semibold",children:"• Mỗi audio tương ứng một câu hỏi:"})," Xác định câu hỏi nào từ danh sách đang được hỏi trong audio."]}),t("p",{children:[e("span",{className:"font-semibold",children:"• Hiển thị cho học sinh:"})," Học sinh sẽ thấy danh sách câu hỏi và cần chọn đúng câu hỏi khớp với audio để trả lời."]})]})]}),e(x,{control:ae,name:"activeQuestionId",render:({field:i})=>t(f,{children:[t(N,{value:i.value||"",onValueChange:i.onChange,children:[e(p,{children:e(y,{className:"w-full bg-white border-gray-200 transition-all focus:border-indigo-300 focus:ring-indigo-200",children:e(k,{placeholder:"Chọn câu hỏi từ danh sách"})})}),t(v,{children:[te.map((e,i)=>t(w,{value:e.id,children:[i+1,". ",e.text||"(Chưa nhập nội dung)"]},e.id)),0===te.length&&e("div",{className:"p-3 text-sm text-gray-500 italic text-center",children:"Vui lòng tạo câu hỏi ở nhóm trên trước"})]})]}),e(b,{})]})})]}),t("div",{className:"space-y-2",children:[t(d,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(V,{className:"h-4 w-4 text-indigo-500"}),"Âm thanh câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(x,{control:ae,name:"audioUrl",render:({field:i})=>t(f,{children:[e(p,{children:e(C,{id:`audio-question-${ke}`,label:"",accept:"audio/*",value:i.value,onChange:e=>{i.onChange(e),de("audioUrl")},maxSize:10,placeholder:"Tải lên file âm thanh (mp3, wav...)",autoUpload:!0,prefix:"listen-and-speak"})}),e(b,{})]})})]})]})]}),t(a,{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(c,{className:"pb-4",children:t("div",{className:"flex items-center justify-between",children:[t("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(J,{className:"h-4 w-4 text-white"})}),e("div",{children:t(o,{className:"text-lg font-semibold text-gray-800",children:["Đáp án mong muốn (",ue.filter(e=>e.trim()).length,")"]})})]}),t(h,{type:"button",variant:"outline",size:"sm",onClick:()=>{ce("expectedAnswers",[...ue,""],{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"]})]})}),t(l,{className:"space-y-4",children:[t("div",{className:"flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5",children:[e(O,{className:"h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"}),t("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."}),t("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."]}),t("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."]})]})]}),e(x,{control:ae,name:"expectedAnswers",render:()=>t(f,{children:[e("div",{className:"space-y-3",children:ue.map((i,n)=>t("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:n+1}),t("div",{className:"flex-1",children:[e(m,{placeholder:"Ví dụ: "+(0===n?"I am doing well":"I feel great"),value:i||"",onChange:e=>((e,t)=>{const i=[...ue];i[e]=t,ce("expectedAnswers",i,{shouldValidate:!0,shouldDirty:!0})})(n,e.target.value),className:"border-gray-200 focus:border-green-300 focus:ring-green-200"}),se.formState.errors?.expectedAnswers?.[n]?.message&&e("p",{className:"mt-1 text-sm text-red-500",children:se.formState.errors.expectedAnswers[n]?.message})]}),ue.length>1&&e(h,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{if(ue.length>1){const t=ue.filter((t,i)=>i!==e);ce("expectedAnswers",t,{shouldValidate:!0,shouldDirty:!0})}})(n),className:"text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity","aria-label":`Xóa đáp án ${n+1}`,children:e(q,{className:"h-4 w-4"})})]},n))}),se.formState.errors?.expectedAnswers&&!Array.isArray(se.formState.errors.expectedAnswers)&&e("p",{className:"text-sm text-red-500",children:se.formState.errors.expectedAnswers.message})]})})]})]}),t(a,{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(c,{className:"pb-4",children:t("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(z,{className:"h-4 w-4 text-white"})}),t("div",{children:[t("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(u,{...se.register("explanation"),placeholder:"VD: Câu trả lời đúng là 'I am 7 years old' vì câu hỏi hỏi về tuổi...",className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none",rows:3})})]})]})]})}
+'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 { Form, FormControl, FormField, FormItem, FormMessage } from '../../../../components/ui/form';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../components/ui/select';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { PointsInput } from '../../../../components/ui/points-input';
+// Stores & hooks
+import { useQuestionListGroup } from '../../_shared/hooks/useQuestionListGroup';
+import { generateObjectId } from '../../_shared/utils/id-generator';
+// Client component
+import { ListenAndSpeakQuestionListClient } from './ListenAndSpeakQuestionListClient';
+import { listenAndSpeakQuestionListFormSchema } from '../../../../shared/lib/validation/listen-and-speak-question-list.validation';
+// Utilities & Icons
+import { Plus, Trash2, Mic, Volume2, ListChecks, MessageSquareText, Info, BookOpen, Eye, Pencil } from 'lucide-react';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { useDebouncedCallback } from '../../../../shared/lib/hooks/useDebouncedCallback';
+import { CreatorGuide } from '../../components/CreatorGuide';
+export function ListenAndSpeakQuestionListCreator({ questionIndex, initialData, onChange, validationRef, isFirstInGroup: isFirstInGroupProp, partId, groups, questionIndexInPart, }) {
+    const [isClientMode, setIsClientMode] = useState(false);
+    const isGrouped = Boolean(groups && groups.length > 0);
+    const isFirstInGroup = useMemo(() => {
+        if (isFirstInGroupProp !== undefined)
+            return isFirstInGroupProp;
+        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;
+    }, [isFirstInGroupProp, groups, questionIndexInPart]);
+    // 1. Group level state (Questions list)
+    const { questions, setQuestions, currentGroupNumber } = useQuestionListGroup({
+        partId,
+        groups,
+        questionIndexInPart,
+        initialData: initialData?.groupQuestions ? { questions: initialData.groupQuestions } : undefined,
+    });
+    // Cast initialData to access extra fields from register transformInitialData
+    const apiData = initialData;
+    // 2. Question level form data (Audio, ActiveQuestionId, ExpectedAnswers, Points, Explanation)
+    const form = useReactHookForm({
+        zodSchema: listenAndSpeakQuestionListFormSchema,
+        defaultValues: {
+            audioUrl: apiData?.audioUrl || '',
+            expectedAnswers: apiData?.expectedAnswers?.length > 0 ? apiData.expectedAnswers : [''],
+            activeQuestionId: apiData?.activeQuestionId || undefined,
+            points: apiData?.points ?? 1,
+            explanation: apiData?.explanation || '',
+            isBackup: apiData?.isBackup || false,
+        },
+    });
+    const { control, watch, setValue, trigger, clearErrors } = form;
+    const watchedAudioUrl = watch('audioUrl');
+    const watchedActiveQuestionId = watch('activeQuestionId');
+    const watchedExpectedAnswers = watch('expectedAnswers');
+    const watchedPoints = watch('points');
+    const watchedExplanation = watch('explanation');
+    const watchedIsBackup = watch('isBackup');
+    // ---------------------------------------------------------------
+    // Refs to prevent infinite loops
+    // ---------------------------------------------------------------
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Notify parent onChange
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // ---------------------------------------------------------------
+    // Sync form values if initialData props change
+    // ---------------------------------------------------------------
+    useEffect(() => {
+        const normalizedInitialData = {
+            audioUrl: apiData?.audioUrl || '',
+            expectedAnswers: apiData?.expectedAnswers?.length > 0 ? apiData.expectedAnswers : [''],
+            activeQuestionId: apiData?.activeQuestionId || undefined,
+            points: apiData?.points ?? 1,
+            explanation: apiData?.explanation || '',
+            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,
+            activeQuestionId: watchedActiveQuestionId,
+            points: watchedPoints,
+            explanation: watchedExplanation,
+            isBackup: watchedIsBackup,
+        };
+        const isEchoFromOnChange = currentFormData.points === normalizedInitialData.points &&
+            currentFormData.explanation === normalizedInitialData.explanation &&
+            currentFormData.audioUrl === normalizedInitialData.audioUrl &&
+            currentFormData.activeQuestionId === normalizedInitialData.activeQuestionId &&
+            JSON.stringify(currentFormData.expectedAnswers) === JSON.stringify(normalizedInitialData.expectedAnswers);
+        const wasJustSaved = initialData?.isCompleted === true;
+        if (isEchoFromOnChange && wasJustSaved)
+            return;
+        const shouldReset = !isEchoFromOnChange &&
+            (normalizedInitialData.audioUrl !== currentFormData.audioUrl ||
+                normalizedInitialData.activeQuestionId !== currentFormData.activeQuestionId ||
+                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, watchedActiveQuestionId, watchedIsBackup]);
+    // ---------------------------------------------------------------
+    // Fire onChange when form values change
+    // ---------------------------------------------------------------
+    const watchedExpectedAnswersString = JSON.stringify(watchedExpectedAnswers);
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                audioUrl: watchedAudioUrl,
+                activeQuestionId: watchedActiveQuestionId,
+                expectedAnswers: watchedExpectedAnswers,
+                points: watchedPoints,
+                explanation: watchedExplanation,
+                isBackup: watchedIsBackup,
+                questions,
+                groupNumber: isGrouped ? currentGroupNumber : undefined,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            audioUrl: watchedAudioUrl,
+            activeQuestionId: watchedActiveQuestionId,
+            expectedAnswers: watchedExpectedAnswers,
+            points: watchedPoints,
+            explanation: watchedExplanation,
+            isBackup: watchedIsBackup,
+            questions,
+            groupNumber: isGrouped ? currentGroupNumber : undefined,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedAudioUrl,
+        watchedActiveQuestionId,
+        watchedExpectedAnswersString,
+        watchedPoints,
+        watchedExplanation,
+        watchedIsBackup,
+        questions,
+        isGrouped,
+        currentGroupNumber,
+        debouncedOnChange,
+    ]);
+    // Add validation ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    const isQuestionValid = await trigger();
+                    let isGroupValid = true;
+                    if (isGrouped && isFirstInGroup) {
+                        isGroupValid = questions.length > 0 && questions.every(q => q.text.trim().length > 0);
+                    }
+                    return isQuestionValid && isGroupValid;
+                },
+                getFormData: () => ({
+                    ...form.getValues(),
+                    questions,
+                    groupNumber: isGrouped ? currentGroupNumber : undefined,
+                }),
+            };
+        }
+    }, [trigger, validationRef, isFirstInGroup, questions, isGrouped, currentGroupNumber, form]);
+    // Handlers for Group Questions List
+    const handleAddListQuestion = () => {
+        setQuestions([
+            ...questions,
+            { id: generateObjectId(), text: '' }
+        ]);
+    };
+    const handleRemoveListQuestion = (index) => {
+        const newQuestions = questions.filter((_, i) => i !== index);
+        setQuestions(newQuestions);
+        if (watchedActiveQuestionId && !newQuestions.find(q => q.id === watchedActiveQuestionId)) {
+            setValue('activeQuestionId', '', { shouldValidate: true, shouldDirty: true });
+        }
+    };
+    const handleUpdateListQuestion = (index, text) => {
+        const newQuestions = [...questions];
+        newQuestions[index] = { ...newQuestions[index], text };
+        setQuestions(newQuestions);
+    };
+    // Handlers for Expected Answers
+    const addExpectedAnswer = () => {
+        setValue('expectedAnswers', [...watchedExpectedAnswers, ''], { shouldValidate: true, shouldDirty: true });
+    };
+    const handleExpectedAnswerChange = (index, value) => {
+        const newAnswers = [...watchedExpectedAnswers];
+        newAnswers[index] = value;
+        setValue('expectedAnswers', newAnswers, { shouldValidate: true, shouldDirty: true });
+    };
+    const removeExpectedAnswer = (index) => {
+        if (watchedExpectedAnswers.length > 1) {
+            const newAnswers = watchedExpectedAnswers.filter((_, i) => i !== index);
+            setValue('expectedAnswers', newAnswers, { shouldValidate: true, shouldDirty: true });
+        }
+    };
+    // Compute display question number safely
+    const displayQuestionNumber = typeof questionIndex === 'number' && !isNaN(questionIndex)
+        ? questionIndex + 1
+        : (typeof questionIndexInPart === 'number' && !isNaN(questionIndexInPart)
+            ? questionIndexInPart + 1
+            : '?');
+    // ─── Client Mode Preview ──────────────────────────────────────────────────
+    if (isClientMode) {
+        const questionData = {
+            audioUrl: watchedAudioUrl,
+            expectedAnswers: watchedExpectedAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+            activeQuestionId: watchedActiveQuestionId,
+            isBackup: watchedIsBackup,
+            questions,
+            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 & Tr\u1EA3 l\u1EDDi theo danh s\u00E1ch c\u00E2u h\u1ECFi (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(ListenAndSpeakQuestionListClient, { questionData: questionData, isReviewMode: true })] }));
+    }
+    // ─── Creator UI ────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "blue", steps: [
+                    { text: 'Nhập danh sách câu hỏi cho nhóm — câu hỏi đầu tiên sẽ quản lý danh sách chung' },
+                    { text: 'Upload audio câu hỏi cho từng câu trong nhóm' },
+                    { text: 'Chọn câu hỏi đang active (active question) tương ứng với câu đang hỏi', highlight: true },
+                    { text: 'Nhập các đáp án mong muốn cho mỗi câu' },
+                    { text: 'Thêm giải thích nếu cần thiết' },
+                ], tips: ['Câu hỏi nên ngắn gọn, rõ ràng và phù hợp với trình độ học sinh'] }), _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-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-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-sm", children: _jsx(ListChecks, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "Nh\u00F3m \u0111\u00E1p \u00E1n" }), _jsxs("p", { className: "text-sm text-gray-500", children: ["Nh\u00F3m ", currentGroupNumber, " \u2014 D\u00F9ng chung cho t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi"] })] })] }), _jsxs(Button, { type: "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 disabled:opacity-50", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), isFirstInGroup ? (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-cyan-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-cyan-400 to-sky-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-cyan-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-cyan-600" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "Danh s\u00E1ch c\u00E2u h\u1ECFi" }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-indigo-300 bg-indigo-100 px-2.5 py-0.5 text-xs font-semibold text-indigo-700", children: ["Nh\u00F3m ", currentGroupNumber] })] }), _jsx("p", { className: "text-sm text-gray-500", children: "D\u00F9ng chung cho t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi trong nh\u00F3m \u2014 Th\u00EAm c\u00E1c c\u00E2u h\u1ECFi text \u0111\u1EC3 h\u1ECDc sinh ch\u1ECDn v\u00E0 tr\u1EA3 l\u1EDDi" })] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("div", { className: "space-y-3", children: questions.map((q, index) => (_jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700 font-semibold text-sm shadow-sm", children: index + 1 }), _jsx(Input, { value: q.text, onChange: (e) => handleUpdateListQuestion(index, e.target.value), placeholder: "VD: Now, how old are you?", className: "flex-1 border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleRemoveListQuestion(index), className: "shrink-0 text-gray-400 hover:text-red-600 hover:bg-red-50", "aria-label": `Xóa câu hỏi ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, q.id))) }), questions.length === 0 && (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-indigo-200 bg-indigo-50/50 py-8 px-4 text-center", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 mb-3", children: _jsx(ListChecks, { className: "h-6 w-6 text-indigo-500" }) }), _jsx("p", { className: "text-sm font-medium text-gray-700", children: "Ch\u01B0a c\u00F3 c\u00E2u h\u1ECFi n\u00E0o" }), _jsx("p", { className: "text-xs text-gray-500 mt-1", children: "Vui l\u00F2ng th\u00EAm \u00EDt nh\u1EA5t m\u1ED9t c\u00E2u h\u1ECFi cho nh\u00F3m n\u00E0y" })] })), _jsxs(Button, { type: "button", variant: "outline", onClick: handleAddListQuestion, className: "w-full gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:border-indigo-300", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u h\u1ECFi"] })] })] })) : (
+            /* Read-only view of the shared question list for non-first questions in the group */
+            _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow shadow-indigo-100/30", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 via-blue-400 to-cyan-400" }), _jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-100 shadow-sm", children: _jsx(ListChecks, { className: "h-4 w-4 text-indigo-600" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Danh s\u00E1ch c\u00E2u h\u1ECFi" }), _jsxs("span", { className: "inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500", children: ["Nh\u00F3m ", currentGroupNumber, " \u2014 Ch\u1EC9 \u0111\u1ECDc"] })] }), _jsx("p", { className: "text-xs text-gray-400 mt-0.5", children: "\u0110\u01B0\u1EE3c qu\u1EA3n l\u00FD b\u1EDFi c\u00E2u h\u1ECFi \u0111\u1EA7u ti\u00EAn trong nh\u00F3m" })] })] }) }), _jsx(CardContent, { className: "pt-0", children: questions.length > 0 ? (_jsx("div", { className: "space-y-2", children: questions.map((q, index) => (_jsxs("div", { className: "flex gap-2.5 items-center px-3 py-2 rounded-lg bg-gray-50 border border-gray-100", children: [_jsx("div", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md bg-indigo-50 text-indigo-600 font-semibold text-xs", children: index + 1 }), _jsx("span", { className: "text-sm text-gray-700", children: q.text || _jsx("span", { className: "italic text-gray-400", children: "(Ch\u01B0a nh\u1EADp n\u1ED9i dung)" }) })] }, q.id))) })) : (_jsx("div", { className: "text-center py-4 text-sm text-gray-400 italic", children: "Ch\u01B0a c\u00F3 c\u00E2u h\u1ECFi n\u00E0o trong nh\u00F3m" })) })] })), _jsxs(Form, { ...form, children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm", children: _jsx(Mic, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "C\u00E2u h\u1ECFi Nghe & Tr\u1EA3 l\u1EDDi" }), _jsx("p", { className: "text-sm text-gray-500", children: "H\u1ECDc sinh nghe \u00E2m thanh v\u00E0 n\u00F3i c\u00E2u tr\u1EA3 l\u1EDDi" })] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx("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.formState.errors?.points?.message }) }) }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquareText, { className: "h-4 w-4 text-indigo-500" }), "C\u00E2u h\u1ECFi \u0111\u01B0\u1EE3c h\u1ECFi trong audio ", _jsx("span", { className: "text-red-500", 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: "Ch\u1ECDn c\u00E2u h\u1ECFi m\u00E0 h\u1ECDc sinh s\u1EBD nghe trong \u0111o\u1EA1n audio n\u00E0y." }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 M\u1ED7i audio t\u01B0\u01A1ng \u1EE9ng m\u1ED9t c\u00E2u h\u1ECFi:" }), " X\u00E1c \u0111\u1ECBnh c\u00E2u h\u1ECFi n\u00E0o t\u1EEB danh s\u00E1ch \u0111ang \u0111\u01B0\u1EE3c h\u1ECFi trong audio."] }), _jsxs("p", { children: [_jsx("span", { className: "font-semibold", children: "\u2022 Hi\u1EC3n th\u1ECB cho h\u1ECDc sinh:" }), " H\u1ECDc sinh s\u1EBD th\u1EA5y danh s\u00E1ch c\u00E2u h\u1ECFi v\u00E0 c\u1EA7n ch\u1ECDn \u0111\u00FAng c\u00E2u h\u1ECFi kh\u1EDBp v\u1EDBi audio \u0111\u1EC3 tr\u1EA3 l\u1EDDi."] })] })] }), _jsx(FormField, { control: control, name: "activeQuestionId", render: ({ field }) => (_jsxs(FormItem, { children: [_jsxs(Select, { value: field.value || '', onValueChange: field.onChange, children: [_jsx(FormControl, { children: _jsx(SelectTrigger, { className: "w-full bg-white border-gray-200 transition-all focus:border-indigo-300 focus:ring-indigo-200", children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn c\u00E2u h\u1ECFi t\u1EEB danh s\u00E1ch" }) }) }), _jsxs(SelectContent, { children: [questions.map((q, idx) => (_jsxs(SelectItem, { value: q.id, children: [idx + 1, ". ", q.text || '(Chưa nhập nội dung)'] }, q.id))), questions.length === 0 && (_jsx("div", { className: "p-3 text-sm text-gray-500 italic text-center", children: "Vui l\u00F2ng t\u1EA1o c\u00E2u h\u1ECFi \u1EDF nh\u00F3m tr\u00EAn tr\u01B0\u1EDBc" }))] })] }), _jsx(FormMessage, {})] })) })] }), _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" }), "\u00C2m thanh c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FormField, { control: control, name: "audioUrl", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(FileUpload, { id: `audio-question-${displayQuestionNumber}`, label: "", accept: "audio/*", value: field.value, onChange: (url) => { field.onChange(url); clearErrors('audioUrl'); }, maxSize: 10, placeholder: "T\u1EA3i l\u00EAn file \u00E2m thanh (mp3, wav...)", autoUpload: true, prefix: "listen-and-speak" }) }), _jsx(FormMessage, {})] })) })] })] })] }), _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, { type: "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."] })] })] }), _jsx(FormField, { control: control, name: "expectedAnswers", render: () => (_jsxs(FormItem, { children: [_jsx("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, { placeholder: `Ví dụ: ${index === 0 ? 'I am doing well' : 'I feel great'}`, value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), 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, { type: "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", "aria-label": `Xóa đáp án ${index + 1}`, 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, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0 'I am 7 years old' v\u00EC c\u00E2u h\u1ECFi h\u1ECFi v\u1EC1 tu\u1ED5i...", className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none", rows: 3 }) })] })] })] }));
+}

package/dist/components/questions/types/listen-and-speak-question-list/register.js

@@ -1 +1,81 @@
-import{ListenAndSpeakQuestionListCreator as e}from"./ListenAndSpeakQuestionListCreator";export const listenAndSpeakQuestionListRegistration={component:e,transformInitialData:e=>{let t=e?.answer;const n=e?.content,o=e?.answer||e?.correctAnswer||e?.correct_answer,s=e?.total_points?parseFloat(e.total_points):e?.points||n?.points||o?.points||1,a=e?.explanation||n?.explanation||o?.explanation||"";return n&&"object"==typeof n&&void 0!==n.audioUrl?t={audioUrl:n.audioUrl||"",activeQuestionId:n.activeQuestionId,expectedAnswers:o?.expectedAnswers||[],explanation:a,points:s,isBackup:n.isBackup||!1,groupQuestions:e?.answer?.groupQuestions||[],groupNumber:e?.answer?.groupNumber||1}:o&&"object"==typeof o&&void 0!==o.expectedAnswers&&(t={...o,audioUrl:o.audioUrl||n?.audioUrl||"",activeQuestionId:o.activeQuestionId||n?.activeQuestionId,explanation:a,points:s,isBackup:n?.isBackup||!1,groupQuestions:o.groupQuestions||[],groupNumber:o.groupNumber||1}),t},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,activeQuestionId:e.activeQuestionId,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||"",...e.groupNumber&&{questionGroup:{payload:{questions:e.questions},groupNumber:e.groupNumber}}}),wrapOnChange:(e,t)=>({type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},audioUrl:e.audioUrl,activeQuestionId:e.activeQuestionId,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||"",...e.groupNumber&&{questionGroup:{payload:{questions:e.questions},groupNumber:e.groupNumber}}})};
+import { ListenAndSpeakQuestionListCreator } from './ListenAndSpeakQuestionListCreator';
+export const listenAndSpeakQuestionListRegistration = {
+    component: ListenAndSpeakQuestionListCreator,
+    transformInitialData: (initialData) => {
+        let creatorData = initialData?.answer;
+        const content = initialData?.content;
+        const answer = initialData?.answer || initialData?.correctAnswer || initialData?.correct_answer;
+        const points = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (initialData?.points || content?.points || answer?.points || 1);
+        const explanation = initialData?.explanation || content?.explanation || answer?.explanation || '';
+        if (content && typeof content === 'object' && content.audioUrl !== undefined) {
+            creatorData = {
+                audioUrl: content.audioUrl || '',
+                activeQuestionId: content.activeQuestionId,
+                expectedAnswers: answer?.expectedAnswers || [],
+                explanation,
+                points,
+                isBackup: content.isBackup || false,
+                groupQuestions: initialData?.answer?.groupQuestions || [],
+                groupNumber: initialData?.answer?.groupNumber || 1,
+            };
+        }
+        else if (answer && typeof answer === 'object' && answer.expectedAnswers !== undefined) {
+            creatorData = {
+                ...answer,
+                audioUrl: answer.audioUrl || content?.audioUrl || '',
+                activeQuestionId: answer.activeQuestionId || content?.activeQuestionId,
+                explanation,
+                points,
+                isBackup: content?.isBackup || false,
+                groupQuestions: answer.groupQuestions || [],
+                groupNumber: answer.groupNumber || 1,
+            };
+        }
+        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,
+            activeQuestionId: data.activeQuestionId,
+            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 || '',
+        ...(data.groupNumber && { questionGroup: { payload: { questions: data.questions }, groupNumber: data.groupNumber } })
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            audioUrl: data.audioUrl,
+            activeQuestionId: data.activeQuestionId,
+            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 || '',
+        ...(data.groupNumber && { questionGroup: { payload: { questions: data.questions }, groupNumber: data.groupNumber } })
+    }),
+};

package/dist/components/questions/types/listen-and-speak-question-list/transform.js

@@ -1 +1,26 @@
-export function transformListenAndSpeakQuestionList(e){const t=e.answer,s=t?.questions&&t.questions.length>0;let n;return s&&(n={questions:t?.questions||[]}),{isExample:!!t?.isBackup,apiContent:{audioUrl:t?.audioUrl||"",activeQuestionId:t?.activeQuestionId||""},apiCorrectAnswer:{expectedAnswers:t?.expectedAnswers||[]},totalPoints:e.points||1,questionListGroupData:s?n:void 0,groupNumber:t?.groupNumber||1}}
+export function transformListenAndSpeakQuestionList(question) {
+    const answerData = question.answer;
+    // Group logic handling
+    const isValidGroup = answerData?.questions && answerData.questions.length > 0;
+    // Extract question list group data if it's a group
+    let questionListGroupData = undefined;
+    if (isValidGroup) {
+        questionListGroupData = {
+            questions: answerData?.questions || [],
+        };
+    }
+    return {
+        isExample: !!answerData?.isBackup,
+        apiContent: {
+            audioUrl: answerData?.audioUrl || '',
+            activeQuestionId: answerData?.activeQuestionId || '',
+        },
+        apiCorrectAnswer: {
+            expectedAnswers: answerData?.expectedAnswers || [],
+        },
+        totalPoints: question.points || 1,
+        // Using questionListGroupData for questionGroup.payload
+        questionListGroupData: isValidGroup ? questionListGroupData : undefined,
+        groupNumber: answerData?.groupNumber || 1,
+    };
+}

package/dist/components/questions/types/listen-and-speak-with-story-images/ListenAndSpeakWithStoryImagesClient.js

@@ -1 +1,26 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Mic as i,Volume2 as s,CheckCircle2 as t,Play as l,Pause as n,ImageIcon as a,Info as d,BookImage as c}from"lucide-react";import{Button as o}from"../../../../components/ui/button";import{usePresignedFileUrl as m,useAudioPreview as g}from"../../../../shared/lib/hooks";function h({audioUrl:i}){const{previewUrl:t}=m(i),{isPlaying:a,currentTime:d,duration:c,progressPercentage:h,handlePlayPause:x,handleProgressClick:p,formatTime:u}=g(t);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(o,{variant:"outline",size:"icon",onClick:x,disabled:!t,className:"h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100",children:e(a?n:l,{className:"h-3.5 w-3.5"})}),r("div",{className:"text-muted-foreground min-w-[70px] text-xs",children:[u(d)," / ",u(c)]}),e("div",{className:"bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full",onClick:p,children:e("div",{className:"bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all",style:{width:`${h}%`}})}),e(s,{className:"h-4 w-4 text-indigo-400"})]})}function x({imageUrl:r,index:i}){const{previewUrl:s}=m(r);return s?e("img",{src:s,alt:`Story image ${i+1}`,className:"w-full h-full object-cover"}):e("div",{className:"w-full h-full flex items-center justify-center bg-gray-100 text-gray-400",children:e(a,{className:"h-8 w-8"})})}export function ListenAndSpeakWithStoryImagesClient({questionData:l,isReviewMode:n=!1}){const{audioUrl:o,images:m,expectedAnswers:g=[],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(c,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Nghe và nói (Kể chuyện theo hình)"})]})}),r("div",{className:"p-5 space-y-5",children:[o?e(h,{audioUrl:o}):r("div",{className:"flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3",children:[e(s,{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"})]}),m&&m.length>0&&e("div",{className:"bg-gradient-to-br from-purple-50/80 to-fuchsia-50/60 rounded-2xl p-6 border border-purple-100/80 shadow-sm",children:e("div",{className:"grid gap-4",style:{gridTemplateColumns:`repeat(${Math.min(m.length,4)}, 1fr)`},children:m.map((i,s)=>r("div",{className:"space-y-2",children:[e("div",{className:"flex items-center gap-1.5",children:e("span",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-purple-200 text-purple-800 text-xs font-bold",children:s+1})}),e("div",{className:"relative aspect-square rounded-xl overflow-hidden border-[3px] border-purple-300 bg-white shadow-md ring-2 ring-purple-100",children:i?e(x,{imageUrl:i,index:s}):e("div",{className:"w-full h-full flex items-center justify-center text-gray-400",children:e(a,{className:"h-6 w-6"})})})]},s))})}),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"})]}),n&&g.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(t,{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:g.map((i,s)=>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:s+1}),e("span",{className:"text-sm text-green-800",children:i})]},s))})]}),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(d,{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, Play, Pause, ImageIcon, Info, BookImage } from 'lucide-react';
+import { Button } from '../../../../components/ui/button';
+import { usePresignedFileUrl, useAudioPreview } from '../../../../shared/lib/hooks';
+// ─── 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 preview ──────────────────────────────────
+function StoryImagePreview({ imageUrl, index }) {
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    if (!previewUrl) {
+        return (_jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-100 text-gray-400", children: _jsx(ImageIcon, { className: "h-8 w-8" }) }));
+    }
+    return (_jsx("img", { src: previewUrl, alt: `Story image ${index + 1}`, className: "w-full h-full object-cover" }));
+}
+// ─── Main Client Component ───────────────────────────────────────────────────
+export function ListenAndSpeakWithStoryImagesClient({ questionData, isReviewMode = false, }) {
+    const { audioUrl, images, 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(BookImage, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 n\u00F3i (K\u1EC3 chuy\u1EC7n theo h\u00ECnh)" })] }) }), _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" })] })), images && images.length > 0 && (_jsx("div", { className: "bg-gradient-to-br from-purple-50/80 to-fuchsia-50/60 rounded-2xl p-6 border border-purple-100/80 shadow-sm", children: _jsx("div", { className: "grid gap-4", style: {
+                                        gridTemplateColumns: `repeat(${Math.min(images.length, 4)}, 1fr)`,
+                                    }, children: images.map((imgUrl, index) => (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex items-center gap-1.5", children: _jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-purple-200 text-purple-800 text-xs font-bold", children: index + 1 }) }), _jsx("div", { className: "relative aspect-square rounded-xl overflow-hidden border-[3px] border-purple-300 bg-white shadow-md ring-2 ring-purple-100", children: imgUrl ? (_jsx(StoryImagePreview, { imageUrl: imgUrl, index: index })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-gray-400", children: _jsx(ImageIcon, { className: "h-6 w-6" }) })) })] }, index))) }) })), _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 })] }))] })] })] }));
+}