@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

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

@@ -1,16 +1 @@
-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;
-};
+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}}};

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

@@ -1,234 +1 @@
-'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" }) })] })] }));
-}
+"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"})})]})]})}

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

@@ -1,93 +1 @@
-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 || '',
-        };
-    },
-};
+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||""}}};

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

@@ -1,34 +1 @@
-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,
-    };
-};
+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]:[]})()}}};

package/dist/components/questions/types/true-false/TrueFalseClient.js

@@ -1,75 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { Check, X, CircleHelp } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { cn } from '../../../../shared/lib/utils';
-export function TrueFalseClient({ questionData, onSubmit, isReviewMode = false, userAnswer, }) {
-    const [selectedAnswer, setSelectedAnswer] = useState(userAnswer !== undefined ? userAnswer : undefined);
-    // Presigned URL for image
-    const { previewUrl: imagePreviewUrl, isLoading } = usePresignedFileUrl(questionData.imageUrl || '');
-    // Sync userAnswer
-    useEffect(() => {
-        if (userAnswer !== undefined) {
-            setSelectedAnswer(userAnswer);
-        }
-    }, [userAnswer]);
-    // Handle answer change
-    const handleAnswerChange = (value) => {
-        if (isReviewMode)
-            return;
-        setSelectedAnswer(value);
-        onSubmit?.(value);
-    };
-    const hasAnswered = selectedAnswer !== undefined;
-    const isAnswerCorrect = isReviewMode && selectedAnswer === questionData.answer;
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white 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-emerald-500 to-teal-600 text-white shadow-sm", children: _jsx(CircleHelp, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u0110\u00FAng / Sai" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAnswerCorrect
-                                ? 'bg-green-100 text-green-700'
-                                : 'bg-red-100 text-red-700'), children: [isAnswerCorrect ? (_jsx(Check, { className: "h-3.5 w-3.5" })) : (_jsx(X, { className: "h-3.5 w-3.5" })), isAnswerCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-5 p-5", children: [_jsx("div", { className: "rounded-lg border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4", children: _jsx("h3", { className: "text-base font-semibold leading-relaxed text-gray-800", children: questionData.question || 'Chưa nhập câu hỏi' }) }), (imagePreviewUrl || questionData.imageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" }) })) : (
-                                    /* eslint-disable-next-line @next/next/no-img-element */
-                                    _jsx("img", { src: imagePreviewUrl || questionData.imageUrl, alt: "Question illustration", className: "max-h-56 w-auto rounded-md object-contain" })) })] })), _jsxs("div", { className: "space-y-2.5", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-gray-500", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("button", { type: "button", onClick: () => handleAnswerChange(true), disabled: isReviewMode, className: cn('group flex items-center justify-center gap-3 rounded-xl border-2 p-4 transition-all', isReviewMode
-                                                ? questionData.answer === true
-                                                    ? 'border-green-400 bg-green-50'
-                                                    : selectedAnswer === true
-                                                        ? 'border-red-400 bg-red-50'
-                                                        : 'border-gray-200 bg-gray-50'
-                                                : selectedAnswer === true
-                                                    ? 'border-emerald-500 bg-emerald-50 shadow-sm ring-2 ring-emerald-100'
-                                                    : 'border-gray-200 bg-white hover:border-emerald-300 hover:bg-emerald-50/50 hover:shadow-sm'), children: [_jsx("div", { className: cn('flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-all', isReviewMode
-                                                        ? questionData.answer === true
-                                                            ? 'bg-green-500 text-white'
-                                                            : selectedAnswer === true
-                                                                ? 'bg-red-500 text-white'
-                                                                : 'bg-gray-200 text-gray-600'
-                                                        : selectedAnswer === true
-                                                            ? 'bg-emerald-500 text-white shadow-sm'
-                                                            : 'bg-gray-100 text-gray-500 group-hover:bg-emerald-100 group-hover:text-emerald-600'), children: _jsx(Check, { className: "h-4 w-4" }) }), _jsx("span", { className: cn('text-base font-semibold', isReviewMode && questionData.answer === true
-                                                        ? 'text-green-800'
-                                                        : isReviewMode && selectedAnswer === true
-                                                            ? 'text-red-800'
-                                                            : selectedAnswer === true
-                                                                ? 'text-emerald-700'
-                                                                : 'text-gray-600'), children: "\u0110\u00FAng (True)" }), isReviewMode && (questionData.answer === true || selectedAnswer === true) && (_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-full', questionData.answer === true ? 'bg-green-500' : 'bg-red-500'), children: questionData.answer === true ? (_jsx(Check, { className: "h-4 w-4 text-white" })) : (_jsx(X, { className: "h-4 w-4 text-white" })) }))] }), _jsxs("button", { type: "button", onClick: () => handleAnswerChange(false), disabled: isReviewMode, className: cn('group flex items-center justify-center gap-3 rounded-xl border-2 p-4 transition-all', isReviewMode
-                                                ? questionData.answer === false
-                                                    ? 'border-green-400 bg-green-50'
-                                                    : selectedAnswer === false
-                                                        ? 'border-red-400 bg-red-50'
-                                                        : 'border-gray-200 bg-gray-50'
-                                                : selectedAnswer === false
-                                                    ? 'border-red-500 bg-red-50 shadow-sm ring-2 ring-red-100'
-                                                    : 'border-gray-200 bg-white hover:border-red-300 hover:bg-red-50/50 hover:shadow-sm'), children: [_jsx("div", { className: cn('flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-all', isReviewMode
-                                                        ? questionData.answer === false
-                                                            ? 'bg-green-500 text-white'
-                                                            : selectedAnswer === false
-                                                                ? 'bg-red-500 text-white'
-                                                                : 'bg-gray-200 text-gray-600'
-                                                        : selectedAnswer === false
-                                                            ? 'bg-red-500 text-white shadow-sm'
-                                                            : 'bg-gray-100 text-gray-500 group-hover:bg-red-100 group-hover:text-red-600'), children: _jsx(X, { className: "h-4 w-4" }) }), _jsx("span", { className: cn('text-base font-semibold', isReviewMode && questionData.answer === false
-                                                        ? 'text-green-800'
-                                                        : isReviewMode && selectedAnswer === false
-                                                            ? 'text-red-800'
-                                                            : selectedAnswer === false
-                                                                ? 'text-red-700'
-                                                                : 'text-gray-600'), children: "Sai (False)" }), isReviewMode && (questionData.answer === false || selectedAnswer === false) && (_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-full', questionData.answer === false ? 'bg-green-500' : 'bg-red-500'), children: questionData.answer === false ? (_jsx(Check, { className: "h-4 w-4 text-white" })) : (_jsx(X, { className: "h-4 w-4 text-white" })) }))] })] })] }), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-xs font-bold", children: "!" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng ch\u1ECDn \u0111\u00E1p \u00E1n" })] })), isReviewMode && questionData.explanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-blue-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-blue-800", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "mt-1 text-sm text-blue-700", children: questionData.explanation })] }))] })] }) }));
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as a}from"react";import{Check as s,X as d,CircleHelp as l}from"lucide-react";import{usePresignedFileUrl as n}from"../../../../shared/lib/hooks";import{cn as i}from"../../../../shared/lib/utils";export function TrueFalseClient({questionData:o,onSubmit:c,isReviewMode:m=!1,userAnswer:g}){const[b,h]=t(void 0!==g?g:void 0),{previewUrl:x,isLoading:u}=n(o.imageUrl||"");a(()=>{void 0!==g&&h(g)},[g]);const w=e=>{m||(h(e),c?.(e))},f=void 0!==b,p=m&&b===o.answer;return e("div",{className:"space-y-4",children:r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white 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-emerald-500 to-teal-600 text-white shadow-sm",children:e(l,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Đúng / Sai"})]}),m&&f&&r("div",{className:i("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",p?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(p?s:d,{className:"h-3.5 w-3.5"}),p?"Đúng":"Sai"]})]}),r("div",{className:"space-y-5 p-5",children:[e("div",{className:"rounded-lg border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4",children:e("h3",{className:"text-base font-semibold leading-relaxed text-gray-800",children:o.question||"Chưa nhập câu hỏi"})}),(x||o.imageUrl)&&r("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100",children:[e("div",{className:"border-b border-gray-100 px-3 py-1.5",children:r("div",{className:"flex items-center gap-1.5",children:[e("div",{className:"h-2 w-2 rounded-full bg-red-400"}),e("div",{className:"h-2 w-2 rounded-full bg-yellow-400"}),e("div",{className:"h-2 w-2 rounded-full bg-green-400"}),e("span",{className:"ml-2 text-xs font-medium text-gray-500",children:"Hình ảnh"})]})}),e("div",{className:"flex items-center justify-center p-4",children:u?e("div",{className:"flex h-48 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500"})}):e("img",{src:x||o.imageUrl,alt:"Question illustration",className:"max-h-56 w-auto rounded-md object-contain"})})]}),r("div",{className:"space-y-2.5",children:[e("span",{className:"text-xs font-medium uppercase tracking-wider text-gray-500",children:"Chọn đáp án"}),r("div",{className:"grid grid-cols-2 gap-4",children:[r("button",{type:"button",onClick:()=>w(!0),disabled:m,className:i("group flex items-center justify-center gap-3 rounded-xl border-2 p-4 transition-all",m?!0===o.answer?"border-green-400 bg-green-50":!0===b?"border-red-400 bg-red-50":"border-gray-200 bg-gray-50":!0===b?"border-emerald-500 bg-emerald-50 shadow-sm ring-2 ring-emerald-100":"border-gray-200 bg-white hover:border-emerald-300 hover:bg-emerald-50/50 hover:shadow-sm"),children:[e("div",{className:i("flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-all",m?!0===o.answer?"bg-green-500 text-white":!0===b?"bg-red-500 text-white":"bg-gray-200 text-gray-600":!0===b?"bg-emerald-500 text-white shadow-sm":"bg-gray-100 text-gray-500 group-hover:bg-emerald-100 group-hover:text-emerald-600"),children:e(s,{className:"h-4 w-4"})}),e("span",{className:i("text-base font-semibold",m&&!0===o.answer?"text-green-800":m&&!0===b?"text-red-800":!0===b?"text-emerald-700":"text-gray-600"),children:"Đúng (True)"}),m&&(!0===o.answer||!0===b)&&e("div",{className:i("flex h-6 w-6 items-center justify-center rounded-full",!0===o.answer?"bg-green-500":"bg-red-500"),children:!0===o.answer?e(s,{className:"h-4 w-4 text-white"}):e(d,{className:"h-4 w-4 text-white"})})]}),r("button",{type:"button",onClick:()=>w(!1),disabled:m,className:i("group flex items-center justify-center gap-3 rounded-xl border-2 p-4 transition-all",m?!1===o.answer?"border-green-400 bg-green-50":!1===b?"border-red-400 bg-red-50":"border-gray-200 bg-gray-50":!1===b?"border-red-500 bg-red-50 shadow-sm ring-2 ring-red-100":"border-gray-200 bg-white hover:border-red-300 hover:bg-red-50/50 hover:shadow-sm"),children:[e("div",{className:i("flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold transition-all",m?!1===o.answer?"bg-green-500 text-white":!1===b?"bg-red-500 text-white":"bg-gray-200 text-gray-600":!1===b?"bg-red-500 text-white shadow-sm":"bg-gray-100 text-gray-500 group-hover:bg-red-100 group-hover:text-red-600"),children:e(d,{className:"h-4 w-4"})}),e("span",{className:i("text-base font-semibold",m&&!1===o.answer?"text-green-800":m&&!1===b?"text-red-800":!1===b?"text-red-700":"text-gray-600"),children:"Sai (False)"}),m&&(!1===o.answer||!1===b)&&e("div",{className:i("flex h-6 w-6 items-center justify-center rounded-full",!1===o.answer?"bg-green-500":"bg-red-500"),children:!1===o.answer?e(s,{className:"h-4 w-4 text-white"}):e(d,{className:"h-4 w-4 text-white"})})]})]})]}),!m&&!f&&r("div",{className:"flex items-center gap-2 rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3",children:[e("div",{className:"flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white",children:e("span",{className:"text-xs font-bold",children:"!"})}),e("span",{className:"text-sm text-amber-800",children:"Vui lòng chọn đáp án"})]}),m&&o.explanation&&r("div",{className:"rounded-lg border border-blue-200 bg-blue-50 p-4",children:[e("p",{className:"text-sm font-semibold text-blue-800",children:"Giải thích:"}),e("p",{className:"mt-1 text-sm text-blue-700",children:o.explanation})]})]})]})})}