@tinyweb_dev/oe-exam-sdk 1.0.6 → 1.0.7

package/dist/components/questions/types/gn-speaking-interview/register.js

@@ -1,121 +0,0 @@
-import { GNSpeakingInterviewCreator } from './GNSpeakingInterviewCreator';
-export const gnSpeakingInterviewRegistration = {
-    component: GNSpeakingInterviewCreator,
-    transformInitialData: (initialData) => {
-        const content = initialData?.content;
-        const answer = initialData?.answer || initialData?.correctAnswer || initialData?.correct_answer;
-        const points = initialData?.total_points !== undefined && initialData?.total_points !== null
-            ? parseFloat(initialData.total_points)
-            : (initialData?.points ?? content?.points ?? answer?.points ?? 1);
-        const explanation = initialData?.explanation || content?.explanation || answer?.explanation || '';
-        // Normalize expected answers
-        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.targetCandidate !== undefined) {
-            return {
-                inputType: content.inputType || 'TEXT',
-                audioUrl: content.audioUrl || '',
-                imageUrl: content.imageUrl || '',
-                questionText: content.questionText || '',
-                targetCandidate: content.targetCandidate || 'REAL',
-                virtualAnswerText: content.virtualAnswer?.answerText || '',
-                virtualAnswerAudioUrl: content.virtualAnswer?.audioUrl || '',
-                isExtendedResponse: content.isExtendedResponse || false,
-                sampleAnswers: normalizeSampleAnswers(),
-                explanation,
-                points,
-            };
-        }
-        return {
-            inputType: answer?.inputType || content?.inputType || 'TEXT',
-            audioUrl: answer?.audioUrl || content?.audioUrl || '',
-            imageUrl: answer?.imageUrl || content?.imageUrl || '',
-            questionText: answer?.questionText || content?.questionText || '',
-            targetCandidate: answer?.targetCandidate || content?.targetCandidate || 'REAL',
-            virtualAnswerText: answer?.virtualAnswerText || content?.virtualAnswer?.answerText || '',
-            virtualAnswerAudioUrl: answer?.virtualAnswerAudioUrl || content?.virtualAnswer?.audioUrl || '',
-            isExtendedResponse: answer?.isExtendedResponse || content?.isExtendedResponse || false,
-            sampleAnswers: normalizeSampleAnswers(),
-            explanation,
-            points,
-        };
-    },
-    getExtraProps: (ctx) => ({
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        validationRef: ctx.validationRef,
-    }),
-    wrapOnSave: (data, ctx) => {
-        const expectedAnswers = (data.sampleAnswers || []).filter((s) => s && s.trim() !== '');
-        const isVirtual = data.targetCandidate === 'VIRTUAL'; // VIRTUAL = virtual by default
-        return {
-            type: ctx.questionType,
-            content: {
-                ...(typeof ctx.state.content === 'object' && ctx.state.content !== null
-                    ? ctx.state.content
-                    : {}),
-                inputType: data.inputType,
-                audioUrl: data.audioUrl || '',
-                imageUrl: data.imageUrl || '',
-                questionText: data.inputType === 'TEXT' ? data.questionText : undefined,
-                targetCandidate: data.targetCandidate || 'REAL',
-                virtualAnswer: isVirtual
-                    ? {
-                        answerText: data.virtualAnswerText || '',
-                        audioUrl: data.virtualAnswerAudioUrl || '',
-                    }
-                    : undefined,
-                isExtendedResponse: data.isExtendedResponse || false,
-            },
-            points: isVirtual ? 0 : (data?.points ?? ctx.state.points ?? 1),
-            level: ctx.state.level,
-            difficulty: ctx.state.difficulty,
-            skill: ctx.state.skill,
-            answer: {
-                expectedAnswers: isVirtual ? [] : expectedAnswers,
-            },
-            explanation: data?.explanation || '',
-        };
-    },
-    wrapOnChange: (data, ctx) => {
-        const expectedAnswers = data.sampleAnswers || [''];
-        const isVirtual = data.targetCandidate === 'VIRTUAL';
-        return {
-            type: ctx.questionType,
-            content: {
-                ...(typeof ctx.state.content === 'object' && ctx.state.content !== null
-                    ? ctx.state.content
-                    : {}),
-                inputType: data.inputType,
-                audioUrl: data.audioUrl || '',
-                imageUrl: data.imageUrl || '',
-                questionText: data.inputType === 'TEXT' ? data.questionText : undefined,
-                targetCandidate: data.targetCandidate || 'REAL',
-                virtualAnswer: isVirtual
-                    ? {
-                        answerText: data.virtualAnswerText || '',
-                        audioUrl: data.virtualAnswerAudioUrl || '',
-                    }
-                    : undefined,
-                isExtendedResponse: data.isExtendedResponse || false,
-            },
-            points: isVirtual ? 0 : (data?.points ?? ctx.state.points ?? 1),
-            level: ctx.state.level,
-            difficulty: ctx.state.difficulty,
-            skill: ctx.state.skill,
-            answer: {
-                expectedAnswers: isVirtual ? [] : expectedAnswers,
-            },
-            explanation: data?.explanation || '',
-        };
-    },
-};

package/dist/components/questions/types/gn-speaking-interview/transform.d.ts

@@ -1,2 +0,0 @@
-import type { TransformHandler } from '../../../../shared/lib/utils/question-transform-types';
-export declare const transformGNSpeakingInterview: TransformHandler;

package/dist/components/questions/types/gn-speaking-interview/transform.js

@@ -1,48 +0,0 @@
-export const transformGNSpeakingInterview = (question) => {
-    const contentData = question.content;
-    const answerData = question.answer;
-    const inputType = contentData?.inputType || 'TEXT';
-    const targetCandidate = contentData?.targetCandidate || 'REAL'; // VIRTUAL=Virtual, REAL=Real
-    const apiContent = {
-        inputType,
-        // Always include audioUrl — populated when AUDIO, empty string when TEXT
-        audioUrl: contentData?.audioUrl || '',
-        imageUrl: contentData?.imageUrl || '',
-        targetCandidate,
-        isExtendedResponse: contentData?.isExtendedResponse || false,
-    };
-    // Include questionText when inputType is TEXT
-    if (inputType === 'TEXT' && contentData?.questionText) {
-        apiContent.questionText = contentData.questionText;
-    }
-    // Include virtualAnswer when targetCandidate is 'VIRTUAL'
-    if (targetCandidate === 'VIRTUAL' && contentData?.virtualAnswer) {
-        apiContent.virtualAnswer = {
-            answerText: contentData.virtualAnswer.answerText || '',
-            audioUrl: contentData.virtualAnswer.audioUrl || '',
-        };
-    }
-    // Normalize: support expectedAnswers, sampleAnswers (array) and legacy sampleAnswer
-    const expectedAnswers = (() => {
-        // Virtual candidates do not have expected answers
-        if (targetCandidate === 'VIRTUAL')
-            return [];
-        const newArr = answerData?.expectedAnswers;
-        if (Array.isArray(newArr))
-            return newArr.filter((s) => s && s.trim() !== '');
-        const arr = answerData?.sampleAnswers;
-        if (Array.isArray(arr))
-            return arr.filter((s) => s && s.trim() !== '');
-        const single = answerData?.sampleAnswer;
-        if (single && single.trim() !== '')
-            return [single];
-        return [];
-    })();
-    const apiCorrectAnswer = {
-        expectedAnswers,
-    };
-    return {
-        apiContent,
-        apiCorrectAnswer,
-    };
-};

package/dist/components/questions/types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerClient.d.ts

@@ -1,20 +0,0 @@
-interface LookPictureChooseCorrectAnswerClientProps {
-    questionData: {
-        subQuestions: Array<{
-            id: string;
-            imageUrl: string;
-            question?: string;
-            options: Array<{
-                id: string;
-                text: string;
-                isCorrect: boolean;
-            }>;
-        }>;
-    };
-    onSubmit?: (answers: Record<string, string>) => void;
-    isReviewMode?: boolean;
-    userAnswer?: Record<string, string>;
-    explanation?: string;
-}
-export declare function LookPictureChooseCorrectAnswerClient({ questionData, onSubmit, isReviewMode, userAnswer, explanation, }: LookPictureChooseCorrectAnswerClientProps): import("react").JSX.Element;
-export {};

package/dist/components/questions/types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerClient.js

@@ -1,72 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { Check, X, Lightbulb } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-function SubQuestionClient({ subQuestion, index, userAnswerValue, isReviewMode, onAnswerChange, }) {
-    // Use hook at component level
-    const { previewUrl: imagePreviewUrl, isLoading } = usePresignedFileUrl(subQuestion.imageUrl || '');
-    // Find correct answer
-    const correctOption = subQuestion.options.find((opt) => opt.isCorrect);
-    const correctOptionId = correctOption?.id || '';
-    // Check if answer is correct
-    const isAnswerCorrect = userAnswerValue === correctOptionId;
-    const hasAnswered = userAnswerValue !== '';
-    return (_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-sm font-bold text-white shadow-sm", children: index + 1 }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nh\u00ECn tranh, ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: `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: "p-5 space-y-4", children: [(imagePreviewUrl || subQuestion.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 || subQuestion.imageUrl, alt: "Question illustration", className: "max-h-56 w-auto object-contain", onError: (e) => {
-                                        const target = e.target;
-                                        target.onerror = null;
-                                        target.src = '/images/placeholder-image.svg';
-                                    } })) })] })), _jsx("div", { className: "space-y-2", children: subQuestion.options.map((option, optIndex) => {
-                            const isSelected = userAnswerValue === option.id;
-                            const isCorrectAnswer = option.isCorrect;
-                            const letter = String.fromCharCode(65 + optIndex);
-                            return _jsxs("button", { type: "button", onClick: () => !isReviewMode && onAnswerChange(option.id), disabled: isReviewMode, className: `group flex w-full items-center gap-3 rounded-lg border-2 p-3 text-left transition-all ${isReviewMode
-                                    ? isCorrectAnswer
-                                        ? 'border-green-400 bg-green-50'
-                                        : isSelected
-                                            ? 'border-red-400 bg-red-50'
-                                            : 'border-gray-200 bg-gray-50'
-                                    : isSelected
-                                        ? 'border-blue-500 bg-blue-50 shadow-sm'
-                                        : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm'}`, children: [_jsx("div", { className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold transition-all ${isReviewMode
-                                            ? isCorrectAnswer
-                                                ? 'bg-green-500 text-white'
-                                                : isSelected
-                                                    ? 'bg-red-500 text-white'
-                                                    : 'bg-gray-200 text-gray-600'
-                                            : isSelected
-                                                ? 'bg-blue-500 text-white'
-                                                : 'bg-gray-100 text-gray-600 group-hover:bg-gray-200'}`, children: letter }), _jsx("span", { className: `flex-1 text-sm font-medium ${isReviewMode && isCorrectAnswer
-                                            ? 'text-green-800'
-                                            : isReviewMode && isSelected && !isCorrectAnswer
-                                                ? 'text-red-800'
-                                                : 'text-gray-700'}`, children: option.text }), isReviewMode && (isCorrectAnswer || isSelected) && (_jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-full ${isCorrectAnswer ? 'bg-green-500' : 'bg-red-500'}`, children: isCorrectAnswer
-                                            ? _jsx(Check, { className: "h-4 w-4 text-white" })
-                                            : _jsx(X, { className: "h-4 w-4 text-white" }) }))] }, option.id);
-                        }) }), isReviewMode && hasAnswered && !isAnswerCorrect && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-green-50 p-3 border border-green-200", children: [_jsx(Check, { className: "h-4 w-4 text-green-600" }), _jsxs("span", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: correctOption?.text })] })] }))] })] }));
-}
-export function LookPictureChooseCorrectAnswerClient({ questionData, onSubmit, isReviewMode = false, userAnswer = {}, explanation, }) {
-    // State for answers: { subQuestionId: selectedOptionId }
-    const [answers, setAnswers] = useState(userAnswer);
-    // Sync userAnswer when it changes
-    useEffect(() => {
-        setAnswers(userAnswer);
-    }, [userAnswer]);
-    // Handle answer change for a sub-question
-    const handleAnswerChange = (subQuestionId, optionId) => {
-        if (isReviewMode)
-            return;
-        const newAnswers = {
-            ...answers,
-            [subQuestionId]: optionId,
-        };
-        setAnswers(newAnswers);
-        // Auto submit if callback provided
-        onSubmit?.(newAnswers);
-    };
-    return (_jsxs("div", { className: "space-y-6", children: [questionData.subQuestions.map((subQuestion, index) => (_jsx(SubQuestionClient, { subQuestion: subQuestion, index: index, userAnswerValue: answers[subQuestion.id] || '', isReviewMode: isReviewMode, onAnswerChange: (value) => handleAnswerChange(subQuestion.id, value) }, subQuestion.id))), isReviewMode && explanation && (_jsx("div", { className: "rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: explanation })] })] }) }))] }));
-}

package/dist/components/questions/types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerCreator.d.ts

@@ -1,15 +0,0 @@
-interface LookPictureChooseCorrectAnswerCreatorProps {
-    initialData?: any;
-    onSave?: (data: any) => void;
-    onCancel?: () => void;
-    onChange?: (data: any) => void;
-    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
-    optionCount?: number;
-    validationRef?: React.MutableRefObject<{
-        triggerValidation: () => Promise<boolean>;
-        getFormData?: () => any;
-    } | null>;
-}
-export declare function LookPictureChooseCorrectAnswerCreator(props: LookPictureChooseCorrectAnswerCreatorProps): import("react").JSX.Element;
-export declare const LookPictureChooseCorrectAnswer: typeof LookPictureChooseCorrectAnswerCreator;
-export {};

package/dist/components/questions/types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerCreator.js

@@ -1,230 +0,0 @@
-'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 { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { PointsInput } from '../../../../components/ui/points-input';
-import { RadioGroup } from '../../../../components/ui/radio-group';
-import { Pencil, Eye, Plus, Trash2, Image, CheckCircle2, Lightbulb, BookOpen } from 'lucide-react';
-import { FileUpload } from '../../../../components/ui/file-upload';
-import { ImagePreview } from '../../../../components/ui/image-preview';
-import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { LookPictureChooseCorrectAnswerClient } from './LookPictureChooseCorrectAnswerClient';
-import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
-import { lookPictureChooseCorrectAnswerFormSchema, } from '../../../../shared/lib/validation/look-picture-choose-correct-answer.validation';
-function LookPictureChooseCorrectAnswerContent({ initialData, onSave, onCancel, onChange, onUnsavedChangesChange, optionCount = 2, validationRef, }) {
-    // Helper to normalize options - ensure they are always string[]
-    const normalizeOptions = (opts, defaultCount) => {
-        if (!opts || opts.length === 0) {
-            return Array.from({ length: defaultCount }, () => '');
-        }
-        // Options should always be string[] - convert each to string for safety
-        return opts.map((opt) => String(opt || ''));
-    };
-    // Use react-hook-form with Zod validation
-    // initialData can be in API format (content.imageUrl, correctAnswer.answer) or flat format
-    const apiData = initialData;
-    const rawOptions = apiData?.content?.options || apiData?.options || [];
-    const form = useReactHookForm({
-        defaultValues: {
-            // Support both API format (content.imageUrl) and flat format (imageUrl)
-            imageUrl: apiData?.content?.imageUrl || apiData?.imageUrl || '',
-            // Use normalizeOptions to ensure options are always string[]
-            options: normalizeOptions(rawOptions, optionCount),
-            // Support both API format (correctAnswer.answer) and flat format (correctAnswer as number)
-            correctAnswer: typeof apiData?.correctAnswer === 'object'
-                ? (apiData?.correctAnswer?.answer ?? -1)
-                : (apiData?.correctAnswer ?? -1),
-            explanation: apiData?.explanation || '',
-            points: apiData?.points ?? 1,
-        },
-        zodSchema: lookPictureChooseCorrectAnswerFormSchema,
-        mode: 'onBlur',
-    });
-    // UI State
-    const [isClientMode, setIsClientMode] = useState(false);
-    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
-    // Track previous initialData to detect changes
-    const previousInitialDataRef = useRef(initialData);
-    const isInitializingRef = useRef(false);
-    const onChangeRef = useRef(onChange);
-    const previousPayloadRef = useRef('');
-    // Update onChange ref when it changes
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    // Debounced onChange callback to prevent excessive re-renders
-    const debouncedOnChange = useDebouncedCallback((data) => {
-        onChangeRef.current?.(data);
-    }, 300);
-    // Watch form values - MUST be declared before useEffects that use them
-    const watchedImageUrl = form.watch('imageUrl');
-    const watchedOptions = form.watch('options');
-    const watchedCorrectAnswer = form.watch('correctAnswer');
-    const watchedExplanation = form.watch('explanation');
-    const watchedPoints = form.watch('points');
-    // Custom hooks for presigned URL
-    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(watchedImageUrl);
-    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
-    // Expose validation function and getFormData via ref
-    useEffect(() => {
-        if (validationRef) {
-            validationRef.current = {
-                triggerValidation: async () => {
-                    const result = await form.trigger();
-                    // Also check correctAnswer
-                    if (watchedCorrectAnswer === -1) {
-                        form.setError('correctAnswer', { message: 'Vui lòng chọn đáp án đúng!' });
-                        return false;
-                    }
-                    return result;
-                },
-                // Return current form data immediately (not debounced)
-                getFormData: () => ({
-                    imageUrl: watchedImageUrl,
-                    options: watchedOptions,
-                    correctAnswer: watchedCorrectAnswer,
-                    explanation: watchedExplanation,
-                    points: watchedPoints,
-                }),
-            };
-        }
-    }, [validationRef, form, watchedCorrectAnswer, watchedImageUrl, watchedOptions, watchedExplanation, watchedPoints]);
-    // Sync state from initialData when it changes from EXTERNAL sources only
-    useEffect(() => {
-        const apiData = initialData;
-        const normalizedInitialData = {
-            imageUrl: apiData?.content?.imageUrl || apiData?.imageUrl || '',
-            options: normalizeOptions(apiData?.content?.options || apiData?.options || [], optionCount),
-            correctAnswer: typeof apiData?.correctAnswer === 'object'
-                ? (apiData?.correctAnswer?.answer ?? -1)
-                : (apiData?.correctAnswer ?? -1),
-            explanation: apiData?.explanation || '',
-            points: apiData?.points ?? 1,
-        };
-        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
-        if (!initialDataChanged) {
-            return;
-        }
-        previousInitialDataRef.current = initialData;
-        const currentFormData = {
-            imageUrl: watchedImageUrl,
-            options: watchedOptions,
-            correctAnswer: watchedCorrectAnswer,
-            explanation: watchedExplanation,
-            points: watchedPoints,
-        };
-        const isEchoFromOnChange = currentFormData.imageUrl === normalizedInitialData.imageUrl &&
-            currentFormData.correctAnswer === normalizedInitialData.correctAnswer &&
-            currentFormData.points === normalizedInitialData.points &&
-            currentFormData.explanation === normalizedInitialData.explanation &&
-            JSON.stringify(currentFormData.options) === JSON.stringify(normalizedInitialData.options);
-        const wasJustSaved = initialData?.isCompleted === true;
-        if (isEchoFromOnChange && wasJustSaved) {
-            return;
-        }
-        const shouldReset = !isEchoFromOnChange &&
-            normalizedInitialData.correctAnswer !== currentFormData.correctAnswer;
-        if (shouldReset && normalizedInitialData.correctAnswer !== -1) {
-            isInitializingRef.current = true;
-            form.reset(normalizedInitialData);
-            setTimeout(() => {
-                isInitializingRef.current = false;
-            }, 150);
-        }
-    }, [initialData, optionCount, form, watchedImageUrl, watchedOptions, watchedCorrectAnswer, watchedExplanation, watchedPoints]);
-    // Convert to payload format and call onChange
-    const watchedOptionsString = JSON.stringify(watchedOptions);
-    useEffect(() => {
-        if (isInitializingRef.current) {
-            const currentPayload = JSON.stringify({
-                imageUrl: watchedImageUrl,
-                options: watchedOptions,
-                correctAnswer: watchedCorrectAnswer,
-                explanation: watchedExplanation,
-                points: watchedPoints,
-            });
-            previousPayloadRef.current = currentPayload;
-            return;
-        }
-        const payload = {
-            imageUrl: watchedImageUrl,
-            options: watchedOptions,
-            correctAnswer: watchedCorrectAnswer,
-            explanation: watchedExplanation,
-            points: watchedPoints,
-        };
-        const payloadString = JSON.stringify(payload);
-        if (previousPayloadRef.current !== payloadString) {
-            previousPayloadRef.current = payloadString;
-            debouncedOnChange(payload);
-        }
-    }, [
-        watchedImageUrl,
-        watchedOptionsString,
-        watchedCorrectAnswer,
-        watchedExplanation,
-        watchedPoints,
-    ]);
-    // Handle save with validation
-    const handleSave = form.handleSubmit((data) => {
-        if (data.correctAnswer === -1 || data.correctAnswer >= data.options.length) {
-            form.setError('correctAnswer', { message: 'Vui lòng chọn đáp án đúng!' });
-            return;
-        }
-        onSave?.(data);
-    });
-    // Client mode preview
-    if (isClientMode) {
-        const questionData = {
-            subQuestions: [{
-                    id: 'preview-sq',
-                    imageUrl: displayPreviewUrl || watchedImageUrl,
-                    question: '',
-                    options: watchedOptions.map((text, index) => ({
-                        id: `opt-${index}`,
-                        text,
-                        isCorrect: index === watchedCorrectAnswer,
-                    })),
-                }],
-        };
-        const correctAnswers = watchedCorrectAnswer !== -1
-            ? { 'preview-sq': `opt-${watchedCorrectAnswer}` }
-            : {};
-        return (_jsx("div", { className: "space-y-6", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Nh\u00ECn tranh, ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _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(CardContent, { children: _jsx(LookPictureChooseCorrectAnswerClient, { questionData: questionData, isReviewMode: true, userAnswer: correctAnswers, explanation: watchedExplanation }) })] }) }));
-    }
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-cyan-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-cyan-500 via-teal-500 to-emerald-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500 to-teal-600 shadow-md", children: _jsx(Image, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Nh\u00ECn tranh, ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "text-sm text-gray-500", children: "T\u1EA1o c\u00E2u h\u1ECFi v\u1EDBi h\u00ECnh \u1EA3nh v\u00E0 c\u00E1c l\u1EF1a ch\u1ECDn \u0111\u00E1p \u00E1n" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { defaultValue: watchedPoints, onChange: (e) => form.setValue('points', Number(e.target.value) || 1) }) }), _jsxs("div", { className: "rounded-xl border-2 border-teal-100 bg-gradient-to-r from-teal-50/30 to-cyan-50/30 p-5", children: [_jsxs("div", { className: "mb-4 flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(Image, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsx("span", { className: "text-sm font-semibold text-teal-800", children: "H\u00ECnh \u1EA3nh c\u00E2u h\u1ECFi" })] }), _jsx(FileUpload, { id: "image-upload", label: "H\u00ECnh \u1EA3nh", accept: "image/*", value: watchedImageUrl, onChange: (url) => form.setValue('imageUrl', url, { shouldValidate: true }), onPresignedUrlChange: (presignedUrl) => setImagePreviewUrl(presignedUrl), maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", required: true, autoUpload: true, prefix: "questions" }), form.hasError('imageUrl') && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: form.formState.errors.imageUrl?.message })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview for question", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })] })] }), _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 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-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", watchedOptions.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
-                                        const currentOptions = form.getValues('options');
-                                        form.setValue('options', [...currentOptions, '']);
-                                    }, 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"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(RadioGroup, { value: watchedCorrectAnswer.toString(), onValueChange: (value) => {
-                                    form.setValue('correctAnswer', Number(value), { shouldValidate: true });
-                                }, children: watchedOptions.map((option, index) => {
-                                    const optionError = form.formState.errors.options?.[index];
-                                    const isCorrect = watchedCorrectAnswer === index;
-                                    const optionLetter = String.fromCharCode(65 + index);
-                                    return (_jsx("div", { className: `group relative rounded-xl border-2 p-4 transition-all duration-200 ${isCorrect
-                                            ? 'border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100'
-                                            : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'}`, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: `flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all ${isCorrect
-                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
-                                                        : 'bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600'}`, onClick: () => form.setValue('correctAnswer', index, { shouldValidate: true }), children: optionLetter }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Input, { id: `option-input-${index}`, ...form.register(`options.${index}`), placeholder: `Nhập đáp án ${optionLetter}...`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${optionError ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [!isCorrect && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => form.setValue('correctAnswer', index, { shouldValidate: true }), className: "text-gray-400 hover:text-green-600", title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: _jsx(CheckCircle2, { className: "h-4 w-4" }) })), watchedOptions.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
-                                                                const currentOptions = form.getValues('options');
-                                                                const newOptions = currentOptions.filter((_, i) => i !== index);
-                                                                form.setValue('options', newOptions);
-                                                                // Adjust correctAnswer if needed
-                                                                const currentCorrect = form.getValues('correctAnswer');
-                                                                if (currentCorrect === index) {
-                                                                    form.setValue('correctAnswer', -1);
-                                                                }
-                                                                else if (currentCorrect > index) {
-                                                                    form.setValue('correctAnswer', currentCorrect - 1);
-                                                                }
-                                                            }, className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }) }, index));
-                                }) }), watchedCorrectAnswer === -1 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-amber-700", children: "Click v\u00E0o \u00F4 ch\u1EEF c\u00E1i ho\u1EB7c icon \u2713 \u0111\u1EC3 ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" })] })] })), form.hasError('correctAnswer') && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsx("div", { className: "text-sm text-red-600", children: form.formState.errors.correctAnswer?.message })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", ...form.register('explanation'), 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" }) })] })] }));
-}
-export function LookPictureChooseCorrectAnswerCreator(props) {
-    return _jsx(LookPictureChooseCorrectAnswerContent, { ...props });
-}
-// Legacy export for backward compatibility
-export const LookPictureChooseCorrectAnswer = LookPictureChooseCorrectAnswerCreator;

package/dist/components/questions/types/look-picture-choose-correct-answer/index.d.ts

@@ -1 +0,0 @@
-export * from './LookPictureChooseCorrectAnswerCreator';

package/dist/components/questions/types/look-picture-choose-correct-answer/index.js

@@ -1 +0,0 @@
-export * from './LookPictureChooseCorrectAnswerCreator';

package/dist/components/questions/types/look-picture-choose-correct-answer/register.d.ts

@@ -1,2 +0,0 @@
-import type { QuestionTypeRegistration } from '../../creator/question-type-registry';
-export declare const lookPictureChooseCorrectAnswerRegistration: QuestionTypeRegistration;

package/dist/components/questions/types/look-picture-choose-correct-answer/register.js

@@ -1,66 +0,0 @@
-import { LookPictureChooseCorrectAnswer } from './LookPictureChooseCorrectAnswerCreator';
-export const lookPictureChooseCorrectAnswerRegistration = {
-    component: LookPictureChooseCorrectAnswer,
-    transformInitialData: (initialData) => {
-        let creatorData = undefined;
-        const content = initialData?.content;
-        const answer = initialData?.answer;
-        const apiPoints = initialData?.total_points
-            ? parseFloat(initialData.total_points)
-            : (initialData?.points || answer?.points || 1);
-        const normalizeOptions = (opts) => {
-            if (!Array.isArray(opts) || opts.length === 0)
-                return [];
-            return opts.map((opt) => String(opt || ''));
-        };
-        // Priority 1: Data from reverse transform or store
-        if (answer?.imageUrl !== undefined || answer?.options) {
-            creatorData = {
-                imageUrl: answer.imageUrl || '',
-                options: normalizeOptions(answer.options || []),
-                correctAnswer: typeof answer.correctAnswer === 'number' ? answer.correctAnswer : -1,
-                explanation: answer.explanation || initialData?.explanation || '',
-                points: answer.points || apiPoints,
-            };
-        }
-        // Priority 2: Raw API content format
-        else if (content && (content.imageUrl !== undefined || content.options)) {
-            let correctAnswer = -1;
-            if (typeof answer?.answer === 'number')
-                correctAnswer = answer.answer;
-            else if (typeof initialData?.correct_answer?.answer === 'number')
-                correctAnswer = initialData.correct_answer.answer;
-            creatorData = {
-                imageUrl: content.imageUrl || '',
-                options: normalizeOptions(content.options || []),
-                correctAnswer,
-                explanation: initialData?.explanation || '',
-                points: apiPoints,
-            };
-        }
-        return creatorData;
-    },
-    getExtraProps: (ctx) => ({
-        optionCount: ctx.optionCount ?? undefined,
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        validationRef: ctx.validationRef,
-    }),
-    wrapOnSave: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-    }),
-    wrapOnChange: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-    }),
-};

package/dist/components/questions/types/look-picture-choose-correct-answer/transform.d.ts

@@ -1,2 +0,0 @@
-import type { TransformHandler } from '../../../../shared/lib/utils/question-transform-types';
-export declare const transformLookPictureChooseCorrectAnswer: TransformHandler;