@tinyweb_dev/oe-exam-sdk 0.1.0 → 0.1.2

package/dist/components/questions/types/listen-and-choose-from-answer-group/ListenAndChooseFromAnswerGroupCreator.d.ts

@@ -1,3 +1,2 @@
 import { ListenAndChooseFromAnswerGroupCreatorProps } from '../../_shared/types/listen-and-choose-from-answer-group.type';
 export declare function ListenAndChooseFromAnswerGroupCreator(props: ListenAndChooseFromAnswerGroupCreatorProps): import("react").JSX.Element;
-//# sourceMappingURL=ListenAndChooseFromAnswerGroupCreator.d.ts.map

package/dist/components/questions/types/listen-and-choose-from-answer-group/ListenAndChooseFromAnswerGroupCreator.js

@@ -1,233 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-import { Button } from '../../../../components/ui/button';
-import { Input } from '../../../../components/ui/input';
-import { Textarea } from '../../../../components/ui/textarea';
-import { Label } from '../../../../components/ui/label';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { Pencil, Eye, Play, Pause, Plus, Trash2, Music, CheckCircle2, ListChecks, ImageIcon, BookOpen } from 'lucide-react';
-import { toast } from 'sonner';
-import { FileUpload } from '../../../../components/ui/file-upload';
-import { ListenAndChooseFromAnswerGroupClient } from './ListenAndChooseFromAnswerGroupClient';
-import { usePresignedFileUrl, useAudioPreview, useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
-import { listenAndChooseFromAnswerGroupFormSchema } from '../../../../shared/lib/validation/listen-and-choose-from-answer-group.validation';
-import { useAnswerGroupQuestionGroup } from '../../_shared/hooks/useAnswerGroupQuestionGroup';
-import { generateObjectId } from '../../_shared/utils/id-generator';
-import { CreatorGuide } from '../../components/CreatorGuide';
-// ─── Sub-component: Audio preview ────────────────────────────────────────────
-function AudioPreview({ audioUrl }) {
-    const { previewUrl } = usePresignedFileUrl(audioUrl);
-    const { isPlaying, currentTime, duration, progressPercentage, handlePlayPause, handleProgressClick, formatTime, } = useAudioPreview(previewUrl);
-    if (!previewUrl)
-        return null;
-    return (_jsx("div", { className: "bg-muted/50 rounded-lg border p-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: handlePlayPause, disabled: !previewUrl, className: "h-8 w-8", children: isPlaying ? _jsx(Pause, { className: "h-3.5 w-3.5" }) : _jsx(Play, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "text-muted-foreground min-w-[70px] text-xs", children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsx("div", { className: "bg-muted relative h-1.5 flex-1 cursor-pointer rounded-full", onClick: handleProgressClick, children: _jsx("div", { className: "bg-primary absolute top-0 left-0 h-full rounded-full transition-all", style: { width: `${progressPercentage}%` } }) })] }) }));
-}
-// ─── Sub-component: Option image preview ─────────────────────────────────────
-function OptionImagePreview({ imageUrl }) {
-    const { previewUrl } = usePresignedFileUrl(imageUrl);
-    if (!previewUrl)
-        return null;
-    return (_jsx("div", { className: "mt-2 rounded-lg border border-gray-200 overflow-hidden", children: _jsx("img", { src: previewUrl, alt: "Option", className: "h-24 w-full object-contain bg-gray-50" }) }));
-}
-// ─── Main Creator Component ──────────────────────────────────────────────────
-function ListenAndChooseFromAnswerGroupCreatorContent({ initialData, onSave, onCancel, onChange, onUnsavedChangesChange, validationRef, externalErrors, groups, questionIndexInPart = 0, partId = '', }) {
-    // Shared Group Data
-    const answerGroupInitialData = {
-        options: initialData?.options || [],
-    };
-    const { isGrouped, currentGroupNumber, options, setOptions, } = useAnswerGroupQuestionGroup({
-        partId,
-        groups,
-        questionIndexInPart,
-        initialData: answerGroupInitialData,
-    });
-    // Specific Question State
-    const [audioUrl, setAudioUrl] = useState(initialData?.audioUrl || '');
-    const [correctAnswer, setCorrectAnswer] = useState(initialData?.correctAnswer !== undefined && initialData?.correctAnswer !== null
-        ? String(initialData.correctAnswer)
-        : '');
-    const [points, setPoints] = useState(initialData?.points);
-    const [explanation, setExplanation] = useState(initialData?.explanation || '');
-    const [isBackup, setIsBackup] = useState(initialData?.isBackup || false);
-    // Track previous initialData to detect changes
-    const previousInitialDataRef = useRef(initialData);
-    const isInitializingRef = useRef(false);
-    // UI State
-    const [isClientMode, setIsClientMode] = useState(false);
-    // Sync state from initialData when it changes
-    useEffect(() => {
-        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
-        if (initialDataChanged) {
-            isInitializingRef.current = true;
-            previousInitialDataRef.current = initialData;
-            if (initialData) {
-                if (initialData.audioUrl !== undefined)
-                    setAudioUrl(initialData.audioUrl);
-                if (initialData.correctAnswer !== undefined && initialData.correctAnswer !== null) {
-                    setCorrectAnswer(String(initialData.correctAnswer));
-                }
-                if (initialData.points !== undefined)
-                    setPoints(initialData.points);
-                if (initialData.explanation !== undefined)
-                    setExplanation(initialData.explanation);
-                if (initialData.isBackup !== undefined)
-                    setIsBackup(initialData.isBackup);
-            }
-            else {
-                setAudioUrl('');
-                setCorrectAnswer('');
-                setPoints(undefined);
-                setExplanation('');
-                setIsBackup(false);
-            }
-            setTimeout(() => {
-                isInitializingRef.current = false;
-            }, 100);
-        }
-    }, [initialData]);
-    const onChangeRef = useRef(onChange);
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    const debouncedOnChange = useDebouncedCallback((data) => {
-        onChangeRef.current?.(data);
-    }, 300);
-    // Notify onChange
-    useEffect(() => {
-        if (isInitializingRef.current)
-            return;
-        debouncedOnChange({
-            options,
-            audioUrl,
-            correctAnswer,
-            points,
-            explanation,
-            isBackup,
-            groups,
-            groupNumber: currentGroupNumber,
-        });
-    }, [options, audioUrl, correctAnswer, points, explanation, isBackup, groups, currentGroupNumber, debouncedOnChange]);
-    // Validation
-    const form = useReactHookForm({
-        defaultValues: {
-            options,
-            audioUrl,
-            correctAnswer,
-            points,
-            explanation,
-            isBackup,
-        },
-        zodSchema: listenAndChooseFromAnswerGroupFormSchema,
-        mode: 'onBlur',
-    });
-    useEffect(() => {
-        if (validationRef) {
-            validationRef.current = {
-                triggerValidation: async () => {
-                    form.setValue('options', options);
-                    form.setValue('audioUrl', audioUrl);
-                    form.setValue('correctAnswer', String(correctAnswer));
-                    form.setValue('points', points);
-                    form.setValue('isBackup', isBackup);
-                    const isValid = await form.trigger();
-                    if (!isValid) {
-                        return false;
-                    }
-                    return true;
-                },
-                getFormData: () => ({
-                    options,
-                    audioUrl,
-                    correctAnswer,
-                    points,
-                    explanation,
-                    isBackup,
-                    groups,
-                    groupNumber: currentGroupNumber,
-                }),
-            };
-        }
-    }, [validationRef, options, audioUrl, correctAnswer, points, explanation, isBackup, groups, currentGroupNumber, form]);
-    // ─── Option Management ──────────────────────────────────────────────────────
-    const addOption = () => {
-        const newOption = {
-            id: generateObjectId(),
-            imageUrl: '',
-            label: '',
-        };
-        setOptions([...options, newOption]);
-    };
-    const updateOptionImageUrl = (id, imageUrl) => {
-        setOptions(options.map((opt) => (opt.id === id ? { ...opt, imageUrl } : opt)));
-        form.clearErrors('options');
-    };
-    const updateOptionLabel = (id, label) => {
-        setOptions(options.map((opt) => (opt.id === id ? { ...opt, label } : opt)));
-        form.clearErrors('options');
-    };
-    const removeOption = (id) => {
-        if (options.length <= 2) {
-            toast.error('Cần tối thiểu 2 đáp án!');
-            return;
-        }
-        const newOptions = options.filter((opt) => opt.id !== id);
-        setOptions(newOptions);
-        // Clear correctAnswer if the removed option was the correct one
-        if (correctAnswer === id) {
-            setCorrectAnswer('');
-        }
-        form.clearErrors('options');
-    };
-    // ─── Client Mode Preview ──────────────────────────────────────────────────
-    if (isClientMode) {
-        const questionData = {
-            options,
-            audioUrl,
-            correctAnswer,
-            points,
-            explanation,
-            isBackup,
-        };
-        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Nghe v\u00E0 ch\u1ECDn trong nh\u00F3m \u0111\u00E1p \u00E1n (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(ListenAndChooseFromAnswerGroupClient, { questionData: questionData, onSubmit: () => { }, isReviewMode: true, userAnswer: correctAnswer || undefined, correctAnswer: correctAnswer || undefined, explanation: explanation })] }));
-    }
-    // ─── Creator UI ────────────────────────────────────────────────────────────
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "orange", steps: [
-                    { text: 'Upload các hình ảnh lựa chọn (options) cho nhóm — học sinh sẽ chọn đáp án đúng' },
-                    { text: 'Mỗi option cần có hình ảnh và nhãn mô tả' },
-                    { text: 'Upload audio câu hỏi cho từng câu' },
-                    { text: 'Chọn đáp án đúng (correct answer) từ danh sách options', highlight: true },
-                ], tips: ['Nên có ít nhất 3-4 options để tạo sự phân biệt rõ ràng'] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500 to-amber-600 shadow-md", children: _jsx(ListChecks, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Nh\u00F3m \u0111\u00E1p \u00E1n" }), _jsxs("div", { className: "mt-1.5 inline-flex items-center gap-1.5 rounded-full bg-orange-100 px-3 py-1 text-sm font-medium text-orange-700", children: [_jsx("span", { children: "\uD83D\uDDBC\uFE0F" }), _jsxs("span", { children: ["Nh\u00F3m ", currentGroupNumber] }), _jsx("span", { className: "text-xs font-normal opacity-75 ml-1", children: "(D\u00F9ng chung)" })] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: options.filter((o) => o.imageUrl).length < 2 || !audioUrl, className: "gap-2 border-orange-200 text-orange-600 hover:bg-orange-50 hover:text-orange-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Preview"] })] }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsxs(CardHeader, { className: "pb-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-amber-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-amber-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["Nh\u00F3m \u0111\u00E1p \u00E1n (", options.length, " \u0111\u00E1p \u00E1n)"] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addOption, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }), form.formState.errors.options?.root && (_jsx("div", { className: "px-4 pb-2", children: _jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.options.root.message }) }))] }), _jsxs(CardContent, { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [options.map((option, index) => (_jsxs(Card, { className: "border border-gray-200", children: [_jsx(CardHeader, { className: "pb-2 pt-3 px-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 text-white text-sm font-bold shadow-sm", children: String.fromCharCode(65 + index) }), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["\u0110\u00E1p \u00E1n ", String.fromCharCode(65 + index)] })] }), options.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => removeOption(option.id), className: "h-7 w-7 p-0 text-red-500 hover:text-red-700 hover:bg-red-50", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("div", { children: [_jsx(FileUpload, { id: `option-image-${option.id}`, label: "\u1EA2nh \u0111\u00E1p \u00E1n", accept: "image/*", value: option.imageUrl, onChange: (url) => updateOptionImageUrl(option.id, url), maxSize: 5, placeholder: "Upload \u1EA3nh cho \u0111\u00E1p \u00E1n", required: true, autoUpload: true, prefix: "questions" }), form.formState.errors.options?.[index]?.imageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.options[index].imageUrl.message })), option.imageUrl && _jsx(OptionImagePreview, { imageUrl: option.imageUrl })] }), _jsxs("div", { children: [_jsx(Label, { className: "font-medium", children: "Nh\u00E3n" }), _jsx(Input, { value: option.label || '', onChange: (e) => updateOptionLabel(option.id, e.target.value), placeholder: "Nh\u1EADp label / m\u00F4 t\u1EA3 ng\u1EAFn", className: "mt-1" })] })] })] }, option.id))), options.length === 0 && (_jsxs("div", { className: "col-span-1 md:col-span-2 flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-amber-300 p-8 bg-amber-50/50", children: [_jsx(ImageIcon, { className: "h-10 w-10 text-amber-400 mb-2" }), _jsx("p", { className: "text-sm text-gray-500 mb-3", children: "Ch\u01B0a c\u00F3 \u0111\u00E1p \u00E1n n\u00E0o" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: addOption, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n \u0111\u1EA7u ti\u00EAn"] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 to-purple-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Music, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "C\u00E2u h\u1ECFi" })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [_jsxs("div", { className: "flex-1", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-700 mb-2 block", children: "\u0110i\u1EC3m *" }), _jsx(Input, { type: "number", min: 1, value: points ?? '', onChange: (e) => {
-                                                        const val = e.target.value;
-                                                        setPoints(val === '' ? undefined : parseInt(val, 10));
-                                                        form.clearErrors('points');
-                                                    }, placeholder: "Nh\u1EADp \u0111i\u1EC3m s\u1ED1", className: `w-40 bg-white ${form.formState.errors.points ? 'border-red-500' : ''}` }), form.formState.errors.points && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.points.message }))] }), _jsx("div", { className: "flex-1 flex flex-col justify-center pt-2" })] }) }), _jsxs("div", { children: [_jsx(FileUpload, { id: "question-audio", label: "File \u00E2m thanh", accept: "audio/*", value: audioUrl, onChange: (url) => {
-                                            setAudioUrl(url);
-                                            form.clearErrors('audioUrl');
-                                        }, maxSize: 10, placeholder: "Upload file audio", required: true, autoUpload: true, prefix: "questions" }), form.formState.errors.audioUrl && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.audioUrl.message })), audioUrl && _jsx(AudioPreview, { audioUrl: audioUrl })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-sm font-semibold text-gray-700 mb-2 block", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng *" }), options.filter((o) => o.imageUrl).length > 0 ? (_jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", children: options.map((option, optIndex) => {
-                                            if (!option.imageUrl)
-                                                return null;
-                                            const isSelected = correctAnswer === option.id;
-                                            return (_jsxs("button", { type: "button", onClick: () => {
-                                                    setCorrectAnswer(option.id);
-                                                    form.clearErrors('correctAnswer');
-                                                }, className: `relative text-left rounded-xl border-2 p-2 transition-all ${isSelected
-                                                    ? 'border-green-500 bg-green-50 ring-2 ring-green-200 shadow-md'
-                                                    : 'border-gray-200 hover:border-gray-400 hover:shadow-sm'}`, children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: `flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold shadow-sm ${isSelected
-                                                                    ? 'bg-green-500 text-white'
-                                                                    : 'bg-gray-100 text-gray-600'}`, children: String.fromCharCode(65 + optIndex) }), _jsx(OptionImagePreviewInline, { imageUrl: option.imageUrl }), option.label && (_jsx("p", { className: `text-xs text-center ${isSelected ? 'text-green-700 font-medium' : 'text-gray-600'}`, children: option.label }))] }), isSelected && (_jsx("div", { className: "absolute top-1 right-1", children: _jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" }) }))] }, option.id));
-                                        }) })) : (_jsx("p", { className: "text-sm text-amber-600 italic", children: "Vui l\u00F2ng upload \u1EA3nh cho \u0111\u00E1p \u00E1n \u1EDF ph\u1EA7n tr\u00EAn tr\u01B0\u1EDBc" })), form.formState.errors.correctAnswer && (_jsx("div", { className: "mt-3 rounded-lg border border-red-200 bg-red-50 p-3", children: _jsxs("p", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", form.formState.errors.correctAnswer.message] }) })), !form.formState.errors.correctAnswer && !correctAnswer && options.filter((o) => o.imageUrl).length > 0 && (_jsx("p", { className: "mt-1 text-xs text-amber-600", children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }))] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
-}
-// ─── Inline image preview (for correct answer selection) ─────────────────────
-function OptionImagePreviewInline({ imageUrl }) {
-    const { previewUrl } = usePresignedFileUrl(imageUrl);
-    if (!previewUrl) {
-        return (_jsx("div", { className: "flex h-16 w-full items-center justify-center rounded-lg bg-gray-100", children: _jsx(ImageIcon, { className: "h-6 w-6 text-gray-300" }) }));
-    }
-    return (_jsx("img", { src: previewUrl, alt: "Option", className: "h-16 w-full rounded-lg object-contain bg-gray-50" }));
-}
-export function ListenAndChooseFromAnswerGroupCreator(props) {
-    return _jsx(ListenAndChooseFromAnswerGroupCreatorContent, { ...props });
-}
-//# sourceMappingURL=ListenAndChooseFromAnswerGroupCreator.js.map
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useRef as a,useEffect as n}from"react";import{Button as i}from"../../../../components/ui/button";import{Input as o}from"../../../../components/ui/input";import{Textarea as s}from"../../../../components/ui/textarea";import{Label as l}from"../../../../components/ui/label";import{Card as c,CardContent as d,CardHeader as m,CardTitle as h}from"../../../../components/ui/card";import{Pencil as g,Eye as p,Play as u,Pause as f,Plus as b,Trash2 as x,Music as N,CheckCircle2 as v,ListChecks as w,ImageIcon as y,BookOpen as U}from"lucide-react";import{toast as C}from"sonner";import{FileUpload as S}from"../../../../components/ui/file-upload";import{ListenAndChooseFromAnswerGroupClient as k}from"./ListenAndChooseFromAnswerGroupClient";import{usePresignedFileUrl as A,useAudioPreview as j,useDebouncedCallback as z}from"../../../../shared/lib/hooks";import{useReactHookForm as B}from"../../../../shared/lib/hooks/useReactHookForm";import{listenAndChooseFromAnswerGroupFormSchema as G}from"../../../../shared/lib/validation/listen-and-choose-from-answer-group.validation";import{useAnswerGroupQuestionGroup as P}from"../../_shared/hooks/useAnswerGroupQuestionGroup";import{generateObjectId as V}from"../../_shared/utils/id-generator";import{CreatorGuide as q}from"../../components/CreatorGuide";function E({audioUrl:t}){const{previewUrl:a}=A(t),{isPlaying:n,currentTime:o,duration:s,progressPercentage:l,handlePlayPause:c,handleProgressClick:d,formatTime:m}=j(a);return a?e("div",{className:"bg-muted/50 rounded-lg border p-3",children:r("div",{className:"flex items-center gap-3",children:[e(i,{variant:"outline",size:"icon",onClick:c,disabled:!a,className:"h-8 w-8",children:e(n?f:u,{className:"h-3.5 w-3.5"})}),r("div",{className:"text-muted-foreground min-w-[70px] text-xs",children:[m(o)," / ",m(s)]}),e("div",{className:"bg-muted relative h-1.5 flex-1 cursor-pointer rounded-full",onClick:d,children:e("div",{className:"bg-primary absolute top-0 left-0 h-full rounded-full transition-all",style:{width:`${l}%`}})})]})}):null}function I({imageUrl:r}){const{previewUrl:t}=A(r);return t?e("div",{className:"mt-2 rounded-lg border border-gray-200 overflow-hidden",children:e("img",{src:t,alt:"Option",className:"h-24 w-full object-contain bg-gray-50"})}):null}function D({initialData:u,onSave:f,onCancel:A,onChange:j,onUnsavedChangesChange:D,validationRef:O,externalErrors:T,groups:M,questionIndexInPart:R=0,partId:J=""}){const L={options:u?.options||[]},{isGrouped:Q,currentGroupNumber:$,options:_,setOptions:H}=P({partId:J,groups:M,questionIndexInPart:R,initialData:L}),[K,W]=t(u?.audioUrl||""),[X,Y]=t(null!=u?.correctAnswer?String(u.correctAnswer):""),[Z,ee]=t(u?.points),[re,te]=t(u?.explanation||""),[ae,ne]=t(u?.isBackup||!1),ie=a(u),oe=a(!1),[se,le]=t(!1);n(()=>{JSON.stringify(ie.current)!==JSON.stringify(u)&&(oe.current=!0,ie.current=u,u?(void 0!==u.audioUrl&&W(u.audioUrl),void 0!==u.correctAnswer&&null!==u.correctAnswer&&Y(String(u.correctAnswer)),void 0!==u.points&&ee(u.points),void 0!==u.explanation&&te(u.explanation),void 0!==u.isBackup&&ne(u.isBackup)):(W(""),Y(""),ee(void 0),te(""),ne(!1)),setTimeout(()=>{oe.current=!1},100))},[u]);const ce=a(j);n(()=>{ce.current=j},[j]);const de=z(e=>{ce.current?.(e)},300);n(()=>{oe.current||de({options:_,audioUrl:K,correctAnswer:X,points:Z,explanation:re,isBackup:ae,groups:M,groupNumber:$})},[_,K,X,Z,re,ae,M,$,de]);const me=B({defaultValues:{options:_,audioUrl:K,correctAnswer:X,points:Z,explanation:re,isBackup:ae},zodSchema:G,mode:"onBlur"});n(()=>{O&&(O.current={triggerValidation:async()=>{me.setValue("options",_),me.setValue("audioUrl",K),me.setValue("correctAnswer",String(X)),me.setValue("points",Z),me.setValue("isBackup",ae);return!!await me.trigger()},getFormData:()=>({options:_,audioUrl:K,correctAnswer:X,points:Z,explanation:re,isBackup:ae,groups:M,groupNumber:$})})},[O,_,K,X,Z,re,ae,M,$,me]);const he=()=>{const e={id:V(),imageUrl:"",label:""};H([..._,e])};if(se){const t={options:_,audioUrl:K,correctAnswer:X,points:Z,explanation:re,isBackup:ae};return r("div",{className:"space-y-6",children:[e(c,{children:e(m,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(h,{children:"Nghe và chọn trong nhóm đáp án (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước"})]}),r(i,{variant:"outline",size:"sm",onClick:()=>le(!1),children:[e(g,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(k,{questionData:t,onSubmit:()=>{},isReviewMode:!0,userAnswer:X||void 0,correctAnswer:X||void 0,explanation:re})]})}return r("div",{className:"space-y-6",children:[e(q,{colorScheme:"orange",steps:[{text:"Upload các hình ảnh lựa chọn (options) cho nhóm — học sinh sẽ chọn đáp án đúng"},{text:"Mỗi option cần có hình ảnh và nhãn mô tả"},{text:"Upload audio câu hỏi cho từng câu"},{text:"Chọn đáp án đúng (correct answer) từ danh sách options",highlight:!0}],tips:["Nên có ít nhất 3-4 options để tạo sự phân biệt rõ ràng"]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-500"}),e(m,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500 to-amber-600 shadow-md",children:e(w,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(h,{className:"text-xl font-bold text-gray-900",children:"Nhóm đáp án"}),r("div",{className:"mt-1.5 inline-flex items-center gap-1.5 rounded-full bg-orange-100 px-3 py-1 text-sm font-medium text-orange-700",children:[e("span",{children:"🖼️"}),r("span",{children:["Nhóm ",$]}),e("span",{className:"text-xs font-normal opacity-75 ml-1",children:"(Dùng chung)"})]})]})]}),r(i,{variant:"outline",size:"sm",onClick:()=>le(!0),disabled:_.filter(e=>e.imageUrl).length<2||!K,className:"gap-2 border-orange-200 text-orange-600 hover:bg-orange-50 hover:text-orange-700",children:[e(p,{className:"h-4 w-4"}),"Preview"]})]})})]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),r(m,{className:"pb-4",children:[r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-amber-100",children:e(w,{className:"h-3.5 w-3.5 text-amber-600"})}),r(h,{className:"text-lg font-semibold text-gray-800",children:["Nhóm đáp án (",_.length," đáp án)"]})]}),r(i,{variant:"outline",size:"sm",onClick:he,className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(b,{className:"h-4 w-4"}),"Thêm đáp án"]})]}),me.formState.errors.options?.root&&e("div",{className:"px-4 pb-2",children:e("p",{className:"text-sm text-red-500",children:me.formState.errors.options.root.message})})]}),r(d,{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[_.map((t,a)=>r(c,{className:"border border-gray-200",children:[e(m,{className:"pb-2 pt-3 px-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 text-white text-sm font-bold shadow-sm",children:String.fromCharCode(65+a)}),r("span",{className:"text-sm font-semibold text-gray-700",children:["Đáp án ",String.fromCharCode(65+a)]})]}),_.length>2&&e(i,{variant:"ghost",size:"sm",onClick:()=>(e=>{if(_.length<=2)return void C.error("Cần tối thiểu 2 đáp án!");const r=_.filter(r=>r.id!==e);H(r),X===e&&Y(""),me.clearErrors("options")})(t.id),className:"h-7 w-7 p-0 text-red-500 hover:text-red-700 hover:bg-red-50",children:e(x,{className:"h-3.5 w-3.5"})})]})}),r(d,{className:"space-y-3 px-4 pb-4",children:[r("div",{children:[e(S,{id:`option-image-${t.id}`,label:"Ảnh đáp án",accept:"image/*",value:t.imageUrl,onChange:e=>{return r=t.id,a=e,H(_.map(e=>e.id===r?{...e,imageUrl:a}:e)),void me.clearErrors("options");var r,a},maxSize:5,placeholder:"Upload ảnh cho đáp án",required:!0,autoUpload:!0,prefix:"questions"}),me.formState.errors.options?.[a]?.imageUrl&&e("p",{className:"mt-1 text-sm text-red-500",children:me.formState.errors.options[a].imageUrl.message}),t.imageUrl&&e(I,{imageUrl:t.imageUrl})]}),r("div",{children:[e(l,{className:"font-medium",children:"Nhãn"}),e(o,{value:t.label||"",onChange:e=>{return r=t.id,a=e.target.value,H(_.map(e=>e.id===r?{...e,label:a}:e)),void me.clearErrors("options");var r,a},placeholder:"Nhập label / mô tả ngắn",className:"mt-1"})]})]})]},t.id)),0===_.length&&r("div",{className:"col-span-1 md:col-span-2 flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-amber-300 p-8 bg-amber-50/50",children:[e(y,{className:"h-10 w-10 text-amber-400 mb-2"}),e("p",{className:"text-sm text-gray-500 mb-3",children:"Chưa có đáp án nào"}),r(i,{variant:"outline",size:"sm",onClick:he,className:"gap-2",children:[e(b,{className:"h-4 w-4"}),"Thêm đáp án đầu tiên"]})]})]})]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-indigo-400 to-purple-400"}),e(m,{className:"pb-4",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100",children:e(N,{className:"h-3.5 w-3.5 text-indigo-600"})}),e(h,{className:"text-lg font-semibold text-gray-800",children:"Câu hỏi"})]})}),r(d,{className:"space-y-6",children:[e("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:r("div",{className:"flex flex-col md:flex-row gap-6",children:[r("div",{className:"flex-1",children:[e(l,{className:"text-sm font-semibold text-gray-700 mb-2 block",children:"Điểm *"}),e(o,{type:"number",min:1,value:Z??"",onChange:e=>{const r=e.target.value;ee(""===r?void 0:parseInt(r,10)),me.clearErrors("points")},placeholder:"Nhập điểm số",className:"w-40 bg-white "+(me.formState.errors.points?"border-red-500":"")}),me.formState.errors.points&&e("p",{className:"mt-1 text-sm text-red-500",children:me.formState.errors.points.message})]}),e("div",{className:"flex-1 flex flex-col justify-center pt-2"})]})}),r("div",{children:[e(S,{id:"question-audio",label:"File âm thanh",accept:"audio/*",value:K,onChange:e=>{W(e),me.clearErrors("audioUrl")},maxSize:10,placeholder:"Upload file audio",required:!0,autoUpload:!0,prefix:"questions"}),me.formState.errors.audioUrl&&e("p",{className:"mt-1 text-sm text-red-500",children:me.formState.errors.audioUrl.message}),K&&e(E,{audioUrl:K})]}),r("div",{children:[e(l,{className:"text-sm font-semibold text-gray-700 mb-2 block",children:"Chọn đáp án đúng *"}),_.filter(e=>e.imageUrl).length>0?e("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3",children:_.map((t,a)=>{if(!t.imageUrl)return null;const n=X===t.id;return r("button",{type:"button",onClick:()=>{Y(t.id),me.clearErrors("correctAnswer")},className:"relative text-left rounded-xl border-2 p-2 transition-all "+(n?"border-green-500 bg-green-50 ring-2 ring-green-200 shadow-md":"border-gray-200 hover:border-gray-400 hover:shadow-sm"),children:[r("div",{className:"flex flex-col items-center gap-2",children:[e("div",{className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold shadow-sm "+(n?"bg-green-500 text-white":"bg-gray-100 text-gray-600"),children:String.fromCharCode(65+a)}),e(F,{imageUrl:t.imageUrl}),t.label&&e("p",{className:"text-xs text-center "+(n?"text-green-700 font-medium":"text-gray-600"),children:t.label})]}),n&&e("div",{className:"absolute top-1 right-1",children:e(v,{className:"h-5 w-5 text-green-500"})})]},t.id)})}):e("p",{className:"text-sm text-amber-600 italic",children:"Vui lòng upload ảnh cho đáp án ở phần trên trước"}),me.formState.errors.correctAnswer&&e("div",{className:"mt-3 rounded-lg border border-red-200 bg-red-50 p-3",children:r("p",{className:"text-sm text-red-700",children:["⚠️ ",me.formState.errors.correctAnswer.message]})}),!me.formState.errors.correctAnswer&&!X&&_.filter(e=>e.imageUrl).length>0&&e("p",{className:"mt-1 text-xs text-amber-600",children:"Chưa chọn đáp án đúng"})]})]})]}),r(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),e(m,{className:"pb-4",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(U,{className:"h-4 w-4 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(h,{className:"text-lg font-semibold text-gray-800",children:"Giải thích"}),e("span",{className:"inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"text-sm text-gray-500 mt-0.5",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(d,{children:e(s,{value:re,onChange:e=>te(e.target.value),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}function F({imageUrl:r}){const{previewUrl:t}=A(r);return t?e("img",{src:t,alt:"Option",className:"h-16 w-full rounded-lg object-contain bg-gray-50"}):e("div",{className:"flex h-16 w-full items-center justify-center rounded-lg bg-gray-100",children:e(y,{className:"h-6 w-6 text-gray-300"})})}export function ListenAndChooseFromAnswerGroupCreator(r){return e(D,{...r})}

package/dist/components/questions/types/listen-and-choose-from-answer-group/index.d.ts

@@ -1,3 +1,2 @@
 export * from './ListenAndChooseFromAnswerGroupCreator';
 export * from './ListenAndChooseFromAnswerGroupClient';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/questions/types/listen-and-choose-from-answer-group/index.js

@@ -1,3 +1 @@
-export * from './ListenAndChooseFromAnswerGroupCreator';
-export * from './ListenAndChooseFromAnswerGroupClient';
-//# sourceMappingURL=index.js.map
+export*from"./ListenAndChooseFromAnswerGroupCreator";export*from"./ListenAndChooseFromAnswerGroupClient";

package/dist/components/questions/types/listen-and-choose-from-answer-group/register.d.ts

@@ -1,3 +1,2 @@
 import type { QuestionTypeRegistration } from '../../creator/question-type-registry';
 export declare const listenAndChooseFromAnswerGroupRegistration: QuestionTypeRegistration;
-//# sourceMappingURL=register.d.ts.map

package/dist/components/questions/types/listen-and-choose-from-answer-group/register.js

@@ -1,83 +1 @@
-import { ListenAndChooseFromAnswerGroupCreator } from './ListenAndChooseFromAnswerGroupCreator';
-export const listenAndChooseFromAnswerGroupRegistration = {
-    component: ListenAndChooseFromAnswerGroupCreator,
-    transformInitialData: (initialData) => {
-        if (!initialData)
-            return undefined;
-        const d = initialData;
-        // Group shared data: options
-        // Use data from questionGroup.payload first (API format), fallback to answer (reverse-transformed)
-        const options = (d?.questionGroup?.payload?.options?.length > 0 && d?.questionGroup?.payload?.options) ||
-            (d?.answer?.options?.length > 0 && d?.answer?.options) ||
-            (d?.content?.options?.length > 0 && d?.content?.options) ||
-            d?.options || [];
-        // Question specific data - prioritize content (API) then answer (reverse-transformed)
-        const audioUrl = d?.content?.audioUrl || d?.answer?.audioUrl || d?.audioUrl || '';
-        // Correct answer from multiple possible locations
-        const correctAnswer = d?.answer?.correctAnswer ??
-            d?.correctAnswer?.answer ??
-            d?.content?.correctAnswer ??
-            -1;
-        // Points and explanation - top-level fields take priority
-        const points = d?.points || d?.answer?.points || 1;
-        const explanation = d?.explanation || d?.answer?.explanation || d?.content?.explanation || '';
-        const isBackup = d?.content?.isBackup || d?.isBackup || false;
-        console.log('[LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP register] transformInitialData:', {
-            correctAnswer,
-            audioUrl: audioUrl ? '✓' : '✗',
-            optionsCount: options?.length || 0,
-            sources: {
-                'answer.correctAnswer': d?.answer?.correctAnswer,
-                'correctAnswer.answer': d?.correctAnswer?.answer,
-                'questionGroup.payload.options': d?.questionGroup?.payload?.options?.length,
-            }
-        });
-        return {
-            audioUrl,
-            options,
-            correctAnswer,
-            points,
-            explanation,
-            isBackup,
-            isCompleted: d?.isCompleted,
-        };
-    },
-    getExtraProps: (ctx) => ({
-        groups: ctx.groups,
-        questionIndexInPart: ctx.questionIndexInPart,
-        partId: ctx.partId,
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        validationRef: ctx.validationRef,
-    }),
-    wrapOnSave: (data, ctx) => ({
-        type: ctx.questionType,
-        content: {
-            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
-            audioUrl: data.audioUrl,
-            options: data.options,
-            correctAnswer: data.correctAnswer,
-            isBackup: data.isBackup || false,
-        },
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        explanation: data?.explanation || '',
-    }),
-    wrapOnChange: (data, ctx) => ({
-        type: ctx.questionType,
-        content: {
-            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
-            audioUrl: data.audioUrl,
-            options: data.options,
-            correctAnswer: data.correctAnswer,
-            isBackup: data.isBackup || false,
-        },
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        explanation: data?.explanation || '',
-    }),
-};
-//# sourceMappingURL=register.js.map
+import{ListenAndChooseFromAnswerGroupCreator as t}from"./ListenAndChooseFromAnswerGroupCreator";export const listenAndChooseFromAnswerGroupRegistration={component:t,transformInitialData:t=>{if(!t)return;const n=t,o=n?.questionGroup?.payload?.options?.length>0&&n?.questionGroup?.payload?.options||n?.answer?.options?.length>0&&n?.answer?.options||n?.content?.options?.length>0&&n?.content?.options||n?.options||[],e=n?.content?.audioUrl||n?.answer?.audioUrl||n?.audioUrl||"",s=n?.answer?.correctAnswer??n?.correctAnswer?.answer??n?.content?.correctAnswer??-1,r=n?.points||n?.answer?.points||1,a=n?.explanation||n?.answer?.explanation||n?.content?.explanation||"",i=n?.content?.isBackup||n?.isBackup||!1;return console.log("[LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP register] transformInitialData:",{correctAnswer:s,audioUrl:e?"✓":"✗",optionsCount:o?.length||0,sources:{"answer.correctAnswer":n?.answer?.correctAnswer,"correctAnswer.answer":n?.correctAnswer?.answer,"questionGroup.payload.options":n?.questionGroup?.payload?.options?.length}}),{audioUrl:e,options:o,correctAnswer:s,points:r,explanation:a,isBackup:i,isCompleted:n?.isCompleted}},getExtraProps:t=>({groups:t.groups,questionIndexInPart:t.questionIndexInPart,partId:t.partId,onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef}),wrapOnSave:(t,n)=>({type:n.questionType,content:{..."object"==typeof n.state.content&&null!==n.state.content?n.state.content:{},audioUrl:t.audioUrl,options:t.options,correctAnswer:t.correctAnswer,isBackup:t.isBackup||!1},points:t?.points??n.state.points??1,level:n.state.level,difficulty:n.state.difficulty,skill:n.state.skill,explanation:t?.explanation||""}),wrapOnChange:(t,n)=>({type:n.questionType,content:{..."object"==typeof n.state.content&&null!==n.state.content?n.state.content:{},audioUrl:t.audioUrl,options:t.options,correctAnswer:t.correctAnswer,isBackup:t.isBackup||!1},points:t?.points??n.state.points??1,level:n.state.level,difficulty:n.state.difficulty,skill:n.state.skill,explanation:t?.explanation||""})};

package/dist/components/questions/types/listen-and-choose-from-answer-group/transform.d.ts

@@ -1,3 +1,2 @@
 import type { TransformHandler } from '../../../../shared/lib/utils/question-transform-types';
 export declare const transformListenAndChooseFromAnswerGroup: TransformHandler;
-//# sourceMappingURL=transform.d.ts.map

package/dist/components/questions/types/listen-and-choose-from-answer-group/transform.js

@@ -1,28 +1 @@
-export const transformListenAndChooseFromAnswerGroup = (question) => {
-    const answerData = question.answer;
-    // Question-specific content: only audioUrl
-    const apiContent = {};
-    if (answerData?.audioUrl) {
-        apiContent.audioUrl = answerData.audioUrl;
-    }
-    const apiCorrectAnswer = {
-        answer: answerData.correctAnswer,
-    };
-    // Group shared data: options go into questionGroup.payload
-    const answerGroupData = {
-        options: (answerData.options || []).map((opt) => ({
-            id: opt.id,
-            imageUrl: opt.imageUrl,
-            ...(opt.label ? { label: opt.label } : {}),
-        })),
-    };
-    // Get group number directly from the component payload
-    const groupNumber = answerData.groupNumber || 1;
-    return {
-        apiContent,
-        apiCorrectAnswer,
-        answerGroupData,
-        groupNumber,
-    };
-};
-//# sourceMappingURL=transform.js.map
+export const transformListenAndChooseFromAnswerGroup=r=>{const o=r.answer,e={};o?.audioUrl&&(e.audioUrl=o.audioUrl);return{apiContent:e,apiCorrectAnswer:{answer:o.correctAnswer},answerGroupData:{options:(o.options||[]).map(r=>({id:r.id,imageUrl:r.imageUrl,...r.label?{label:r.label}:{}}))},groupNumber:o.groupNumber||1}};

package/dist/components/questions/types/listen-and-choose-objects-in-scene/ListenAndChooseObjectsInSceneClient.d.ts

@@ -7,4 +7,3 @@ import type { ListenAndChooseObjectsInSceneClientProps } from '../../_shared/typ
  * Student listens to audio and clicks the correct object.
  */
 export declare function ListenAndChooseObjectsInSceneClient({ questionData, onSubmit, isReviewMode, userAnswer, correctAnswer, explanation, }: ListenAndChooseObjectsInSceneClientProps): import("react").JSX.Element;
-//# sourceMappingURL=ListenAndChooseObjectsInSceneClient.d.ts.map

package/dist/components/questions/types/listen-and-choose-objects-in-scene/ListenAndChooseObjectsInSceneClient.js

@@ -1,71 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { Check, X, CircleHelp, Volume2 } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { cn } from '../../../../shared/lib/utils';
-/**
- * Scene Object Button - A clickable image button overlaid on the background scene
- */
-function SceneObjectButton({ node, isSelected, isCorrect, isWrong, isReviewMode, onClick, }) {
-    const { previewUrl: objectImageUrl } = usePresignedFileUrl(node.imageUrl || '');
-    return (_jsxs("button", { type: "button", onClick: onClick, disabled: isReviewMode, className: cn('absolute cursor-pointer rounded-lg transition-all duration-200 overflow-hidden', 'hover:scale-105', 'focus:outline-none focus:ring-2 focus:ring-offset-1', 
-        // Default state
-        !isSelected && !isCorrect && !isWrong && 'border-2 border-transparent hover:border-blue-300 focus:ring-blue-400', 
-        // Selected (not review mode)
-        isSelected && !isReviewMode && 'border-3 border-blue-500 ring-2 ring-blue-200 shadow-lg shadow-blue-200/50 scale-105', 
-        // Review mode - correct
-        isCorrect && 'border-3 border-green-500 ring-2 ring-green-200 shadow-lg shadow-green-200/50 scale-105', 
-        // Review mode - wrong (selected but not correct)
-        isWrong && 'border-3 border-red-500 ring-2 ring-red-200 shadow-lg shadow-red-200/50 scale-105', 
-        // Disabled in review
-        isReviewMode && 'cursor-default hover:scale-100'), style: {
-            left: `${node.x}%`,
-            top: `${node.y}%`,
-            width: `${node.width}%`,
-            height: `${node.height}%`,
-        }, title: isReviewMode ? node.label : `Chọn ${node.label}`, children: [objectImageUrl ? (_jsx("img", { src: objectImageUrl, alt: node.label, className: "h-full w-full object-fill pointer-events-none", draggable: false })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-gray-100/80 text-xs text-gray-500", children: node.label })), isReviewMode && (isCorrect || isWrong) && (_jsx("div", { className: cn('absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full shadow-md', isCorrect ? 'bg-green-500' : 'bg-red-500'), style: { zIndex: 1 }, children: isCorrect ? (_jsx(Check, { className: "h-3 w-3 text-white" })) : (_jsx(X, { className: "h-3 w-3 text-white" })) }))] }));
-}
-/**
- * ListenAndChooseObjectsInSceneClient
- *
- * Student/preview view for the "Listen and Choose Objects in Scene" question type.
- * Displays a background scene image with clickable object images overlaid.
- * Student listens to audio and clicks the correct object.
- */
-export function ListenAndChooseObjectsInSceneClient({ questionData, onSubmit, isReviewMode = false, userAnswer, correctAnswer, explanation, }) {
-    // State
-    const [selectedObjectId, setSelectedObjectId] = useState(userAnswer?.objectId || '');
-    // Presigned URLs
-    const { previewUrl: backgroundUrl, isLoading: bgLoading } = usePresignedFileUrl(questionData.backgroundImageUrl || '');
-    const { previewUrl: audioUrl } = usePresignedFileUrl(questionData.audioUrl || '');
-    // Sync userAnswer
-    useEffect(() => {
-        if (userAnswer?.objectId) {
-            setSelectedObjectId(userAnswer.objectId);
-        }
-    }, [userAnswer]);
-    // Handle object click
-    const handleObjectClick = (objectId) => {
-        if (isReviewMode)
-            return;
-        setSelectedObjectId(objectId);
-        onSubmit?.({ objectId });
-    };
-    const hasAnswered = selectedObjectId !== '';
-    const selectedNode = questionData.objectNodes.find((n) => n.id === selectedObjectId);
-    const isAnswerCorrect = isReviewMode && correctAnswer && selectedObjectId === correctAnswer.objectId;
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_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-blue-500 to-indigo-600 text-white shadow-sm", children: _jsx(CircleHelp, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nghe v\u00E0 ch\u1ECDn \u0111\u1ED1i t\u01B0\u1EE3ng trong c\u1EA3nh" })] }), 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: [audioUrl && (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Volume2, { className: "h-4 w-4" }) }), _jsx("audio", { controls: true, className: "h-8 w-full", src: audioUrl, children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })] })), _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: "Scene" })] }) }), _jsx("div", { className: "relative p-2", children: bgLoading ? (_jsx("div", { className: "flex h-64 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" }) })) : backgroundUrl ? (_jsxs("div", { className: "relative w-full", children: [_jsx("img", { src: backgroundUrl, alt: "Scene background", className: "w-full rounded-md object-contain", draggable: false }), questionData.objectNodes.map((node) => {
-                                                    const isSelected = selectedObjectId === node.id;
-                                                    const isCorrectNode = isReviewMode && correctAnswer?.objectId === node.id;
-                                                    const isWrongNode = isReviewMode && isSelected && correctAnswer?.objectId !== node.id;
-                                                    return (_jsx(SceneObjectButton, { node: node, isSelected: isSelected, isCorrect: isCorrectNode, isWrong: isWrongNode, isReviewMode: isReviewMode, onClick: () => handleObjectClick(node.id) }, node.id));
-                                                })] })) : (_jsx("div", { className: "flex h-64 items-center justify-center text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 \u1EA3nh n\u1EC1n" })) })] }), hasAnswered && selectedNode && (_jsxs("div", { className: cn('flex items-center gap-2 rounded-lg border p-3', isReviewMode
-                                    ? isAnswerCorrect
-                                        ? 'border-green-200 bg-green-50'
-                                        : 'border-red-200 bg-red-50'
-                                    : 'border-blue-200 bg-blue-50'), children: [_jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["\u0110\u00E3 ch\u1ECDn: ", _jsx("strong", { children: selectedNode.label })] }), isReviewMode && (_jsx("span", { className: cn('text-xs font-semibold', isAnswerCorrect ? 'text-green-600' : 'text-red-600'), children: isAnswerCorrect ? '✓ Chính xác' : '✗ Không chính xác' }))] })), !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: "Nghe audio v\u00E0 nh\u1EA5p v\u00E0o \u0111\u1ED1i t\u01B0\u1EE3ng \u0111\u00FAng trong h\u00ECnh" })] })), isReviewMode && explanation && (_jsxs("div", { className: "rounded-lg border border-indigo-200 bg-indigo-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-indigo-800", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "mt-1 text-sm text-indigo-700", children: explanation })] }))] })] })] }));
-}
-//# sourceMappingURL=ListenAndChooseObjectsInSceneClient.js.map
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as d}from"react";import{Check as l,X as s,CircleHelp as n,Volume2 as i}from"lucide-react";import{usePresignedFileUrl as a}from"../../../../shared/lib/hooks";import{cn as o}from"../../../../shared/lib/utils";function c({node:t,isSelected:d,isCorrect:n,isWrong:i,isReviewMode:c,onClick:b}){const{previewUrl:m}=a(t.imageUrl||"");return r("button",{type:"button",onClick:b,disabled:c,className:o("absolute cursor-pointer rounded-lg transition-all duration-200 overflow-hidden","hover:scale-105","focus:outline-none focus:ring-2 focus:ring-offset-1",!d&&!n&&!i&&"border-2 border-transparent hover:border-blue-300 focus:ring-blue-400",d&&!c&&"border-3 border-blue-500 ring-2 ring-blue-200 shadow-lg shadow-blue-200/50 scale-105",n&&"border-3 border-green-500 ring-2 ring-green-200 shadow-lg shadow-green-200/50 scale-105",i&&"border-3 border-red-500 ring-2 ring-red-200 shadow-lg shadow-red-200/50 scale-105",c&&"cursor-default hover:scale-100"),style:{left:`${t.x}%`,top:`${t.y}%`,width:`${t.width}%`,height:`${t.height}%`},title:c?t.label:`Chọn ${t.label}`,children:[m?e("img",{src:m,alt:t.label,className:"h-full w-full object-fill pointer-events-none",draggable:!1}):e("div",{className:"flex h-full w-full items-center justify-center bg-gray-100/80 text-xs text-gray-500",children:t.label}),c&&(n||i)&&e("div",{className:o("absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full shadow-md",n?"bg-green-500":"bg-red-500"),style:{zIndex:1},children:e(n?l:s,{className:"h-3 w-3 text-white"})})]})}export function ListenAndChooseObjectsInSceneClient({questionData:b,onSubmit:m,isReviewMode:h=!1,userAnswer:g,correctAnswer:u,explanation:f}){const[x,p]=t(g?.objectId||""),{previewUrl:w,isLoading:v}=a(b.backgroundImageUrl||""),{previewUrl:N}=a(b.audioUrl||"");d(()=>{g?.objectId&&p(g.objectId)},[g]);const y=""!==x,j=b.objectNodes.find(e=>e.id===x),C=h&&u&&x===u.objectId;return r("div",{className:"space-y-4",children:[b.isBackup&&r("div",{className:"inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm",children:[e("span",{children:"🔄"})," Câu hỏi dự phòng"]}),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[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-blue-500 to-indigo-600 text-white shadow-sm",children:e(n,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Nghe và chọn đối tượng trong cảnh"})]}),h&&y&&r("div",{className:o("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",C?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(C?l:s,{className:"h-3.5 w-3.5"}),C?"Đúng":"Sai"]})]}),r("div",{className:"space-y-5 p-5",children:[N&&r("div",{className:"flex items-center gap-3 rounded-lg border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white",children:e(i,{className:"h-4 w-4"})}),e("audio",{controls:!0,className:"h-8 w-full",src:N,children:"Trình duyệt không hỗ trợ audio."})]}),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:"Scene"})]})}),e("div",{className:"relative p-2",children:v?e("div",{className:"flex h-64 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"})}):w?r("div",{className:"relative w-full",children:[e("img",{src:w,alt:"Scene background",className:"w-full rounded-md object-contain",draggable:!1}),b.objectNodes.map(r=>{const t=x===r.id,d=h&&u?.objectId===r.id,l=h&&t&&u?.objectId!==r.id;return e(c,{node:r,isSelected:t,isCorrect:d,isWrong:l,isReviewMode:h,onClick:()=>{return e=r.id,void(h||(p(e),m?.({objectId:e})));var e}},r.id)})]}):e("div",{className:"flex h-64 items-center justify-center text-sm text-gray-400",children:"Chưa có ảnh nền"})})]}),y&&j&&r("div",{className:o("flex items-center gap-2 rounded-lg border p-3",h?C?"border-green-200 bg-green-50":"border-red-200 bg-red-50":"border-blue-200 bg-blue-50"),children:[r("span",{className:"text-sm font-medium text-gray-700",children:["Đã chọn: ",e("strong",{children:j.label})]}),h&&e("span",{className:o("text-xs font-semibold",C?"text-green-600":"text-red-600"),children:C?"✓ Chính xác":"✗ Không chính xác"})]}),!h&&!y&&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:"Nghe audio và nhấp vào đối tượng đúng trong hình"})]}),h&&f&&r("div",{className:"rounded-lg border border-indigo-200 bg-indigo-50 p-4",children:[e("p",{className:"text-sm font-semibold text-indigo-800",children:"Giải thích:"}),e("p",{className:"mt-1 text-sm text-indigo-700",children:f})]})]})]})]})}

package/dist/components/questions/types/listen-and-choose-objects-in-scene/ListenAndChooseObjectsInSceneCreator.d.ts

@@ -9,4 +9,3 @@ interface CreatorProps extends ListenAndChooseObjectsInSceneCreatorProps {
 }
 export declare function ListenAndChooseObjectsInSceneCreator(props: CreatorProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=ListenAndChooseObjectsInSceneCreator.d.ts.map