@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/types/speaking-describe-image/transform.js

@@ -1 +1,16 @@
-export const transformSpeakingDescribeImage=e=>{const n=e.content,r=e.answer,t=r?.expectedAnswers||[];return{apiContent:{question:n?.question||"",imageUrl:n?.imageUrl||r?.imageUrl||""},apiCorrectAnswer:{expectedAnswers:t}}};
+export const transformSpeakingDescribeImage = (question) => {
+    const contentData = question.content;
+    const answerData = question.answer;
+    const expectedAnswers = answerData?.expectedAnswers || [];
+    const apiContent = {
+        question: contentData?.question || '',
+        imageUrl: contentData?.imageUrl || answerData?.imageUrl || '',
+    };
+    const result = {
+        apiContent,
+        apiCorrectAnswer: {
+            expectedAnswers: expectedAnswers,
+        },
+    };
+    return result;
+};

package/dist/components/questions/types/spontaneous-qa/SpontaneousQACreator.js

@@ -1 +1,234 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as s,useEffect as n,useState as a}from"react";import{useParams as i}from"next/navigation";import{Button as r}from"../../../../components/ui/button";import{Label as o}from"../../../../components/ui/label";import{Input as l}from"../../../../components/ui/input";import{Textarea as c}from"../../../../components/ui/textarea";import{Card as d,CardContent as m,CardHeader as u,CardTitle as h}from"../../../../components/ui/card";import{useDebouncedCallback as p,usePresignedFileUrl as x}from"../../../../shared/lib/hooks";import{useReactHookForm as g}from"../../../../shared/lib/hooks/useReactHookForm";import{Mic as b,Type as f,Volume2 as N,BookOpen as w,Info as T,Loader2 as y,Layers as v}from"lucide-react";import{toast as A}from"sonner";import{FileUpload as U}from"../../../../components/ui/file-upload";import{CreatorGuide as q}from"../../components/CreatorGuide";import{spontaneousQAFormSchema as S}from"../../../../shared/lib/validation/spontaneous-qa.validation";export function SpontaneousQACreator({initialData:k,onSave:C,onChange:V,externalErrors:E,validationRef:O}){const F=k,z=(i(),(()=>{const e=F?.expectedAnswers||F?.correctAnswer?.expectedAnswers;if(Array.isArray(e)&&e.length>0)return e;const t=F?.sampleAnswers||F?.content?.sampleAnswers;if(Array.isArray(t)&&t.length>0)return t;const s=F?.sampleAnswer||F?.correctAnswer?.sampleAnswer;return s?[s]:[""]})()),D=g({defaultValues:{inputType:F?.inputType||F?.content?.inputType||"TEXT",audioUrl:F?.audioUrl||F?.content?.audioUrl||"",questionText:F?.questionText||F?.content?.questionText||"",sampleAnswers:z,explanation:F?.explanation||"",points:F?.points??5},zodSchema:S,mode:"onBlur"}),j=s(k),H=s(!1),J=s(V),G=s(""),[I,X]=a(!1),[K,R]=a(null),[W,B]=a(F?.questionText||F?.content?.questionText||"");n(()=>{J.current=V},[V]);const L=p(e=>{J.current?.(e)},300),M=D.watch("inputType"),P=D.watch("audioUrl"),Q=D.watch("questionText"),Y=D.watch("sampleAnswers")||[""],Z=D.watch("explanation"),$=D.watch("points"),{previewUrl:_}=x(P||""),ee=K||_;n(()=>{O&&(O.current={triggerValidation:async()=>await D.trigger(),getFormData:()=>({inputType:M,audioUrl:P,questionText:Q,sampleAnswers:Y,explanation:Z,points:$})})},[O,D,M,P,Q,Y,Z,$]),n(()=>{const e=k,t=(()=>{const t=e?.expectedAnswers||e?.correctAnswer?.expectedAnswers;if(Array.isArray(t)&&t.length>0)return t;const s=e?.sampleAnswers||e?.content?.sampleAnswers;if(Array.isArray(s)&&s.length>0)return s;const n=e?.sampleAnswer||e?.correctAnswer?.sampleAnswer;return n?[n]:[""]})(),s={inputType:e?.inputType||e?.content?.inputType||"TEXT",audioUrl:e?.audioUrl||e?.content?.audioUrl||"",questionText:e?.questionText||e?.content?.questionText||"",sampleAnswers:t,explanation:e?.explanation||"",points:e?.points??5};if(!(JSON.stringify(j.current)!==JSON.stringify(k)))return;j.current=k;const n={inputType:M,audioUrl:P,questionText:Q,sampleAnswers:Y,explanation:Z,points:$},a=n.points===s.points&&n.explanation===s.explanation&&n.inputType===s.inputType&&n.audioUrl===s.audioUrl&&n.questionText===s.questionText&&JSON.stringify(n.sampleAnswers)===JSON.stringify(s.sampleAnswers);if(a&&!0===k?.isCompleted)return;!a&&(H.current=!0,D.reset(s),B(s.questionText),setTimeout(()=>{H.current=!1},150))},[k,D,M,P,Q,Y,Z,$]),n(()=>{if(H.current){const e=JSON.stringify({inputType:M,audioUrl:P,questionText:Q,sampleAnswers:Y,explanation:Z,points:$});return void(G.current=e)}const e={inputType:M,audioUrl:P,questionText:Q,sampleAnswers:Y,explanation:Z,points:$},t=JSON.stringify(e);G.current!==t&&(G.current=t,L(e))},[M,P,Q,Y,Z,$,L]);D.handleSubmit(e=>{C?.({...e})});return t("div",{className:"space-y-6",children:[e(q,{colorScheme:"blue",steps:[{text:"Chọn hình thức nhập câu hỏi: Upload Audio hoặc Nhập văn bản (Text → TTS)"},{text:"Nếu chọn Audio: upload file audio câu hỏi. Nếu chọn Text: nhập nội dung câu hỏi",highlight:!0},{text:"Nhập đáp án mẫu (tùy chọn) — AI sẽ dựa vào đáp án mẫu để chấm điểm. Có thể thêm nhiều đáp án mẫu."},{text:"Thêm giải thích (tùy chọn)"}],tips:["Học sinh chỉ nghe câu hỏi qua audio, KHÔNG nhìn thấy text câu hỏi.",'Nếu chọn "Nhập văn bản", hệ thống sẽ tự động chuyển đổi thành giọng nói (TTS).']}),t(d,{className:"overflow-hidden border border-slate-200 bg-white shadow-sm",children:[e(u,{className:"border-b border-slate-100 bg-slate-50/50 pb-4",children:t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-blue-100 text-blue-700",children:e(v,{className:"h-4 w-4"})}),e(h,{className:"text-lg font-semibold text-slate-800",children:"Cấu hình Nội dung Câu hỏi & Đáp án"})]})}),t(m,{className:"p-0",children:[t("div",{className:"p-6 space-y-8",children:[t("div",{className:"grid grid-cols-1 gap-6 md:grid-cols-2",children:[t("div",{className:"space-y-1.5 animate-in fade-in zoom-in-95 duration-200",children:[t(o,{htmlFor:"points",className:"text-sm font-semibold text-slate-700",children:["Điểm số ",e("span",{className:"text-red-500",children:"*"})]}),e(l,{id:"points",type:"number",step:"1",min:"1",...D.register("points",{valueAsNumber:!0}),className:"w-24 border-slate-200 focus:border-blue-400 focus:ring-blue-100"}),D.hasError("points")&&e("p",{className:"text-sm text-red-600",children:D.getFieldError("points")})]}),t("div",{className:"space-y-3",children:[e(o,{className:"text-sm font-semibold text-slate-700 block",children:"Hình thức nhập câu hỏi"}),t("div",{className:"flex w-fit rounded-lg border border-slate-200 bg-slate-100 p-1",children:[t("button",{type:"button",onClick:()=>D.setValue("inputType","AUDIO",{shouldValidate:!0}),className:"flex items-center gap-2 rounded-md px-4 py-1.5 text-sm font-medium transition-all "+("AUDIO"===M?"bg-white text-blue-700 shadow-sm":"text-slate-500 hover:bg-slate-200/50 hover:text-slate-700"),children:[e(b,{className:"h-3.5 w-3.5"})," Upload Audio"]}),t("button",{type:"button",onClick:()=>D.setValue("inputType","TEXT",{shouldValidate:!0}),className:"flex items-center gap-2 rounded-md px-4 py-1.5 text-sm font-medium transition-all "+("TEXT"===M?"bg-white text-emerald-700 shadow-sm":"text-slate-500 hover:bg-slate-200/50 hover:text-slate-700"),children:[e(f,{className:"h-3.5 w-3.5"})," Nhập văn bản (TTS)"]})]}),D.hasError("inputType")&&e("p",{className:"text-sm text-red-600 mt-1",children:D.getFieldError("inputType")})]})]}),e("hr",{className:"border-slate-100"}),e("div",{className:"space-y-4",children:e("div",{className:"max-w-3xl",children:t("div","AUDIO"===M?{className:"space-y-2 animate-in fade-in zoom-in-95 duration-200",children:[e(o,{className:"text-sm font-medium text-slate-700",children:"File audio câu hỏi"}),e(U,{id:"audioUrl",label:"",accept:"audio/*",value:P||"",onChange:e=>{D.setValue("audioUrl",e,{shouldValidate:!0})},maxSize:20,placeholder:"Tải lên file audio (MP3, WAV...)",autoUpload:!0,prefix:"speaking/spontaneous-qa"}),D.hasError("audioUrl")&&e("p",{className:"text-sm text-red-600 mt-1",children:D.getFieldError("audioUrl")}),t("div",{className:"flex items-start gap-2 rounded-lg border border-amber-100 bg-amber-50/60 px-3 py-2 mt-2",children:[e(T,{className:"h-4 w-4 text-amber-500 mt-0.5 flex-shrink-0"}),e("p",{className:"text-xs text-amber-700",children:"Upload file audio chứa câu hỏi. Học sinh sẽ nghe audio này và trả lời tự do."})]})]}:{className:"space-y-3 animate-in fade-in zoom-in-95 duration-200",children:[e(o,{className:"text-sm font-medium text-slate-700",children:"Nội dung câu hỏi (Text → TTS)"}),e(l,{...D.register("questionText"),placeholder:"VD: What is your favorite food and why?",className:"border-slate-200 focus:border-blue-400 focus:ring-blue-100"}),D.hasError("questionText")&&e("p",{className:"text-sm text-red-600 mt-1",children:D.getFieldError("questionText")}),t("div",{className:"flex items-start gap-2 rounded-lg border border-amber-100 bg-amber-50/60 px-3 py-2",children:[e(T,{className:"h-4 w-4 text-amber-500 mt-0.5 flex-shrink-0"}),e("p",{className:"text-xs text-amber-700",children:'Hệ thống sẽ tự động chuyển văn bản thành giọng nói (TTS). Click nút "Tạo Audio" để hệ thống xử lý.'})]}),t("div",{className:"flex items-center gap-4 mt-2",children:[t(r,{type:"button",variant:"default",size:"sm",onClick:async()=>{const e=D.getValues("questionText");if(e&&""!==e.trim())try{return X(!0),void A.error("TTS chưa được tích hợp trong component SDK")}catch(e){A.error(e?.response?.data?.message||"Lỗi khi tạo audio")}finally{X(!1)}else A.error("Vui lòng nhập nội dung câu hỏi trước khi tạo audio!")},disabled:I||!Q||Q===W,className:"gap-2 rounded-none bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold shadow-md shadow-blue-500/30 hover:shadow-lg hover:shadow-blue-500/40 hover:-translate-y-0.5 transition-all w-fit disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none",children:[I?e(y,{className:"h-3.5 w-3.5 animate-spin"}):e(N,{className:"h-3.5 w-3.5"}),"Tạo Audio"]}),ee&&e("audio",{controls:!0,src:ee,className:"h-8 max-w-[250px]"})]})]})})})]}),E&&E.length>0&&e("div",{className:"border-t border-red-100 bg-red-50 p-6",children:e("div",{className:"flex items-start gap-3",children:t("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:E.map((t,s)=>e("li",{children:t},s))})]})})})]})]}),t(d,{className:"border border-slate-200 bg-slate-50/50 shadow-sm",children:[e(u,{className:"pb-3",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-slate-200/50 text-slate-600",children:e(w,{className:"h-3.5 w-3.5"})}),e(h,{className:"text-base font-semibold text-slate-800",children:"Giải thích chi tiết"})]}),e("span",{className:"text-xs font-medium text-slate-500 uppercase tracking-wider",children:"Tùy chọn"})]})}),e(m,{children:e(c,{value:Z||"",onChange:e=>D.setValue("explanation",e.target.value,{shouldValidate:!0}),placeholder:"Giải thích thêm về câu trả lời kỳ vọng, dùng khi review kết quả...",rows:3,className:"resize-none border-slate-200 bg-white focus:border-slate-300 focus:ring-slate-100"})})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { Mic, Type, Volume2, BookOpen, Info, Loader2, Layers } from 'lucide-react';
+import { toast } from 'sonner';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { CreatorGuide } from '../../components/CreatorGuide';
+import { spontaneousQAFormSchema, } from '../../../../shared/lib/validation/spontaneous-qa.validation';
+export function SpontaneousQACreator({ initialData, onSave, onChange, externalErrors, validationRef, }) {
+    const apiData = initialData;
+    const params = useParams();
+    const examRouteId = params?.examId || params?.id; // Try to get examId from route
+    // Backward compat: convert old sampleAnswer (string) / sampleAnswers to expectedAnswers (array)
+    const initSampleAnswers = (() => {
+        const newArr = apiData?.expectedAnswers || apiData?.correctAnswer?.expectedAnswers;
+        if (Array.isArray(newArr) && newArr.length > 0)
+            return newArr;
+        const arr = apiData?.sampleAnswers || apiData?.content?.sampleAnswers;
+        if (Array.isArray(arr) && arr.length > 0)
+            return arr;
+        const single = apiData?.sampleAnswer || apiData?.correctAnswer?.sampleAnswer;
+        if (single)
+            return [single];
+        return [''];
+    })();
+    const form = useReactHookForm({
+        defaultValues: {
+            inputType: apiData?.inputType || apiData?.content?.inputType || 'TEXT',
+            audioUrl: apiData?.audioUrl || apiData?.content?.audioUrl || '',
+            questionText: apiData?.questionText || apiData?.content?.questionText || '',
+            sampleAnswers: initSampleAnswers,
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 5,
+        },
+        zodSchema: spontaneousQAFormSchema,
+        mode: 'onBlur',
+    });
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    const [isGeneratingAudio, setIsGeneratingAudio] = useState(false);
+    const [previewAudioUrl, setPreviewAudioUrl] = useState(null);
+    const [lastGeneratedText, setLastGeneratedText] = useState(apiData?.questionText || apiData?.content?.questionText || '');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    const watchedInputType = form.watch('inputType');
+    const watchedAudioUrl = form.watch('audioUrl');
+    const watchedQuestionText = form.watch('questionText');
+    const watchedSampleAnswers = form.watch('sampleAnswers') || [''];
+    const watchedExplanation = form.watch('explanation');
+    const watchedPoints = form.watch('points');
+    const { previewUrl: presignedAudioUrl } = usePresignedFileUrl(watchedAudioUrl || '');
+    const displayAudioUrl = previewAudioUrl || presignedAudioUrl;
+    // Expose validation ref for external trigger
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return await form.trigger();
+                },
+                getFormData: () => ({
+                    inputType: watchedInputType,
+                    audioUrl: watchedAudioUrl,
+                    questionText: watchedQuestionText,
+                    sampleAnswers: watchedSampleAnswers,
+                    explanation: watchedExplanation,
+                    points: watchedPoints,
+                }),
+            };
+        }
+    }, [validationRef, form, watchedInputType, watchedAudioUrl, watchedQuestionText, watchedSampleAnswers, watchedExplanation, watchedPoints]);
+    // Reset form when initialData changes externally
+    useEffect(() => {
+        const apiD = initialData;
+        const resetSampleAnswers = (() => {
+            const newArr = apiD?.expectedAnswers || apiD?.correctAnswer?.expectedAnswers;
+            if (Array.isArray(newArr) && newArr.length > 0)
+                return newArr;
+            const arr = apiD?.sampleAnswers || apiD?.content?.sampleAnswers;
+            if (Array.isArray(arr) && arr.length > 0)
+                return arr;
+            const single = apiD?.sampleAnswer || apiD?.correctAnswer?.sampleAnswer;
+            if (single)
+                return [single];
+            return [''];
+        })();
+        const normalizedInitialData = {
+            inputType: apiD?.inputType || apiD?.content?.inputType || 'TEXT',
+            audioUrl: apiD?.audioUrl || apiD?.content?.audioUrl || '',
+            questionText: apiD?.questionText || apiD?.content?.questionText || '',
+            sampleAnswers: resetSampleAnswers,
+            explanation: apiD?.explanation || '',
+            points: apiD?.points ?? 5,
+        };
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged) {
+            return;
+        }
+        previousInitialDataRef.current = initialData;
+        const currentFormData = {
+            inputType: watchedInputType,
+            audioUrl: watchedAudioUrl,
+            questionText: watchedQuestionText,
+            sampleAnswers: watchedSampleAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+        };
+        const isEchoFromOnChange = currentFormData.points === normalizedInitialData.points &&
+            currentFormData.explanation === normalizedInitialData.explanation &&
+            currentFormData.inputType === normalizedInitialData.inputType &&
+            currentFormData.audioUrl === normalizedInitialData.audioUrl &&
+            currentFormData.questionText === normalizedInitialData.questionText &&
+            JSON.stringify(currentFormData.sampleAnswers) === JSON.stringify(normalizedInitialData.sampleAnswers);
+        const wasJustSaved = initialData?.isCompleted === true;
+        if (isEchoFromOnChange && wasJustSaved) {
+            return;
+        }
+        const shouldReset = !isEchoFromOnChange;
+        if (shouldReset) {
+            isInitializingRef.current = true;
+            form.reset(normalizedInitialData);
+            setLastGeneratedText(normalizedInitialData.questionText);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData, form, watchedInputType, watchedAudioUrl, watchedQuestionText, watchedSampleAnswers, watchedExplanation, watchedPoints]);
+    // Debounced onChange
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                inputType: watchedInputType,
+                audioUrl: watchedAudioUrl,
+                questionText: watchedQuestionText,
+                sampleAnswers: watchedSampleAnswers,
+                explanation: watchedExplanation,
+                points: watchedPoints,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            inputType: watchedInputType,
+            audioUrl: watchedAudioUrl,
+            questionText: watchedQuestionText,
+            sampleAnswers: watchedSampleAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedInputType,
+        watchedAudioUrl,
+        watchedQuestionText,
+        watchedSampleAnswers,
+        watchedExplanation,
+        watchedPoints,
+        debouncedOnChange,
+    ]);
+    const handleSave = form.handleSubmit((data) => {
+        onSave?.({
+            ...data,
+        });
+    });
+    // Handlers for dynamic sample answers
+    const handleAddSampleAnswer = () => {
+        const current = watchedSampleAnswers;
+        form.setValue('sampleAnswers', [...current, ''], { shouldValidate: false });
+    };
+    const handleRemoveSampleAnswer = (index) => {
+        const current = [...watchedSampleAnswers];
+        current.splice(index, 1);
+        // Always keep at least one entry
+        if (current.length === 0) {
+            current.push('');
+        }
+        form.setValue('sampleAnswers', current, { shouldValidate: true });
+    };
+    const handleSampleAnswerChange = (index, value) => {
+        const current = [...watchedSampleAnswers];
+        current[index] = value;
+        form.setValue('sampleAnswers', current, { shouldValidate: true });
+    };
+    const handleGenerateAudio = async () => {
+        const text = form.getValues('questionText');
+        if (!text || text.trim() === '') {
+            toast.error('Vui lòng nhập nội dung câu hỏi trước khi tạo audio!');
+            return;
+        }
+        try {
+            setIsGeneratingAudio(true);
+            toast.error('TTS chưa được tích hợp trong component SDK');
+            return;
+        }
+        catch (error) {
+            toast.error(error?.response?.data?.message || 'Lỗi khi tạo audio');
+        }
+        finally {
+            setIsGeneratingAudio(false);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "blue", steps: [
+                    { text: 'Chọn hình thức nhập câu hỏi: Upload Audio hoặc Nhập văn bản (Text → TTS)' },
+                    { text: 'Nếu chọn Audio: upload file audio câu hỏi. Nếu chọn Text: nhập nội dung câu hỏi', highlight: true },
+                    { text: 'Nhập đáp án mẫu (tùy chọn) — AI sẽ dựa vào đáp án mẫu để chấm điểm. Có thể thêm nhiều đáp án mẫu.' },
+                    { text: 'Thêm giải thích (tùy chọn)' },
+                ], tips: [
+                    'Học sinh chỉ nghe câu hỏi qua audio, KHÔNG nhìn thấy text câu hỏi.',
+                    'Nếu chọn "Nhập văn bản", hệ thống sẽ tự động chuyển đổi thành giọng nói (TTS).',
+                ] }), _jsxs(Card, { className: "overflow-hidden border border-slate-200 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "border-b border-slate-100 bg-slate-50/50 pb-4", 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-blue-100 text-blue-700", children: _jsx(Layers, { className: "h-4 w-4" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-slate-800", children: "C\u1EA5u h\u00ECnh N\u1ED9i dung C\u00E2u h\u1ECFi & \u0110\u00E1p \u00E1n" })] }) }), _jsxs(CardContent, { className: "p-0", children: [_jsxs("div", { className: "p-6 space-y-8", children: [_jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5 animate-in fade-in zoom-in-95 duration-200", children: [_jsxs(Label, { htmlFor: "points", className: "text-sm font-semibold text-slate-700", children: ["\u0110i\u1EC3m s\u1ED1 ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "points", type: "number", step: "1", min: "1", ...form.register('points', { valueAsNumber: true }), className: "w-24 border-slate-200 focus:border-blue-400 focus:ring-blue-100" }), form.hasError('points') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('points') }))] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Label, { className: "text-sm font-semibold text-slate-700 block", children: "H\u00ECnh th\u1EE9c nh\u1EADp c\u00E2u h\u1ECFi" }), _jsxs("div", { className: "flex w-fit rounded-lg border border-slate-200 bg-slate-100 p-1", children: [_jsxs("button", { type: "button", onClick: () => form.setValue('inputType', 'AUDIO', { shouldValidate: true }), className: `flex items-center gap-2 rounded-md px-4 py-1.5 text-sm font-medium transition-all ${watchedInputType === 'AUDIO'
+                                                                    ? 'bg-white text-blue-700 shadow-sm'
+                                                                    : 'text-slate-500 hover:bg-slate-200/50 hover:text-slate-700'}`, children: [_jsx(Mic, { className: "h-3.5 w-3.5" }), " Upload Audio"] }), _jsxs("button", { type: "button", onClick: () => form.setValue('inputType', 'TEXT', { shouldValidate: true }), className: `flex items-center gap-2 rounded-md px-4 py-1.5 text-sm font-medium transition-all ${watchedInputType === 'TEXT'
+                                                                    ? 'bg-white text-emerald-700 shadow-sm'
+                                                                    : 'text-slate-500 hover:bg-slate-200/50 hover:text-slate-700'}`, children: [_jsx(Type, { className: "h-3.5 w-3.5" }), " Nh\u1EADp v\u0103n b\u1EA3n (TTS)"] })] }), form.hasError('inputType') && (_jsx("p", { className: "text-sm text-red-600 mt-1", children: form.getFieldError('inputType') }))] })] }), _jsx("hr", { className: "border-slate-100" }), _jsx("div", { className: "space-y-4", children: _jsx("div", { className: "max-w-3xl", children: watchedInputType === 'AUDIO' ? (_jsxs("div", { className: "space-y-2 animate-in fade-in zoom-in-95 duration-200", children: [_jsx(Label, { className: "text-sm font-medium text-slate-700", children: "File audio c\u00E2u h\u1ECFi" }), _jsx(FileUpload, { id: "audioUrl", label: "", accept: "audio/*", value: watchedAudioUrl || '', onChange: (url) => {
+                                                            form.setValue('audioUrl', url, { shouldValidate: true });
+                                                        }, maxSize: 20, placeholder: "T\u1EA3i l\u00EAn file audio (MP3, WAV...)", autoUpload: true, prefix: "speaking/spontaneous-qa" }), form.hasError('audioUrl') && (_jsx("p", { className: "text-sm text-red-600 mt-1", children: form.getFieldError('audioUrl') })), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-amber-100 bg-amber-50/60 px-3 py-2 mt-2", children: [_jsx(Info, { className: "h-4 w-4 text-amber-500 mt-0.5 flex-shrink-0" }), _jsx("p", { className: "text-xs text-amber-700", children: "Upload file audio ch\u1EE9a c\u00E2u h\u1ECFi. H\u1ECDc sinh s\u1EBD nghe audio n\u00E0y v\u00E0 tr\u1EA3 l\u1EDDi t\u1EF1 do." })] })] })) : (_jsxs("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-200", children: [_jsx(Label, { className: "text-sm font-medium text-slate-700", children: "N\u1ED9i dung c\u00E2u h\u1ECFi (Text \u2192 TTS)" }), _jsx(Input, { ...form.register('questionText'), placeholder: "VD: What is your favorite food and why?", className: "border-slate-200 focus:border-blue-400 focus:ring-blue-100" }), form.hasError('questionText') && (_jsx("p", { className: "text-sm text-red-600 mt-1", children: form.getFieldError('questionText') })), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-amber-100 bg-amber-50/60 px-3 py-2", children: [_jsx(Info, { className: "h-4 w-4 text-amber-500 mt-0.5 flex-shrink-0" }), _jsx("p", { className: "text-xs text-amber-700", children: "H\u1EC7 th\u1ED1ng s\u1EBD t\u1EF1 \u0111\u1ED9ng chuy\u1EC3n v\u0103n b\u1EA3n th\u00E0nh gi\u1ECDng n\u00F3i (TTS). Click n\u00FAt \"T\u1EA1o Audio\" \u0111\u1EC3 h\u1EC7 th\u1ED1ng x\u1EED l\u00FD." })] }), _jsxs("div", { className: "flex items-center gap-4 mt-2", children: [_jsxs(Button, { type: "button", variant: "default", size: "sm", onClick: handleGenerateAudio, disabled: isGeneratingAudio || !watchedQuestionText || watchedQuestionText === lastGeneratedText, className: "gap-2 rounded-none bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold shadow-md shadow-blue-500/30 hover:shadow-lg hover:shadow-blue-500/40 hover:-translate-y-0.5 transition-all w-fit disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none", children: [isGeneratingAudio ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Volume2, { className: "h-3.5 w-3.5" })), "T\u1EA1o Audio"] }), displayAudioUrl && (_jsx("audio", { controls: true, src: displayAudioUrl, className: "h-8 max-w-[250px]" }))] })] })) }) })] }), externalErrors && externalErrors.length > 0 && (_jsx("div", { className: "border-t border-red-100 bg-red-50 p-6", children: _jsx("div", { className: "flex items-start gap-3", 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: "border border-slate-200 bg-slate-50/50 shadow-sm", children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-slate-200/50 text-slate-600", children: _jsx(BookOpen, { className: "h-3.5 w-3.5" }) }), _jsx(CardTitle, { className: "text-base font-semibold text-slate-800", children: "Gi\u1EA3i th\u00EDch chi ti\u1EBFt" })] }), _jsx("span", { className: "text-xs font-medium text-slate-500 uppercase tracking-wider", children: "T\u00F9y ch\u1ECDn" })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { value: watchedExplanation || '', onChange: (e) => form.setValue('explanation', e.target.value, { shouldValidate: true }), placeholder: "Gi\u1EA3i th\u00EDch th\u00EAm v\u1EC1 c\u00E2u tr\u1EA3 l\u1EDDi k\u1EF3 v\u1ECDng, d\u00F9ng khi review k\u1EBFt qu\u1EA3...", rows: 3, className: "resize-none border-slate-200 bg-white focus:border-slate-300 focus:ring-slate-100" }) })] })] }));
+}

package/dist/components/questions/types/spontaneous-qa/register.js

@@ -1 +1,93 @@
-import{SpontaneousQACreator as t}from"./SpontaneousQACreator";export const spontaneousQARegistration={component:t,transformInitialData:t=>{let e=t?.answer;const n=t?.content,o=t?.answer||t?.correctAnswer||t?.correct_answer,s=t?.total_points?parseFloat(t.total_points):t?.points||n?.points||o?.points||5,i=t?.explanation||n?.explanation||o?.explanation||"",a=()=>{const t=o?.expectedAnswers;if(Array.isArray(t)&&t.length>0)return t;const e=o?.sampleAnswers;if(Array.isArray(e)&&e.length>0)return e;const n=o?.sampleAnswer;return n?[n]:[""]};return n&&"object"==typeof n&&void 0!==n.inputType?e={inputType:n.inputType||"TEXT",audioUrl:n.audioUrl||"",questionText:n.questionText||"",sampleAnswers:a(),explanation:i,points:s}:o&&"object"==typeof o&&(e={...o,inputType:o.inputType||n?.inputType||"TEXT",audioUrl:o.audioUrl||n?.audioUrl||"",questionText:o.questionText||n?.questionText||"",sampleAnswers:a(),explanation:i,points:s}),e},getExtraProps:t=>({onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef}),wrapOnSave:(t,e)=>{const n=(t.sampleAnswers||[]).filter(t=>t&&""!==t.trim());return{type:e.questionType,content:{..."object"==typeof e.state.content&&null!==e.state.content?e.state.content:{},inputType:t.inputType,audioUrl:t.audioUrl||"",questionText:"TEXT"===t.inputType?t.questionText:void 0},points:t?.points??e.state.points??5,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:{expectedAnswers:n},explanation:t?.explanation||""}},wrapOnChange:(t,e)=>{const n=t.sampleAnswers||[""];return{type:e.questionType,content:{..."object"==typeof e.state.content&&null!==e.state.content?e.state.content:{},inputType:t.inputType,audioUrl:t.audioUrl||"",questionText:"TEXT"===t.inputType?t.questionText:void 0},points:t?.points??e.state.points??5,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:{expectedAnswers:n},explanation:t?.explanation||""}}};
+import { SpontaneousQACreator } from './SpontaneousQACreator';
+export const spontaneousQARegistration = {
+    component: SpontaneousQACreator,
+    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 || 5);
+        const explanation = initialData?.explanation || content?.explanation || answer?.explanation || '';
+        // Backward compat: convert old sampleAnswer/sampleAnswers to expectedAnswers (array)
+        const normalizeSampleAnswers = () => {
+            const newArr = answer?.expectedAnswers;
+            if (Array.isArray(newArr) && newArr.length > 0)
+                return newArr;
+            const arr = answer?.sampleAnswers;
+            if (Array.isArray(arr) && arr.length > 0)
+                return arr;
+            const single = answer?.sampleAnswer;
+            if (single)
+                return [single];
+            return [''];
+        };
+        if (content && typeof content === 'object' && content.inputType !== undefined) {
+            creatorData = {
+                inputType: content.inputType || 'TEXT',
+                audioUrl: content.audioUrl || '',
+                questionText: content.questionText || '',
+                sampleAnswers: normalizeSampleAnswers(),
+                explanation,
+                points,
+            };
+        }
+        else if (answer && typeof answer === 'object') {
+            creatorData = {
+                ...answer,
+                inputType: answer.inputType || content?.inputType || 'TEXT',
+                audioUrl: answer.audioUrl || content?.audioUrl || '',
+                questionText: answer.questionText || content?.questionText || '',
+                sampleAnswers: normalizeSampleAnswers(),
+                explanation,
+                points,
+            };
+        }
+        return creatorData;
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => {
+        // Filter out empty sample answers
+        const expectedAnswers = (data.sampleAnswers || []).filter((s) => s && s.trim() !== '');
+        return {
+            type: ctx.questionType,
+            content: {
+                ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+                inputType: data.inputType,
+                audioUrl: data.audioUrl || '',
+                questionText: data.inputType === 'TEXT' ? data.questionText : undefined,
+            },
+            points: data?.points ?? ctx.state.points ?? 5,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: {
+                expectedAnswers,
+            },
+            explanation: data?.explanation || '',
+        };
+    },
+    wrapOnChange: (data, ctx) => {
+        const expectedAnswers = data.sampleAnswers || [''];
+        return {
+            type: ctx.questionType,
+            content: {
+                ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+                inputType: data.inputType,
+                audioUrl: data.audioUrl || '',
+                questionText: data.inputType === 'TEXT' ? data.questionText : undefined,
+            },
+            points: data?.points ?? ctx.state.points ?? 5,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: {
+                expectedAnswers,
+            },
+            explanation: data?.explanation || '',
+        };
+    },
+};

package/dist/components/questions/types/spontaneous-qa/transform.js

@@ -1 +1,34 @@
-export const transformSpontaneousQA=r=>{const e=r.content,t=r.answer,n=e?.inputType||"TEXT",s={inputType:n,audioUrl:e?.audioUrl||""};"TEXT"===n&&e?.questionText&&(s.questionText=e.questionText);return{apiContent:s,apiCorrectAnswer:{expectedAnswers:(()=>{const r=t?.expectedAnswers;if(Array.isArray(r))return r.filter(r=>r&&""!==r.trim());const e=t?.sampleAnswers;if(Array.isArray(e))return e.filter(r=>r&&""!==r.trim());const n=t?.sampleAnswer;return n&&""!==n.trim()?[n]:[]})()}}};
+export const transformSpontaneousQA = (question) => {
+    const contentData = question.content;
+    const answerData = question.answer;
+    const inputType = contentData?.inputType || 'TEXT';
+    const apiContent = {
+        inputType,
+        // Always include audioUrl — populated when AUDIO, empty string when TEXT
+        audioUrl: contentData?.audioUrl || '',
+    };
+    // Include questionText when inputType is TEXT
+    if (inputType === 'TEXT' && contentData?.questionText) {
+        apiContent.questionText = contentData.questionText;
+    }
+    // Normalize: support both expectedAnswers, sampleAnswers (array) and legacy sampleAnswer (string)
+    const expectedAnswers = (() => {
+        const newArr = answerData?.expectedAnswers;
+        if (Array.isArray(newArr))
+            return newArr.filter((s) => s && s.trim() !== '');
+        const arr = answerData?.sampleAnswers;
+        if (Array.isArray(arr))
+            return arr.filter((s) => s && s.trim() !== '');
+        const single = answerData?.sampleAnswer;
+        if (single && single.trim() !== '')
+            return [single];
+        return [];
+    })();
+    const apiCorrectAnswer = {
+        expectedAnswers,
+    };
+    return {
+        apiContent,
+        apiCorrectAnswer,
+    };
+};

package/dist/components/questions/types/spontaneous-qa-group/SpontaneousQaGroupClient.d.ts

@@ -0,0 +1,2 @@
+import type { SpontaneousQaGroupClientProps } from '../../_shared/types/spontaneous-qa-group.type';
+export declare function SpontaneousQaGroupClient({ questionData, }: SpontaneousQaGroupClientProps): import("react").JSX.Element;

package/dist/components/questions/types/spontaneous-qa-group/SpontaneousQaGroupClient.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleHelp, Lightbulb } from 'lucide-react';
+export function SpontaneousQaGroupClient({ questionData, }) {
+    const parts = questionData.parts || [];
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), parts.map((part, partIndex) => (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "border-b border-gray-100 bg-gradient-to-r from-slate-50 to-white px-4 py-3", children: [_jsx("p", { className: "text-sm font-semibold text-slate-800", children: part.partTitle || `PART ${part.partNumber || partIndex + 1}` }), part.topic && (_jsx("p", { className: "mt-1 text-sm text-slate-600", children: part.topic }))] }), _jsx("div", { className: "space-y-3 p-4", children: part.questions.map((question, questionIndex) => (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-3", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-blue-100 text-blue-700", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", question.questionNumber || questionIndex + 1] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [question.points || 0, " \u0111i\u1EC3m"] })] }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: question.questionText || 'Câu hỏi chưa được nhập' }), question.expectedAnswers.filter((item) => item.trim() !== '').length > 0 && (_jsxs("div", { className: "mt-2 rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "mb-1 flex items-center gap-1 text-xs font-semibold text-amber-700", children: [_jsx(Lightbulb, { className: "h-3 w-3" }), "\u0110\u00E1p \u00E1n m\u1EABu"] }), _jsx("ul", { className: "list-disc space-y-1 pl-4 text-xs text-amber-800", children: question.expectedAnswers
+                                                .filter((item) => item.trim() !== '')
+                                                .map((item) => (_jsx("li", { children: item }, item))) })] }))] }, `${part.partNumber}-${question.questionNumber}-${questionIndex}`))) })] }, `part-${part.partNumber}-${partIndex}`)))] }));
+}

package/dist/components/questions/types/spontaneous-qa-group/SpontaneousQaGroupCreator.d.ts

@@ -0,0 +1,2 @@
+import type { SpontaneousQaGroupCreatorProps } from '../../_shared/types/spontaneous-qa-group.type';
+export declare function SpontaneousQaGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }: SpontaneousQaGroupCreatorProps): import("react").JSX.Element;

package/dist/components/questions/types/spontaneous-qa-group/SpontaneousQaGroupCreator.js

@@ -0,0 +1,179 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { toast } from 'sonner';
+import { Eye, Mic, Pencil, Plus, Trash2, Type, Volume2 } from 'lucide-react';
+import { SpontaneousQaGroupClient } from './SpontaneousQaGroupClient';
+import { createEmptyPart, createEmptyQuestion, normalizeParts, sumPartPoints, } from './creator-helpers';
+export function SpontaneousQaGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    const [instruction, setInstruction] = useState(initialData?.instruction || 'In pairs, ask and answer the questions.');
+    const [parts, setParts] = useState(() => normalizeParts(initialData?.parts));
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [errors, setErrors] = useState([]);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const buildPayload = (nextInstruction = instruction, nextParts = parts, nextExplanation = explanation) => ({
+        instruction: nextInstruction,
+        parts: nextParts,
+        explanation: nextExplanation,
+        points: sumPartPoints(nextParts),
+    });
+    const debouncedOnChange = useDebouncedCallback((payload) => {
+        onChangeRef.current?.(payload);
+    }, 300);
+    useEffect(() => {
+        const payload = buildPayload();
+        const serialized = JSON.stringify(payload);
+        if (serialized === previousPayloadRef.current) {
+            return;
+        }
+        previousPayloadRef.current = serialized;
+        onUnsavedChangesChange?.(true);
+        debouncedOnChange(payload);
+    }, [instruction, parts, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    const validate = () => {
+        const nextErrors = [];
+        if (!instruction.trim()) {
+            nextErrors.push('Vui lòng nhập hướng dẫn.');
+        }
+        if (parts.length < 1) {
+            nextErrors.push('Cần ít nhất một part.');
+        }
+        parts.forEach((part, partIndex) => {
+            if (part.questions.length < 1) {
+                nextErrors.push(`Part ${partIndex + 1}: cần ít nhất một câu hỏi.`);
+            }
+            part.questions.forEach((question, questionIndex) => {
+                if (!question.questionText.trim()) {
+                    nextErrors.push(`Part ${partIndex + 1}, câu ${questionIndex + 1}: nội dung câu hỏi là bắt buộc.`);
+                }
+            });
+        });
+        return nextErrors;
+    };
+    useEffect(() => {
+        if (!validationRef) {
+            return;
+        }
+        validationRef.current = {
+            triggerValidation: async () => {
+                const nextErrors = validate();
+                setErrors(nextErrors);
+                return nextErrors.length === 0;
+            },
+            getFormData: () => buildPayload(),
+        };
+    });
+    const updatePart = (partIndex, patch) => {
+        setParts((current) => current.map((part, index) => (index === partIndex ? { ...part, ...patch } : part)));
+    };
+    const updateQuestion = (partIndex, questionIndex, patch) => {
+        setParts((current) => current.map((part, index) => {
+            if (index !== partIndex) {
+                return part;
+            }
+            return {
+                ...part,
+                questions: part.questions.map((question, currentQuestionIndex) => (currentQuestionIndex === questionIndex ? { ...question, ...patch } : question)),
+            };
+        }));
+    };
+    const addPart = () => {
+        setParts((current) => [...current, createEmptyPart(current.length + 1)]);
+    };
+    const removePart = (partIndex) => {
+        setParts((current) => {
+            if (current.length <= 1) {
+                return current;
+            }
+            return current
+                .filter((_, index) => index !== partIndex)
+                .map((part, index) => ({ ...part, partNumber: index + 1 }));
+        });
+    };
+    const addQuestion = (partIndex) => {
+        setParts((current) => current.map((part, index) => {
+            if (index !== partIndex) {
+                return part;
+            }
+            return {
+                ...part,
+                questions: [...part.questions, createEmptyQuestion(part.questions.length + 1)],
+            };
+        }));
+    };
+    const removeQuestion = (partIndex, questionIndex) => {
+        setParts((current) => current.map((part, index) => {
+            if (index !== partIndex || part.questions.length <= 1) {
+                return part;
+            }
+            return {
+                ...part,
+                questions: part.questions
+                    .filter((_, currentQuestionIndex) => currentQuestionIndex !== questionIndex)
+                    .map((question, currentQuestionIndex) => ({
+                    ...question,
+                    questionNumber: currentQuestionIndex + 1,
+                })),
+            };
+        }));
+    };
+    const updateExpectedAnswer = (partIndex, questionIndex, answerIndex, value) => {
+        setParts((current) => current.map((part, index) => {
+            if (index !== partIndex) {
+                return part;
+            }
+            return {
+                ...part,
+                questions: part.questions.map((question, currentQuestionIndex) => {
+                    if (currentQuestionIndex !== questionIndex) {
+                        return question;
+                    }
+                    const nextAnswers = [...question.expectedAnswers];
+                    nextAnswers[answerIndex] = value;
+                    return { ...question, expectedAnswers: nextAnswers };
+                }),
+            };
+        }));
+    };
+    const addExpectedAnswer = (partIndex, questionIndex) => {
+        setParts((current) => current.map((part, index) => {
+            if (index !== partIndex) {
+                return part;
+            }
+            return {
+                ...part,
+                questions: part.questions.map((question, currentQuestionIndex) => (currentQuestionIndex === questionIndex
+                    ? { ...question, expectedAnswers: [...question.expectedAnswers, ''] }
+                    : question)),
+            };
+        }));
+    };
+    const handleGenerateAudio = () => {
+        toast.error('TTS chưa được tích hợp trong component SDK');
+    };
+    if (isClientMode) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Ch\u1EC9nh s\u1EEDa"] }) }), _jsx(SpontaneousQaGroupClient, { questionData: buildPayload(), isReviewMode: true })] }));
+    }
+    const allErrors = [...errors, ...(externalErrors || [])];
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(true), children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] }) }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Nh\u00F3m h\u1ECFi \u0111\u00E1p t\u1EF1 ph\u00E1t" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "group-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: "In pairs, ask and answer the questions." })] }), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: [_jsx(PointsInput, { value: sumPartPoints(parts), allowZero: true, readOnly: true }), _jsx("p", { className: "mt-2 text-xs text-gray-500", children: "T\u1ED5ng \u0111i\u1EC3m \u0111\u01B0\u1EE3c c\u1ED9ng t\u1EEB \u0111i\u1EC3m t\u1EEBng c\u00E2u trong t\u1EA5t c\u1EA3 part." })] })] })] }), parts.map((part, partIndex) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsxs(CardTitle, { className: "text-base", children: ["Part ", partIndex + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removePart(partIndex), disabled: parts.length <= 1, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Ti\u00EAu \u0111\u1EC1 part" }), _jsx(Input, { value: part.partTitle, onChange: (event) => updatePart(partIndex, { partTitle: event.target.value }), placeholder: "PART 1" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Ch\u1EE7 \u0111\u1EC1" }), _jsx(Input, { value: part.topic, onChange: (event) => updatePart(partIndex, { topic: event.target.value }), placeholder: "Talk about school." })] })] }), part.questions.map((question, questionIndex) => (_jsxs("div", { className: "space-y-3 rounded-xl border border-slate-200 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "text-sm font-semibold text-slate-700", children: ["C\u00E2u ", questionIndex + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeQuestion(partIndex, questionIndex), disabled: part.questions.length <= 1, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex w-fit rounded-lg border border-slate-200 bg-slate-100 p-1", children: [_jsxs("button", { type: "button", onClick: () => updateQuestion(partIndex, questionIndex, { inputType: 'AUDIO' }), className: `flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium ${question.inputType === 'AUDIO' ? 'bg-white text-blue-700 shadow-sm' : 'text-slate-500'}`, children: [_jsx(Mic, { className: "h-3.5 w-3.5" }), " Audio"] }), _jsxs("button", { type: "button", onClick: () => updateQuestion(partIndex, questionIndex, { inputType: 'TEXT' }), className: `flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium ${question.inputType === 'TEXT' ? 'bg-white text-emerald-700 shadow-sm' : 'text-slate-500'}`, children: [_jsx(Type, { className: "h-3.5 w-3.5" }), " Text (TTS)"] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "C\u00E2u h\u1ECFi" }), _jsx(Textarea, { value: question.questionText, onChange: (event) => updateQuestion(partIndex, questionIndex, {
+                                                    questionText: event.target.value,
+                                                }), rows: 2, placeholder: "Do you like your timetable at school? Why?/Why not?" })] }), question.inputType === 'AUDIO' ? (_jsx(FileUpload, { id: `audio-${partIndex}-${questionIndex}`, label: "File audio c\u00E2u h\u1ECFi", accept: "audio/*", value: question.audioUrl, onChange: (url) => updateQuestion(partIndex, questionIndex, { audioUrl: url }), maxSize: 20, placeholder: "T\u1EA3i l\u00EAn file audio (MP3, WAV...)", autoUpload: true, prefix: "speaking/spontaneous-qa-group" })) : (_jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: !question.questionText.trim(), onClick: handleGenerateAudio, children: [_jsx(Volume2, { className: "mr-2 h-3.5 w-3.5" }), "T\u1EA1o Audio"] })), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "\u0110\u00E1p \u00E1n m\u1EABu" }), question.expectedAnswers.map((answer, answerIndex) => (_jsx(Input, { value: answer, onChange: (event) => updateExpectedAnswer(partIndex, questionIndex, answerIndex, event.target.value), placeholder: "\u0110\u00E1p \u00E1n m\u1EABu cho AI ch\u1EA5m" }, `ans-${partIndex}-${questionIndex}-${answerIndex}`))), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => addExpectedAnswer(partIndex, questionIndex), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n m\u1EABu"] })] }), _jsx(PointsInput, { value: question.points, allowZero: true, onChange: (event) => {
+                                            const parsed = Number.parseInt(event.target.value.replace(/[^0-9]/g, ''), 10);
+                                            updateQuestion(partIndex, questionIndex, {
+                                                points: Number.isNaN(parsed) ? 0 : Math.max(0, parsed),
+                                            });
+                                        } })] }, `q-${partIndex}-${questionIndex}`))), _jsxs(Button, { type: "button", variant: "outline", onClick: () => addQuestion(partIndex), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Th\u00EAm c\u00E2u h\u1ECFi"] })] })] }, `part-${partIndex}`))), _jsxs(Button, { type: "button", variant: "outline", onClick: addPart, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Th\u00EAm part"] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Gi\u1EA3i th\u00EDch" }), _jsx(Textarea, { value: explanation, onChange: (event) => setExplanation(event.target.value), rows: 3, placeholder: "Gi\u1EA3i th\u00EDch th\u00EAm v\u1EC1 c\u00E2u tr\u1EA3 l\u1EDDi k\u1EF3 v\u1ECDng, d\u00F9ng khi review k\u1EBFt qu\u1EA3..." })] }), allErrors.length > 0 && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: allErrors.map((error) => (_jsx("p", { children: error }, error))) }))] }));
+}