@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

package/dist/components/questions/types/answer-the-question/AnswerTheQuestionClient.js

@@ -1,37 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardContent } from '../../../../components/ui/card';
-import { Input } from '../../../../components/ui/input';
-import { Label } from '../../../../components/ui/label';
-import { CheckCircle2, XCircle, BookOpen } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { useState } from 'react';
-export function AnswerTheQuestionClient({ questionData, onSubmit, isReviewMode = false, userAnswer, autoFillCorrectAnswers = false, explanation, }) {
-    const [answer, setAnswer] = useState(userAnswer || '');
-    const { previewUrl: imagePreviewUrl } = usePresignedFileUrl(questionData.imageUrl || '');
-    if (!questionData.question) {
-        return (_jsx(Card, { children: _jsx(CardContent, { className: "p-6", children: _jsx("p", { className: "text-gray-500", children: "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u c\u00E2u h\u1ECFi" }) }) }));
-    }
-    const isExample = questionData.isExample || false;
-    const displayedAnswer = autoFillCorrectAnswers || isExample
-        ? questionData.correctAnswer
-        : answer;
-    const isCorrect = isReviewMode && userAnswer !== undefined
-        ? userAnswer.trim().toLowerCase() === questionData.correctAnswer.trim().toLowerCase()
-        : undefined;
-    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-500" }), _jsxs(CardContent, { className: "p-6 space-y-6", children: [(questionData.title || questionData.groupContent) && (_jsxs("div", { className: "rounded-xl border border-indigo-200 bg-gradient-to-r from-indigo-50 to-blue-50 p-4 space-y-2", children: [questionData.title && (_jsx("h3", { className: "text-base font-bold text-indigo-900", children: questionData.title })), questionData.groupContent && (_jsx("p", { className: "text-sm text-indigo-700 leading-relaxed whitespace-pre-wrap", children: questionData.groupContent }))] })), (imagePreviewUrl || questionData.imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "relative max-w-lg overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm", children: _jsx("img", { src: imagePreviewUrl || questionData.imageUrl, alt: "Question", className: "h-auto max-h-80 w-full object-contain" }) }) })), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5", children: [isExample && (_jsxs("div", { className: "mb-2 inline-flex items-center gap-1.5 rounded-full bg-amber-100 border border-amber-300 px-3 py-1", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5 text-amber-600" }), _jsx("span", { className: "text-xs font-semibold text-amber-700 uppercase tracking-wide", children: "Example" })] })), _jsx(Label, { className: "text-base font-semibold text-gray-800 mb-3 block", children: questionData.question }), questionData.suggestedAnswers && questionData.suggestedAnswers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-2 mb-1", children: questionData.suggestedAnswers.map((suggestion, index) => (_jsx("button", { type: "button", disabled: isReviewMode || isExample, onClick: () => {
-                                        if (!isReviewMode && !isExample) {
-                                            setAnswer(suggestion);
-                                            onSubmit?.(suggestion);
-                                        }
-                                    }, className: `inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium transition-colors ${answer === suggestion
-                                        ? 'border-teal-400 bg-teal-50 text-teal-700 ring-1 ring-teal-200'
-                                        : 'border-gray-200 bg-white text-gray-600 hover:border-teal-300 hover:bg-teal-50/50 hover:text-teal-600'} ${isReviewMode || isExample ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`, children: suggestion }, index))) })), _jsxs("div", { className: "flex items-center gap-3 mt-3", children: [questionData.prefixText && (_jsx("span", { className: "text-base font-medium text-gray-700", children: questionData.prefixText })), _jsx(Input, { value: displayedAnswer, onChange: (e) => {
-                                            setAnswer(e.target.value);
-                                            onSubmit?.(e.target.value);
-                                        }, placeholder: "Vi\u1EBFt \u0111\u00E1p \u00E1n...", disabled: isReviewMode || isExample, className: `max-w-xs border-2 text-lg font-medium ${isReviewMode
-                                            ? isCorrect
-                                                ? 'border-green-400 bg-green-50 text-green-700'
-                                                : 'border-red-400 bg-red-50 text-red-700'
-                                            : 'border-teal-300 focus:border-teal-500 focus:ring-teal-200'}` }), questionData.suffixText && (_jsx("span", { className: "text-base font-medium text-gray-700", children: questionData.suffixText })), isReviewMode && isCorrect !== undefined && (_jsx("span", { className: "flex items-center gap-1", children: isCorrect ? (_jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" })) : (_jsx(XCircle, { className: "h-5 w-5 text-red-500" })) }))] }), isReviewMode && isCorrect === false && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-green-50 border border-green-200 px-4 py-2", children: [_jsx(CheckCircle2, { 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: questionData.correctAnswer })] })] })), autoFillCorrectAnswers && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-teal-50 border border-teal-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-teal-600" }), _jsxs("span", { className: "text-sm text-teal-700", children: ["\u0110\u00E1p \u00E1n: ", _jsx("strong", { children: questionData.correctAnswer })] })] }))] }), explanation && isReviewMode && (_jsxs("div", { className: "rounded-xl border border-blue-200 bg-blue-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-blue-800 mb-1", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "text-sm text-blue-700", children: explanation })] }))] })] }));
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Card as t,CardContent as a}from"../../../../components/ui/card";import{Input as s}from"../../../../components/ui/input";import{Label as l}from"../../../../components/ui/label";import{CheckCircle2 as n,XCircle as o,BookOpen as i}from"lucide-react";import{usePresignedFileUrl as d}from"../../../../shared/lib/hooks";import{useState as c}from"react";export function AnswerTheQuestionClient({questionData:m,onSubmit:g,isReviewMode:x=!1,userAnswer:b,autoFillCorrectAnswers:p=!1,explanation:u}){const[h,f]=c(b||""),{previewUrl:N}=d(m.imageUrl||"");if(!m.question)return e(t,{children:e(a,{className:"p-6",children:e("p",{className:"text-gray-500",children:"Không có dữ liệu câu hỏi"})})});const w=m.isExample||!1,v=p||w?m.correctAnswer:h,y=x&&void 0!==b?b.trim().toLowerCase()===m.correctAnswer.trim().toLowerCase():void 0;return r(t,{className:"overflow-hidden border-0 bg-white shadow-lg",children:[e("div",{className:"h-1 bg-gradient-to-r from-teal-400 to-cyan-500"}),r(a,{className:"p-6 space-y-6",children:[(m.title||m.groupContent)&&r("div",{className:"rounded-xl border border-indigo-200 bg-gradient-to-r from-indigo-50 to-blue-50 p-4 space-y-2",children:[m.title&&e("h3",{className:"text-base font-bold text-indigo-900",children:m.title}),m.groupContent&&e("p",{className:"text-sm text-indigo-700 leading-relaxed whitespace-pre-wrap",children:m.groupContent})]}),(N||m.imageUrl)&&e("div",{className:"flex justify-center",children:e("div",{className:"relative max-w-lg overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm",children:e("img",{src:N||m.imageUrl,alt:"Question",className:"h-auto max-h-80 w-full object-contain"})})}),r("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5",children:[w&&r("div",{className:"mb-2 inline-flex items-center gap-1.5 rounded-full bg-amber-100 border border-amber-300 px-3 py-1",children:[e(i,{className:"h-3.5 w-3.5 text-amber-600"}),e("span",{className:"text-xs font-semibold text-amber-700 uppercase tracking-wide",children:"Example"})]}),e(l,{className:"text-base font-semibold text-gray-800 mb-3 block",children:m.question}),m.suggestedAnswers&&m.suggestedAnswers.length>0&&e("div",{className:"flex flex-wrap gap-2 mt-2 mb-1",children:m.suggestedAnswers.map((r,t)=>e("button",{type:"button",disabled:x||w,onClick:()=>{x||w||(f(r),g?.(r))},className:`inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium transition-colors ${h===r?"border-teal-400 bg-teal-50 text-teal-700 ring-1 ring-teal-200":"border-gray-200 bg-white text-gray-600 hover:border-teal-300 hover:bg-teal-50/50 hover:text-teal-600"} ${x||w?"cursor-not-allowed opacity-60":"cursor-pointer"}`,children:r},t))}),r("div",{className:"flex items-center gap-3 mt-3",children:[m.prefixText&&e("span",{className:"text-base font-medium text-gray-700",children:m.prefixText}),e(s,{value:v,onChange:e=>{f(e.target.value),g?.(e.target.value)},placeholder:"Viết đáp án...",disabled:x||w,className:"max-w-xs border-2 text-lg font-medium "+(x?y?"border-green-400 bg-green-50 text-green-700":"border-red-400 bg-red-50 text-red-700":"border-teal-300 focus:border-teal-500 focus:ring-teal-200")}),m.suffixText&&e("span",{className:"text-base font-medium text-gray-700",children:m.suffixText}),x&&void 0!==y&&e("span",{className:"flex items-center gap-1",children:y?e(n,{className:"h-5 w-5 text-green-500"}):e(o,{className:"h-5 w-5 text-red-500"})})]}),x&&!1===y&&r("div",{className:"mt-3 flex items-center gap-2 rounded-lg bg-green-50 border border-green-200 px-4 py-2",children:[e(n,{className:"h-4 w-4 text-green-600"}),r("span",{className:"text-sm text-green-700",children:["Đáp án đúng: ",e("strong",{children:m.correctAnswer})]})]}),p&&r("div",{className:"mt-3 flex items-center gap-2 rounded-lg bg-teal-50 border border-teal-200 px-4 py-2",children:[e(n,{className:"h-4 w-4 text-teal-600"}),r("span",{className:"text-sm text-teal-700",children:["Đáp án: ",e("strong",{children:m.correctAnswer})]})]})]}),u&&x&&r("div",{className:"rounded-xl border border-blue-200 bg-blue-50 p-4",children:[e("p",{className:"text-sm font-semibold text-blue-800 mb-1",children:"Giải thích:"}),e("p",{className:"text-sm text-blue-700",children:u})]})]})]})}

package/dist/components/questions/types/answer-the-question/AnswerTheQuestionCreator.js

@@ -1,351 +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 { Label } from '../../../../components/ui/label';
-import { Input } from '../../../../components/ui/input';
-import { Textarea } from '../../../../components/ui/textarea';
-import { PointsInput } from '../../../../components/ui/points-input';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { Pencil, Eye, HelpCircle, BookOpen, Plus, X, ListChecks, MessageSquare } from 'lucide-react';
-import { Checkbox } from '../../../../components/ui/checkbox';
-import { AnswerTheQuestionClient } from './AnswerTheQuestionClient';
-import { useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
-import { useBasicQuestionGroup, getGroupNumberForIndex } from '../../_shared/hooks/useBasicQuestionGroup';
-/**
- * AnswerTheQuestionCreator - Single Question Mode
- *
- * This component handles ONE question at a time. Navigation between questions
- * is handled by the parent ExamCreator component.
- *
- * Shared data within group:
- * - imageUrl: string (the question image, shared between questions in same group)
- * - title: string (the group title, shared between questions in same group)
- *
- * Per-question data:
- * - question: string (the question text)
- * - correctAnswer: string (the answer - a name or number)
- * - suffixText: string (optional text after the input, e.g. "School")
- * - prefixText: string (optional text before the input)
- */
-function AnswerTheQuestionContent({ initialData, onSave, onSaveToQuestionBank, onCancel, onChange, onUnsavedChangesChange, externalErrors, groups, questionIndexInPart = 0, partId = '', validationRef, suggestedAnswers: templateSuggestedAnswers, groupConfig, hasSuggestedAnswers, headerExtra, }) {
-    // Create a default single question
-    const createDefaultQuestion = () => {
-        const groupNumber = getGroupNumberForIndex(questionIndexInPart, groups);
-        return {
-            id: `sq-${Date.now()}-${Math.random()}`,
-            question: '',
-            correctAnswer: '',
-            suffixText: '',
-            prefixText: '',
-            points: 1,
-            groupNumber,
-            isExample: false,
-            suggestedAnswers: templateSuggestedAnswers || [],
-        };
-    };
-    // Initialize from initialData or create new
-    const initializeQuestion = () => {
-        // Flat format from register.tsx transformInitialData
-        if (initialData?.question) {
-            return {
-                id: `sq-${Date.now()}-imported`,
-                question: initialData.question,
-                correctAnswer: initialData.correctAnswer || '',
-                suffixText: initialData.suffixText || '',
-                prefixText: initialData.prefixText || '',
-                points: initialData.points || 1,
-                groupNumber: getGroupNumberForIndex(questionIndexInPart, groups),
-                isExample: initialData.isExample || false,
-                suggestedAnswers: initialData.suggestedAnswers?.length ? initialData.suggestedAnswers : (templateSuggestedAnswers || []),
-            };
-        }
-        return createDefaultQuestion();
-    };
-    // State for current question
-    const [currentQuestion, setCurrentQuestion] = useState(initializeQuestion);
-    // ============ GROUP (shared title / content / image) ============
-    const { isGrouped, currentGroupNumber: hookGroupNumber, groupTitle, groupSubtitle, groupContent, imageUrl, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl, } = useBasicQuestionGroup({
-        partId,
-        groups,
-        questionIndexInPart,
-        initialData: {
-            title: (() => {
-                const content = initialData?.content;
-                const answer = initialData?.answer;
-                const qgPayload = initialData?.questionGroup?.payload;
-                return answer?.title || content?.passageTitle || qgPayload?.title || initialData?.title || '';
-            })(),
-            subtitle: (() => {
-                const content = initialData?.content;
-                const qgPayload = initialData?.questionGroup?.payload;
-                return content?.passageSubtitle || qgPayload?.subtitle || '';
-            })(),
-            content: (() => {
-                const content = initialData?.content;
-                const qgPayload = initialData?.questionGroup?.payload;
-                return initialData?.groupContent || qgPayload?.content || content?.passage || '';
-            })(),
-            imageUrl: (() => {
-                const content = initialData?.content;
-                const answer = initialData?.answer;
-                const qgPayload = initialData?.questionGroup?.payload;
-                return answer?.imageUrl || content?.imageUrl || qgPayload?.imageUrl || initialData?.imageUrl || '';
-            })(),
-        },
-    });
-    // UI State
-    const [isClientMode, setIsClientMode] = useState(false);
-    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-    const [explanation, setExplanation] = useState(initialData?.explanation || '');
-    // Inline validation errors
-    const [validationErrors, setValidationErrors] = useState({});
-    // Store the last saved state for comparison
-    const savedStateRef = useRef('');
-    // Refs for change tracking
-    const previousInitialDataRef = useRef(initialData);
-    const previousQuestionIndexRef = useRef(questionIndexInPart);
-    const isInitializingRef = useRef(false);
-    const hasInitializedRef = useRef(false);
-    const onChangeRef = useRef(onChange);
-    const previousPayloadRef = useRef('');
-    // Current group number – prefer the hook's derived value (from groups config),
-    // fall back to the question's own stored groupNumber
-    const currentGroupNumber = hookGroupNumber || currentQuestion.groupNumber || 1;
-    // Ref for onUnsavedChangesChange callback
-    const onUnsavedChangesChangeRef = useRef(onUnsavedChangesChange);
-    useEffect(() => {
-        onUnsavedChangesChangeRef.current = onUnsavedChangesChange;
-    }, [onUnsavedChangesChange]);
-    // Update onChange ref
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    // Debounced onChange callback
-    const debouncedOnChange = useDebouncedCallback((data) => {
-        onChangeRef.current?.(data);
-    }, 300);
-    // Helper function to create current state string for comparison
-    const getCurrentStateString = () => {
-        return JSON.stringify({
-            imageUrl,
-            title: groupTitle,
-            subtitle: groupSubtitle,
-            question: currentQuestion.question,
-            correctAnswer: currentQuestion.correctAnswer,
-            suffixText: currentQuestion.suffixText,
-            prefixText: currentQuestion.prefixText,
-            points: currentQuestion.points,
-            isExample: currentQuestion.isExample,
-            suggestedAnswers: currentQuestion.suggestedAnswers,
-        });
-    };
-    // Initialize saved state when questionIndexInPart changes (navigation)
-    useEffect(() => {
-        if (isInitializingRef.current)
-            return;
-        const timer = setTimeout(() => {
-            savedStateRef.current = getCurrentStateString();
-            setHasUnsavedChanges(false);
-        }, 150);
-        return () => clearTimeout(timer);
-    }, [questionIndexInPart]);
-    // Detect unsaved changes
-    useEffect(() => {
-        if (isInitializingRef.current)
-            return;
-        if (!savedStateRef.current)
-            return;
-        const currentState = getCurrentStateString();
-        const hasChanges = currentState !== savedStateRef.current;
-        if (hasChanges !== hasUnsavedChanges) {
-            setHasUnsavedChanges(hasChanges);
-            onUnsavedChangesChangeRef.current?.(hasChanges);
-        }
-    }, [imageUrl, currentQuestion, hasUnsavedChanges]);
-    // Expose validation function via ref
-    useEffect(() => {
-        if (validationRef) {
-            validationRef.current = {
-                triggerValidation: async () => {
-                    const errors = {};
-                    let isValid = true;
-                    if (!currentQuestion.question || currentQuestion.question.trim() === '') {
-                        errors.question = 'Vui lòng nhập câu hỏi';
-                        isValid = false;
-                    }
-                    if (!currentQuestion.correctAnswer || currentQuestion.correctAnswer.trim() === '') {
-                        errors.correctAnswer = 'Vui lòng nhập đáp án';
-                        isValid = false;
-                    }
-                    setValidationErrors(errors);
-                    return isValid;
-                },
-                getFormData: () => ({
-                    imageUrl,
-                    title: groupTitle,
-                    subtitle: groupSubtitle,
-                    question: currentQuestion.question,
-                    correctAnswer: currentQuestion.correctAnswer,
-                    suffixText: currentQuestion.suffixText,
-                    prefixText: currentQuestion.prefixText,
-                    points: currentQuestion.points,
-                    groupNumber: currentQuestion.groupNumber,
-                    isExample: currentQuestion.isExample,
-                    suggestedAnswers: currentQuestion.suggestedAnswers,
-                    explanation,
-                    groups,
-                }),
-            };
-        }
-    }, [validationRef, currentQuestion, imageUrl, groupTitle, groupSubtitle, explanation, groups]);
-    // Sync from initialData when navigation or first init
-    // Note: shared group data (title/content/image) is managed by useBasicQuestionGroup hook.
-    // This effect handles question-specific fields and explanation only.
-    useEffect(() => {
-        const questionIndexChanged = questionIndexInPart !== previousQuestionIndexRef.current;
-        const hasValidInitialData = !!initialData?.question;
-        const shouldSyncForFirstInit = !hasInitializedRef.current && hasValidInitialData;
-        const shouldSyncForNavigation = questionIndexChanged;
-        if (!shouldSyncForFirstInit && !shouldSyncForNavigation) {
-            return;
-        }
-        isInitializingRef.current = true;
-        previousInitialDataRef.current = initialData;
-        previousQuestionIndexRef.current = questionIndexInPart;
-        hasInitializedRef.current = true;
-        const groupNum = getGroupNumberForIndex(questionIndexInPart, groups);
-        // Initialize question
-        setCurrentQuestion({
-            ...initializeQuestion(),
-            groupNumber: groupNum,
-        });
-        // Set explanation
-        setExplanation(initialData?.explanation || '');
-        setTimeout(() => {
-            isInitializingRef.current = false;
-        }, 100);
-    }, [initialData, groups, questionIndexInPart]);
-    // Call onChange when data changes
-    useEffect(() => {
-        if (isInitializingRef.current)
-            return;
-        const payload = {
-            question: currentQuestion.question,
-            correctAnswer: currentQuestion.correctAnswer,
-            suffixText: currentQuestion.suffixText,
-            prefixText: currentQuestion.prefixText,
-            points: currentQuestion.points || 1,
-            groupNumber: currentQuestion.groupNumber,
-            isExample: currentQuestion.isExample,
-            suggestedAnswers: currentQuestion.suggestedAnswers,
-            imageUrl,
-            title: groupTitle,
-            subtitle: groupSubtitle,
-            groupContent,
-            explanation,
-            groups,
-        };
-        const payloadString = JSON.stringify(payload);
-        if (previousPayloadRef.current !== payloadString) {
-            previousPayloadRef.current = payloadString;
-            debouncedOnChange(payload);
-        }
-    }, [imageUrl, groupTitle, groupSubtitle, groupContent, explanation, currentQuestion, groups, debouncedOnChange]);
-    // Update current question field
-    const updateCurrentQuestion = (field, value) => {
-        setCurrentQuestion((prev) => ({ ...prev, [field]: value }));
-        // Clear validation errors
-        if (field === 'question' && validationErrors.question) {
-            setValidationErrors(prev => ({ ...prev, question: undefined }));
-        }
-        if (field === 'correctAnswer' && validationErrors.correctAnswer) {
-            setValidationErrors(prev => ({ ...prev, correctAnswer: undefined }));
-        }
-    };
-    // Validate all fields
-    const validate = () => {
-        const errors = {};
-        let isValid = true;
-        if (!currentQuestion.question || currentQuestion.question.trim() === '') {
-            errors.question = 'Vui lòng nhập câu hỏi';
-            isValid = false;
-        }
-        if (!currentQuestion.correctAnswer || currentQuestion.correctAnswer.trim() === '') {
-            errors.correctAnswer = 'Vui lòng nhập đáp án';
-            isValid = false;
-        }
-        setValidationErrors(errors);
-        return isValid;
-    };
-    // Handle save
-    const handleSave = () => {
-        if (!validate())
-            return;
-        const payload = {
-            question: currentQuestion.question,
-            correctAnswer: currentQuestion.correctAnswer,
-            suffixText: currentQuestion.suffixText,
-            prefixText: currentQuestion.prefixText,
-            points: currentQuestion.points || 1,
-            groupNumber: currentQuestion.groupNumber,
-            isExample: currentQuestion.isExample,
-            suggestedAnswers: currentQuestion.suggestedAnswers,
-            imageUrl,
-            title: groupTitle,
-            subtitle: groupSubtitle,
-            explanation,
-            groups,
-        };
-        // Update saved state
-        savedStateRef.current = getCurrentStateString();
-        setHasUnsavedChanges(false);
-        onSave?.(payload);
-    };
-    // Client mode preview
-    if (isClientMode) {
-        const questionData = {
-            question: currentQuestion.question,
-            correctAnswer: currentQuestion.correctAnswer,
-            suffixText: currentQuestion.suffixText,
-            prefixText: currentQuestion.prefixText,
-            points: currentQuestion.points,
-            groupNumber: currentQuestion.groupNumber,
-            isExample: currentQuestion.isExample,
-            suggestedAnswers: currentQuestion.suggestedAnswers,
-            imageUrl,
-            title: groupTitle,
-            subtitle: groupSubtitle,
-        };
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Answer the question (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(AnswerTheQuestionClient, { questionData: questionData, isReviewMode: true, autoFillCorrectAnswers: true, explanation: explanation })] }));
-    }
-    // Creator UI
-    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: imageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setImageUrl, groupConfig: groupConfig, uploadIdPrefix: `answer-the-question-${partId ?? 'group'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 shadow-sm", children: _jsx(HelpCircle, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110\u1ECDc c\u00E2u h\u1ECFi v\u00E0 vi\u1EBFt \u0111\u00E1p \u00E1n" }), _jsx("p", { className: "text-xs text-gray-500", children: "Nghe - \u0110\u1ECDc c\u00E2u h\u1ECFi v\u00E0 vi\u1EBFt t\u00EAn ho\u1EB7c s\u1ED1" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !currentQuestion.question, 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-4 px-4 pb-4", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsx(PointsInput, { value: currentQuestion.points || 1, onChange: (e) => updateCurrentQuestion('points', parseFloat(e.target.value) || 1) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "isExample", checked: currentQuestion.isExample || false, onCheckedChange: (checked) => updateCurrentQuestion('isExample', !!checked) }), _jsx(Label, { htmlFor: "isExample", className: "flex items-center gap-1.5 cursor-pointer text-sm font-medium text-gray-700", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 c\u00E2u h\u1ECFi Example" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-teal-500" }), "C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "question", value: currentQuestion.question, onChange: (e) => updateCurrentQuestion('question', e.target.value), placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi... (vd: How many dolls has Lucy got?)", className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${validationErrors.question ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.question && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.question }))] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "correctAnswer", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(HelpCircle, { className: "h-4 w-4 text-green-500" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "correctAnswer", value: currentQuestion.correctAnswer, onChange: (e) => updateCurrentQuestion('correctAnswer', e.target.value), placeholder: "Nh\u1EADp \u0111\u00E1p \u00E1n... (vd: 5 ho\u1EB7c Buster)", className: `border-gray-200 bg-white transition-all focus:border-green-300 focus:ring-green-200 ${validationErrors.correctAnswer ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.correctAnswer && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.correctAnswer }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "prefixText", className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-gray-400" }), "Text tr\u01B0\u1EDBc \u00F4 tr\u1EA3 l\u1EDDi ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(t\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: "prefixText", value: currentQuestion.prefixText || '', onChange: (e) => updateCurrentQuestion('prefixText', e.target.value), placeholder: "vd: There are", className: "border-gray-200 bg-white transition-all focus:border-gray-300 focus:ring-gray-200" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "suffixText", className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-gray-400" }), "Text sau \u00F4 tr\u1EA3 l\u1EDDi ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(t\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: "suffixText", value: currentQuestion.suffixText || '', onChange: (e) => updateCurrentQuestion('suffixText', e.target.value), placeholder: "vd: school", className: "border-gray-200 bg-white transition-all focus:border-gray-300 focus:ring-gray-200" })] })] }), hasSuggestedAnswers !== false && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ListChecks, { className: "h-4 w-4 text-purple-500" }), "\u0110\u00E1p \u00E1n g\u1EE3i \u00FD ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(t\u00F9y ch\u1ECDn)" })] }), _jsxs("div", { className: "rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-violet-50 p-4 space-y-3", children: [currentQuestion.suggestedAnswers && currentQuestion.suggestedAnswers.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: currentQuestion.suggestedAnswers.map((suggestion, index) => (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-white border border-purple-200 px-3 py-1 text-sm font-medium text-purple-700 shadow-sm", children: [suggestion, _jsx("button", { type: "button", onClick: () => {
-                                                                const updated = [...(currentQuestion.suggestedAnswers || [])];
-                                                                updated.splice(index, 1);
-                                                                updateCurrentQuestion('suggestedAnswers', updated);
-                                                            }, className: "ml-0.5 rounded-full p-0.5 text-purple-400 hover:bg-purple-100 hover:text-purple-600 transition-colors", children: _jsx(X, { className: "h-3 w-3" }) })] }, index))) })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: "newSuggestedAnswer", placeholder: "Nh\u1EADp \u0111\u00E1p \u00E1n g\u1EE3i \u00FD...", className: "flex-1 border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200", onKeyDown: (e) => {
-                                                            if (e.key === 'Enter') {
-                                                                e.preventDefault();
-                                                                const input = e.currentTarget;
-                                                                const value = input.value.trim();
-                                                                if (value) {
-                                                                    const current = currentQuestion.suggestedAnswers || [];
-                                                                    updateCurrentQuestion('suggestedAnswers', [...current, value]);
-                                                                    input.value = '';
-                                                                }
-                                                            }
-                                                        } }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "gap-1 border-purple-300 text-purple-600 hover:bg-purple-100 hover:text-purple-700", onClick: () => {
-                                                            const input = document.getElementById('newSuggestedAnswer');
-                                                            const value = input?.value.trim();
-                                                            if (value) {
-                                                                const current = currentQuestion.suggestedAnswers || [];
-                                                                updateCurrentQuestion('suggestedAnswers', [...current, value]);
-                                                                input.value = '';
-                                                            }
-                                                        }, children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm"] })] }), _jsx("p", { className: "text-xs text-purple-500", children: "Nh\u1EADp \u0111\u00E1p \u00E1n g\u1EE3i \u00FD r\u1ED3i nh\u1EA5n Enter ho\u1EB7c n\u00FAt Th\u00EAm" })] })] })), externalErrors && externalErrors.length > 0 && (_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" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", 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-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base 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-xs 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, { className: "px-4 pb-4", children: _jsx(Textarea, { id: "explanation", 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" }) })] })] }));
-}
-export function AnswerTheQuestionCreator(props) {
-    return _jsx(AnswerTheQuestionContent, { ...props });
-}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as r,useRef as s,useEffect as n}from"react";import{Button as i}from"../../../../components/ui/button";import{Label as a}from"../../../../components/ui/label";import{Input as o}from"../../../../components/ui/input";import{Textarea as l}from"../../../../components/ui/textarea";import{PointsInput as c}from"../../../../components/ui/points-input";import{Card as u,CardContent as d,CardHeader as m,CardTitle as p}from"../../../../components/ui/card";import{Pencil as g,Eye as x,HelpCircle as h,BookOpen as f,Plus as b,X as w,ListChecks as N,MessageSquare as v}from"lucide-react";import{Checkbox as y}from"../../../../components/ui/checkbox";import{AnswerTheQuestionClient as A}from"./AnswerTheQuestionClient";import{useDebouncedCallback as T}from"../../../../shared/lib/hooks";import{BasicQuestionGroupCard as q}from"../../groups/BasicQuestionGroupCard";import{useBasicQuestionGroup as C,getGroupNumberForIndex as E}from"../../_shared/hooks/useBasicQuestionGroup";function k({initialData:k,onSave:G,onSaveToQuestionBank:U,onCancel:S,onChange:I,onUnsavedChangesChange:D,externalErrors:j,groups:F,questionIndexInPart:Q=0,partId:B="",validationRef:z,suggestedAnswers:P,groupConfig:V,hasSuggestedAnswers:$,headerExtra:M}){const H=()=>k?.question?{id:`sq-${Date.now()}-imported`,question:k.question,correctAnswer:k.correctAnswer||"",suffixText:k.suffixText||"",prefixText:k.prefixText||"",points:k.points||1,groupNumber:E(Q,F),isExample:k.isExample||!1,suggestedAnswers:k.suggestedAnswers?.length?k.suggestedAnswers:P||[]}:(()=>{const e=E(Q,F);return{id:`sq-${Date.now()}-${Math.random()}`,question:"",correctAnswer:"",suffixText:"",prefixText:"",points:1,groupNumber:e,isExample:!1,suggestedAnswers:P||[]}})(),[J,K]=r(H),{isGrouped:L,currentGroupNumber:O,groupTitle:R,groupSubtitle:X,groupContent:_,imageUrl:W,setGroupTitle:Y,setGroupSubtitle:Z,setGroupContent:ee,setImageUrl:te}=C({partId:B,groups:F,questionIndexInPart:Q,initialData:{title:(()=>{const e=k?.content,t=k?.answer,r=k?.questionGroup?.payload;return t?.title||e?.passageTitle||r?.title||k?.title||""})(),subtitle:(()=>{const e=k?.content,t=k?.questionGroup?.payload;return e?.passageSubtitle||t?.subtitle||""})(),content:(()=>{const e=k?.content,t=k?.questionGroup?.payload;return k?.groupContent||t?.content||e?.passage||""})(),imageUrl:(()=>{const e=k?.content,t=k?.answer,r=k?.questionGroup?.payload;return t?.imageUrl||e?.imageUrl||r?.imageUrl||k?.imageUrl||""})()}}),[re,se]=r(!1),[ne,ie]=r(!1),[ae,oe]=r(k?.explanation||""),[le,ce]=r({}),ue=s(""),de=s(k),me=s(Q),pe=s(!1),ge=s(!1),xe=s(I),he=s(""),fe=O||J.groupNumber||1,be=s(D);n(()=>{be.current=D},[D]),n(()=>{xe.current=I},[I]);const we=T(e=>{xe.current?.(e)},300),Ne=()=>JSON.stringify({imageUrl:W,title:R,subtitle:X,question:J.question,correctAnswer:J.correctAnswer,suffixText:J.suffixText,prefixText:J.prefixText,points:J.points,isExample:J.isExample,suggestedAnswers:J.suggestedAnswers});n(()=>{if(pe.current)return;const e=setTimeout(()=>{ue.current=Ne(),ie(!1)},150);return()=>clearTimeout(e)},[Q]),n(()=>{if(pe.current)return;if(!ue.current)return;const e=Ne()!==ue.current;e!==ne&&(ie(e),be.current?.(e))},[W,J,ne]),n(()=>{z&&(z.current={triggerValidation:async()=>{const e={};let t=!0;return J.question&&""!==J.question.trim()||(e.question="Vui lòng nhập câu hỏi",t=!1),J.correctAnswer&&""!==J.correctAnswer.trim()||(e.correctAnswer="Vui lòng nhập đáp án",t=!1),ce(e),t},getFormData:()=>({imageUrl:W,title:R,subtitle:X,question:J.question,correctAnswer:J.correctAnswer,suffixText:J.suffixText,prefixText:J.prefixText,points:J.points,groupNumber:J.groupNumber,isExample:J.isExample,suggestedAnswers:J.suggestedAnswers,explanation:ae,groups:F})})},[z,J,W,R,X,ae,F]),n(()=>{const e=Q!==me.current,t=!!k?.question;if(!(!ge.current&&t)&&!e)return;pe.current=!0,de.current=k,me.current=Q,ge.current=!0;const r=E(Q,F);K({...H(),groupNumber:r}),oe(k?.explanation||""),setTimeout(()=>{pe.current=!1},100)},[k,F,Q]),n(()=>{if(pe.current)return;const e={question:J.question,correctAnswer:J.correctAnswer,suffixText:J.suffixText,prefixText:J.prefixText,points:J.points||1,groupNumber:J.groupNumber,isExample:J.isExample,suggestedAnswers:J.suggestedAnswers,imageUrl:W,title:R,subtitle:X,groupContent:_,explanation:ae,groups:F},t=JSON.stringify(e);he.current!==t&&(he.current=t,we(e))},[W,R,X,_,ae,J,F,we]);const ve=(e,t)=>{K(r=>({...r,[e]:t})),"question"===e&&le.question&&ce(e=>({...e,question:void 0})),"correctAnswer"===e&&le.correctAnswer&&ce(e=>({...e,correctAnswer:void 0}))};if(re){const r={question:J.question,correctAnswer:J.correctAnswer,suffixText:J.suffixText,prefixText:J.prefixText,points:J.points,groupNumber:J.groupNumber,isExample:J.isExample,suggestedAnswers:J.suggestedAnswers,imageUrl:W,title:R,subtitle:X};return t("div",{className:"space-y-4",children:[e(u,{children:e(m,{children:t("div",{className:"flex items-center justify-between",children:[t("div",{children:[e(p,{children:"Answer the question (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước - Hiển thị đáp án đúng"})]}),t(i,{variant:"outline",size:"sm",onClick:()=>se(!1),children:[e(g,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(A,{questionData:r,isReviewMode:!0,autoFillCorrectAnswers:!0,explanation:ae})]})}return t("div",{className:"space-y-4",children:[L&&e(q,{groupNumber:fe,title:R,subtitle:X,content:_,imageUrl:W,onTitleChange:Y,onSubtitleChange:Z,onContentChange:ee,onImageChange:te,groupConfig:V,uploadIdPrefix:`answer-the-question-${B??"group"}`}),t(u,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e(m,{className:"px-4 py-3",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 shadow-sm",children:e(h,{className:"h-4 w-4 text-white"})}),t("div",{children:[e(p,{className:"text-base font-bold text-gray-900",children:"Đọc câu hỏi và viết đáp án"}),e("p",{className:"text-xs text-gray-500",children:"Nghe - Đọc câu hỏi và viết tên hoặc số"})]})]}),t("div",{className:"flex items-center gap-2",children:[M,t(i,{variant:"outline",size:"sm",onClick:()=>se(!0),disabled:!J.question,className:"gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700",children:[e(x,{className:"h-4 w-4"}),"Xem trước"]})]})]})}),t(d,{className:"space-y-4 px-4 pb-4",children:[t("div",{className:"flex items-center gap-6",children:[e(c,{value:J.points||1,onChange:e=>ve("points",parseFloat(e.target.value)||1)}),t("div",{className:"flex items-center gap-2",children:[e(y,{id:"isExample",checked:J.isExample||!1,onCheckedChange:e=>ve("isExample",!!e)}),e(a,{htmlFor:"isExample",className:"flex items-center gap-1.5 cursor-pointer text-sm font-medium text-gray-700",children:"Đánh dấu là câu hỏi Example"})]})]}),t("div",{className:"space-y-2",children:[t(a,{htmlFor:"question",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(v,{className:"h-4 w-4 text-teal-500"}),"Câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(o,{id:"question",value:J.question,onChange:e=>ve("question",e.target.value),placeholder:"Nhập câu hỏi... (vd: How many dolls has Lucy got?)",className:"border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 "+(le.question?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),le.question&&e("p",{className:"text-sm text-red-600",children:le.question})]}),t("div",{className:"space-y-2",children:[t(a,{htmlFor:"correctAnswer",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(h,{className:"h-4 w-4 text-green-500"}),"Đáp án đúng ",e("span",{className:"text-red-500",children:"*"})]}),e(o,{id:"correctAnswer",value:J.correctAnswer,onChange:e=>ve("correctAnswer",e.target.value),placeholder:"Nhập đáp án... (vd: 5 hoặc Buster)",className:"border-gray-200 bg-white transition-all focus:border-green-300 focus:ring-green-200 "+(le.correctAnswer?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),le.correctAnswer&&e("p",{className:"text-sm text-red-600",children:le.correctAnswer})]}),t("div",{className:"grid grid-cols-2 gap-4",children:[t("div",{className:"space-y-2",children:[t(a,{htmlFor:"prefixText",className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(v,{className:"h-4 w-4 text-gray-400"}),"Text trước ô trả lời ",e("span",{className:"text-xs font-normal text-gray-500",children:"(tùy chọn)"})]}),e(o,{id:"prefixText",value:J.prefixText||"",onChange:e=>ve("prefixText",e.target.value),placeholder:"vd: There are",className:"border-gray-200 bg-white transition-all focus:border-gray-300 focus:ring-gray-200"})]}),t("div",{className:"space-y-2",children:[t(a,{htmlFor:"suffixText",className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(v,{className:"h-4 w-4 text-gray-400"}),"Text sau ô trả lời ",e("span",{className:"text-xs font-normal text-gray-500",children:"(tùy chọn)"})]}),e(o,{id:"suffixText",value:J.suffixText||"",onChange:e=>ve("suffixText",e.target.value),placeholder:"vd: school",className:"border-gray-200 bg-white transition-all focus:border-gray-300 focus:ring-gray-200"})]})]}),!1!==$&&t("div",{className:"space-y-2",children:[t(a,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(N,{className:"h-4 w-4 text-purple-500"}),"Đáp án gợi ý ",e("span",{className:"text-sm font-normal text-gray-500",children:"(tùy chọn)"})]}),t("div",{className:"rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-violet-50 p-4 space-y-3",children:[J.suggestedAnswers&&J.suggestedAnswers.length>0&&e("div",{className:"flex flex-wrap gap-2",children:J.suggestedAnswers.map((r,s)=>t("span",{className:"inline-flex items-center gap-1.5 rounded-full bg-white border border-purple-200 px-3 py-1 text-sm font-medium text-purple-700 shadow-sm",children:[r,e("button",{type:"button",onClick:()=>{const e=[...J.suggestedAnswers||[]];e.splice(s,1),ve("suggestedAnswers",e)},className:"ml-0.5 rounded-full p-0.5 text-purple-400 hover:bg-purple-100 hover:text-purple-600 transition-colors",children:e(w,{className:"h-3 w-3"})})]},s))}),t("div",{className:"flex items-center gap-2",children:[e(o,{id:"newSuggestedAnswer",placeholder:"Nhập đáp án gợi ý...",className:"flex-1 border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200",onKeyDown:e=>{if("Enter"===e.key){e.preventDefault();const t=e.currentTarget,r=t.value.trim();if(r){const e=J.suggestedAnswers||[];ve("suggestedAnswers",[...e,r]),t.value=""}}}}),t(i,{type:"button",variant:"outline",size:"sm",className:"gap-1 border-purple-300 text-purple-600 hover:bg-purple-100 hover:text-purple-700",onClick:()=>{const e=document.getElementById("newSuggestedAnswer"),t=e?.value.trim();if(t){const r=J.suggestedAnswers||[];ve("suggestedAnswers",[...r,t]),e.value=""}},children:[e(b,{className:"h-3.5 w-3.5"}),"Thêm"]})]}),e("p",{className:"text-xs text-purple-500",children:"Nhập đáp án gợi ý rồi nhấn Enter hoặc nút Thêm"})]})]}),j&&j.length>0&&t("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:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100",children:e("span",{className:"text-lg",children:"❌"})}),t("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Lỗi:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:j.map((t,r)=>e("li",{children:t},r))})]})]})]})]}),t(u,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e(m,{className:"px-4 py-3",children:t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(f,{className:"h-3.5 w-3.5 text-white"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e(p,{className:"text-base 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-xs 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,{className:"px-4 pb-4",children:e(l,{id:"explanation",value:ae,onChange:e=>oe(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"})})]})]})}export function AnswerTheQuestionCreator(t){return e(k,{...t})}

package/dist/components/questions/types/answer-the-question/register.js

@@ -1,67 +1 @@
-import { AnswerTheQuestionCreator } from './AnswerTheQuestionCreator';
-export const answerTheQuestionRegistration = {
-    component: AnswerTheQuestionCreator,
-    transformInitialData: (initialData) => {
-        const content = initialData?.content || {};
-        const answer = initialData?.answer || {};
-        const explanation = initialData?.explanation || answer?.explanation || '';
-        const apiPoints = initialData?.total_points
-            ? parseFloat(initialData.total_points)
-            : (initialData?.points || 1);
-        // Extract imageUrl, title, and content from questionGroup.payload (API format) or fallback
-        const questionGroup = initialData?.questionGroup || {};
-        const groupPayload = questionGroup?.payload || {};
-        const imageUrl = groupPayload?.imageUrl || answer?.imageUrl || content?.imageUrl || '';
-        const groupTitle = groupPayload?.title || answer?.groupTitle || '';
-        const groupContent = groupPayload?.content || answer?.groupContent || content?.passage || '';
-        const groupNumber = questionGroup?.groupNumber || 1;
-        // Flat format matching AnswerTheQuestionData
-        // Supports both API format (content.question, answer.answer) 
-        // and internal onChange format (answer.question, answer.correctAnswer)
-        return {
-            question: content?.question || answer?.question || '',
-            correctAnswer: answer?.answer || answer?.correctAnswer || '',
-            suffixText: content?.suffixText || answer?.suffixText || '',
-            prefixText: content?.prefixText || answer?.prefixText || '',
-            points: answer?.points || apiPoints,
-            groupNumber: answer?.groupNumber || groupNumber,
-            isExample: initialData?.isExample || answer?.isExample || false,
-            suggestedAnswers: initialData?.suggestedAnswers || answer?.suggestedAnswers || [],
-            imageUrl,
-            title: groupTitle,
-            groupContent,
-            explanation,
-            groups: answer?.groups || initialData?.groups,
-        };
-    },
-    getExtraProps: (ctx) => ({
-        groups: ctx.groups,
-        questionIndexInPart: ctx.questionIndexInPart,
-        partId: ctx.partId,
-        validationRef: ctx.validationRef,
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        suggestedAnswers: ctx.suggestedAnswers,
-        hasSuggestedAnswers: ctx.hasSuggestedAnswers,
-        groupConfig: ctx.groupConfig,
-    }),
-    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,
-        explanation: data?.explanation || '',
-    }),
-    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,
-        explanation: data?.explanation || '',
-    }),
-};
+import{AnswerTheQuestionCreator as e}from"./AnswerTheQuestionCreator";export const answerTheQuestionRegistration={component:e,transformInitialData:e=>{const t=e?.content||{},s=e?.answer||{},n=e?.explanation||s?.explanation||"",o=e?.total_points?parseFloat(e.total_points):e?.points||1,a=e?.questionGroup||{},i=a?.payload||{},r=i?.imageUrl||s?.imageUrl||t?.imageUrl||"",p=i?.title||s?.groupTitle||"",l=i?.content||s?.groupContent||t?.passage||"",u=a?.groupNumber||1;return{question:t?.question||s?.question||"",correctAnswer:s?.answer||s?.correctAnswer||"",suffixText:t?.suffixText||s?.suffixText||"",prefixText:t?.prefixText||s?.prefixText||"",points:s?.points||o,groupNumber:s?.groupNumber||u,isExample:e?.isExample||s?.isExample||!1,suggestedAnswers:e?.suggestedAnswers||s?.suggestedAnswers||[],imageUrl:r,title:p,groupContent:l,explanation:n,groups:s?.groups||e?.groups}},getExtraProps:e=>({groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId,validationRef:e.validationRef,onUnsavedChangesChange:e.onUnsavedChangesChange,suggestedAnswers:e.suggestedAnswers,hasSuggestedAnswers:e.hasSuggestedAnswers,groupConfig:e.groupConfig}),wrapOnSave:(e,t)=>({type:t.questionType,content:t.state.content,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:e,explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:t.state.content,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:e,explanation:e?.explanation||""})};

package/dist/components/questions/types/answer-the-question/transform.js

@@ -1,36 +1 @@
-export const transformAnswerTheQuestion = (question) => {
-    const answerData = question.answer;
-    if (!answerData?.question) {
-        return { apiContent: {}, apiCorrectAnswer: {} };
-    }
-    const apiContent = {
-        question: answerData.question,
-    };
-    if (answerData.suffixText) {
-        apiContent.suffixText = answerData.suffixText;
-    }
-    if (answerData.prefixText) {
-        apiContent.prefixText = answerData.prefixText;
-    }
-    // Build basicGroupData when any group field is present (title, imageUrl, groupContent)
-    const hasGroupData = !!(answerData.imageUrl || answerData.title || answerData.subtitle || answerData.groupContent);
-    const basicGroupData = hasGroupData
-        ? {
-            title: answerData.title || '',
-            subtitle: answerData.subtitle || '',
-            content: answerData.groupContent || '',
-            imageUrl: answerData.imageUrl || '',
-        }
-        : undefined;
-    return {
-        apiContent,
-        apiCorrectAnswer: {
-            answer: answerData.correctAnswer,
-        },
-        totalPoints: answerData.points || 1,
-        basicGroupData,
-        groupNumber: answerData.groupNumber || 1,
-        isExample: answerData.isExample || false,
-        suggestedAnswers: (answerData.suggestedAnswers && answerData.suggestedAnswers.length > 0) ? answerData.suggestedAnswers : undefined,
-    };
-};
+export const transformAnswerTheQuestion=e=>{const t=e.answer;if(!t?.question)return{apiContent:{},apiCorrectAnswer:{}};const s={question:t.question};t.suffixText&&(s.suffixText=t.suffixText),t.prefixText&&(s.prefixText=t.prefixText);const r=!!(t.imageUrl||t.title||t.subtitle||t.groupContent)?{title:t.title||"",subtitle:t.subtitle||"",content:t.groupContent||"",imageUrl:t.imageUrl||""}:void 0;return{apiContent:s,apiCorrectAnswer:{answer:t.correctAnswer},totalPoints:t.points||1,basicGroupData:r,groupNumber:t.groupNumber||1,isExample:t.isExample||!1,suggestedAnswers:t.suggestedAnswers&&t.suggestedAnswers.length>0?t.suggestedAnswers:void 0}};