@tinyweb_dev/oe-exam-sdk 0.2.3 → 0.2.5

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupClient.js

@@ -2,21 +2,57 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BookOpen, Check, CircleHelp, Lightbulb, Star } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { getChooseAnswerGroupOptionImageSrc, toChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
+function ClientImageItem({ url, alt }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(url);
+    const src = previewUrl ||
+        (typeof url === 'string' && (url.startsWith('http') || url.startsWith('blob:')) ? url : '');
+    if (!src && !isLoading) {
+        return null;
+    }
+    return (_jsx("div", { className: "max-w-sm overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: isLoading ? (_jsx("div", { className: "flex h-36 w-48 items-center justify-center", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-teal-500" }) })) : (_jsx("img", { src: src, alt: alt || 'Image', className: "max-h-56 w-auto object-contain p-2" })) }));
+}
 const OPTION_LABELS = ['A', 'B', 'C', 'D', 'E', 'F'];
-export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode = false, userAnswers = [], }) {
+export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
+    const handleSelect = (itemIndex, optionId) => {
+        const item = items[itemIndex];
+        if (isReviewMode || item?.isExample || !onAnswerChange) {
+            return;
+        }
+        const next = items.map((_, index) => userAnswers[index] ?? '');
+        next[itemIndex] = optionId;
+        onAnswerChange(next);
+    };
     return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
                 const selectedId = userAnswers[itemIndex];
-                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-4 py-2.5", 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-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), _jsx("div", { className: "space-y-2", children: item.options.map((option, optionIndex) => {
+                const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
+                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-4 py-2.5", 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-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), toChooseAnswerGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), item.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: item.options.map((option, optionIndex) => {
+                                        const isCorrect = option.id === item.correctAnswer;
+                                        const isSelected = option.id === selectedId;
+                                        const optionImageSrc = getChooseAnswerGroupOptionImageSrc(option);
+                                        return (_jsxs("button", { type: "button", disabled: !canSelect, onClick: () => handleSelect(itemIndex, option.id), className: cn('flex flex-col items-center gap-2 rounded-lg border-2 px-3 py-2.5 text-sm text-left', isReviewMode && isCorrect
+                                                ? 'border-green-400 bg-green-50'
+                                                : isSelected
+                                                    ? 'border-blue-400 bg-blue-50'
+                                                    : 'border-gray-200 bg-white', canSelect && 'cursor-pointer hover:border-blue-300', !canSelect && 'cursor-default'), children: [_jsx("span", { className: cn('flex h-7 w-7 items-center justify-center rounded-md text-xs font-bold', isReviewMode && isCorrect
+                                                        ? 'bg-green-500 text-white'
+                                                        : isSelected
+                                                            ? 'bg-blue-500 text-white'
+                                                            : 'bg-gray-100 text-gray-600'), children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), optionImageSrc ? (_jsx(ClientImageItem, { url: optionImageSrc, alt: `Đáp án ${OPTION_LABELS[optionIndex] || optionIndex + 1}` })) : (_jsx("span", { className: "text-xs text-gray-500", children: `Đáp án ${OPTION_LABELS[optionIndex] || optionIndex + 1}` })), isReviewMode && isCorrect && _jsx(Check, { className: "h-4 w-4 text-green-600" })] }, option.id || optionIndex));
+                                    }) })) : (_jsx("div", { className: "space-y-2", children: item.options.map((option, optionIndex) => {
                                         const isCorrect = option.id === item.correctAnswer;
                                         const isSelected = option.id === selectedId;
-                                        return (_jsxs("div", { className: cn('flex items-center gap-3 rounded-lg border-2 px-3 py-2.5 text-sm', isReviewMode && isCorrect
+                                        return (_jsxs("button", { type: "button", disabled: !canSelect, onClick: () => handleSelect(itemIndex, option.id), className: cn('flex w-full items-center gap-3 rounded-lg border-2 px-3 py-2.5 text-sm text-left', isReviewMode && isCorrect
                                                 ? 'border-green-400 bg-green-50'
                                                 : isSelected
                                                     ? 'border-blue-400 bg-blue-50'
-                                                    : 'border-gray-200 bg-white'), children: [_jsx("span", { className: cn('flex h-7 w-7 items-center justify-center rounded-md text-xs font-bold', isReviewMode && isCorrect
+                                                    : 'border-gray-200 bg-white', canSelect && 'cursor-pointer hover:border-blue-300', !canSelect && 'cursor-default'), children: [_jsx("span", { className: cn('flex h-7 w-7 items-center justify-center rounded-md text-xs font-bold', isReviewMode && isCorrect
                                                         ? 'bg-green-500 text-white'
-                                                        : 'bg-gray-100 text-gray-600'), children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), _jsx("span", { className: "flex-1 text-gray-800", children: option.text || `Đáp án ${OPTION_LABELS[optionIndex]}` }), isReviewMode && isCorrect && _jsx(Check, { className: "h-4 w-4 text-green-600" })] }, option.id || optionIndex));
-                                    }) })] })] }, `${item.questionNumber}-${itemIndex}`));
+                                                        : isSelected
+                                                            ? 'bg-blue-500 text-white'
+                                                            : 'bg-gray-100 text-gray-600'), children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), _jsx("span", { className: "flex-1 text-gray-800", children: option.text || `Đáp án ${OPTION_LABELS[optionIndex]}` }), isReviewMode && isCorrect && _jsx(Check, { className: "h-4 w-4 text-green-600" })] }, option.id || optionIndex));
+                                    }) }))] })] }, `${item.questionNumber}-${itemIndex}`));
             }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
 }

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupCreator.js

@@ -10,8 +10,10 @@ import { Card, CardContent, CardHeader, CardTitle } from '../../../../components
 import { Switch } from '../../../../components/ui/switch';
 import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
+import { Eye, ImageIcon, Pencil, Plus, Star, Trash2, Type } from 'lucide-react';
 import { ChooseTheCorrectAnswerGroupClient } from './ChooseTheCorrectAnswerGroupClient';
+import { ChooseAnswerGroupImageUploadItem, ChooseAnswerGroupOptionImageField, } from './ChooseAnswerGroupImageUpload';
+import { fromChooseAnswerGroupImageUrls, getChooseAnswerGroupOptionImageSrc, isChooseAnswerGroupOptionFilled, toChooseAnswerGroupImageUrls, toEditableChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
 const OPTION_LABELS = ['A', 'B', 'C', 'D', 'E', 'F'];
 function createEmptyItem(questionNumber) {
     return {
@@ -32,20 +34,25 @@ function normalizeItems(rawItems) {
     if (!Array.isArray(rawItems) || rawItems.length === 0) {
         return [createEmptyItem(1)];
     }
-    return rawItems.map((item, index) => ({
-        question: item.question || '',
-        optionType: item.optionType === 'image' ? 'image' : 'text',
-        options: Array.isArray(item.options) && item.options.length >= 2
-            ? item.options.map((option, optionIndex) => ({
-                id: option.id || `opt-${optionIndex + 1}`,
-                text: option.text || '',
-            }))
-            : createEmptyItem(index + 1).options,
-        correctAnswer: item.correctAnswer || 'opt-1',
-        isExample: item.isExample === true,
-        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
-        questionNumber: item.questionNumber || index + 1,
-    }));
+    return rawItems.map((item, index) => {
+        const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(item.imageUrl));
+        return {
+            question: item.question || '',
+            optionType: item.optionType === 'image' ? 'image' : 'text',
+            options: Array.isArray(item.options) && item.options.length >= 2
+                ? item.options.map((option, optionIndex) => ({
+                    id: option.id || `opt-${optionIndex + 1}`,
+                    text: option.text || '',
+                    ...(option.imageUrl ? { imageUrl: option.imageUrl } : {}),
+                }))
+                : createEmptyItem(index + 1).options,
+            correctAnswer: item.correctAnswer || 'opt-1',
+            isExample: item.isExample === true,
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+            ...(imageUrl !== undefined ? { imageUrl } : {}),
+        };
+    });
 }
 function sumPoints(items) {
     return items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0);
@@ -102,11 +109,11 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
             if (!item.question.trim()) {
                 nextErrors.push(`Câu ${index + 1}: nội dung câu hỏi là bắt buộc.`);
             }
-            const filledOptions = item.options.filter((option) => option.text.trim() !== '');
+            const filledOptions = item.options.filter((option) => (isChooseAnswerGroupOptionFilled(option, item.optionType)));
             if (filledOptions.length < 2) {
                 nextErrors.push(`Câu ${index + 1}: cần ít nhất 2 đáp án.`);
             }
-            if (!item.options.some((option) => option.id === item.correctAnswer && option.text.trim() !== '')) {
+            if (!item.options.some((option) => (option.id === item.correctAnswer && isChooseAnswerGroupOptionFilled(option, item.optionType)))) {
                 nextErrors.push(`Câu ${index + 1}: hãy chọn đáp án đúng.`);
             }
         });
@@ -128,12 +135,12 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
     const updateItem = (index, patch) => {
         setItems((current) => current.map((item, itemIndex) => (itemIndex === index ? { ...item, ...patch } : item)));
     };
-    const updateOptionText = (itemIndex, optionIndex, text) => {
+    const updateOption = (itemIndex, optionIndex, patch) => {
         setItems((current) => current.map((item, index) => {
             if (index !== itemIndex) {
                 return item;
             }
-            const options = item.options.map((option, currentOptionIndex) => (currentOptionIndex === optionIndex ? { ...option, text } : option));
+            const options = item.options.map((option, currentOptionIndex) => (currentOptionIndex === optionIndex ? { ...option, ...patch } : option));
             return { ...item, options };
         }));
     };
@@ -157,7 +164,20 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
     return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(true), children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] }) }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Nh\u00F3m ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "group-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: "Choose the correct answer." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage - Tu\u1EF3 ch\u1ECDn)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: [_jsx(PointsInput, { value: sumPoints(items), allowZero: true, readOnly: true }), _jsx("p", { className: "mt-2 text-xs text-gray-500", children: "T\u1ED5ng \u0111i\u1EC3m \u0111\u01B0\u1EE3c c\u1ED9ng t\u1EEB c\u00E1c c\u00E2u kh\u00F4ng ph\u1EA3i example." })] })] })] }), items.map((item, itemIndex) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsxs(CardTitle, { className: "text-base", children: ["C\u00E2u ", itemIndex + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(itemIndex), disabled: items.length <= 1, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-amber-800", children: [_jsx(Star, { className: "h-4 w-4" }), "C\u00E2u v\u00ED d\u1EE5"] }), _jsx(Switch, { checked: item.isExample === true, onCheckedChange: (checked) => updateItem(itemIndex, {
                                             isExample: checked,
                                             points: checked ? 0 : (item.points || 1),
-                                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "C\u00E2u h\u1ECFi" }), _jsx(Textarea, { value: item.question, onChange: (event) => updateItem(itemIndex, { question: event.target.value }), rows: 2, placeholder: "A place for someone to stay or live is called" })] }), _jsx("div", { className: "space-y-2", children: item.options.map((option, optionIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: `correct-${itemIndex}`, checked: item.correctAnswer === option.id, onChange: () => updateItem(itemIndex, { correctAnswer: option.id }) }), _jsx("span", { className: "w-6 text-sm font-semibold text-gray-600", children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), _jsx(Input, { value: option.text, onChange: (event) => updateOptionText(itemIndex, optionIndex, event.target.value), placeholder: `Đáp án ${OPTION_LABELS[optionIndex]}` })] }, option.id))) }), !item.isExample && (_jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(itemIndex, {
+                                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "C\u00E2u h\u1ECFi" }), _jsx(Textarea, { value: item.question, onChange: (event) => updateItem(itemIndex, { question: event.target.value }), rows: 2, placeholder: "A place for someone to stay or live is called" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh (tu\u1EF3 ch\u1ECDn)"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                                                    const nextUrls = [...toEditableChooseAnswerGroupImageUrls(item.imageUrl), ''];
+                                                    updateItem(itemIndex, { imageUrl: nextUrls });
+                                                }, className: "gap-1.5 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm h\u00ECnh \u1EA3nh"] })] }), toEditableChooseAnswerGroupImageUrls(item.imageUrl).length === 0 ? (_jsx("div", { className: "rounded-lg border border-dashed border-gray-200 bg-gray-50/50 p-3 text-xs text-gray-500", children: "Ch\u01B0a c\u00F3 h\u00ECnh \u1EA3nh. Nh\u1EA5n \"Th\u00EAm h\u00ECnh \u1EA3nh\" \u0111\u1EC3 upload \u1EA3nh minh ho\u1EA1 cho c\u00E2u h\u1ECFi." })) : (_jsx("div", { className: "space-y-3", children: toEditableChooseAnswerGroupImageUrls(item.imageUrl).map((imageUrl, imageIndex) => (_jsx(ChooseAnswerGroupImageUploadItem, { index: imageIndex, itemIndex: itemIndex, imageUrl: imageUrl, onChange: (url) => {
+                                                const nextUrls = toEditableChooseAnswerGroupImageUrls(item.imageUrl);
+                                                nextUrls[imageIndex] = url;
+                                                updateItem(itemIndex, { imageUrl: nextUrls });
+                                            }, onRemove: () => {
+                                                const nextUrls = toEditableChooseAnswerGroupImageUrls(item.imageUrl)
+                                                    .filter((_, idx) => idx !== imageIndex);
+                                                updateItem(itemIndex, { imageUrl: fromChooseAnswerGroupImageUrls(nextUrls) });
+                                            } }, `${itemIndex}-${imageIndex}`))) }))] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { children: "\u0110\u00E1p \u00E1n" }), _jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5", children: [_jsx(Type, { className: `h-3.5 w-3.5 ${item.optionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${item.optionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}`, children: "Text" }), _jsx(Switch, { checked: item.optionType === 'image', onCheckedChange: (checked) => updateItem(itemIndex, {
+                                                            optionType: checked ? 'image' : 'text',
+                                                        }) }), _jsx(ImageIcon, { className: `h-3.5 w-3.5 ${item.optionType === 'image' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${item.optionType === 'image' ? 'text-indigo-600' : 'text-gray-400'}`, children: "\u1EA2nh" })] })] }), item.options.map((option, optionIndex) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("input", { type: "radio", name: `correct-${itemIndex}`, checked: item.correctAnswer === option.id, onChange: () => updateItem(itemIndex, { correctAnswer: option.id }), className: "mt-2" }), _jsx("span", { className: "mt-2 w-6 text-sm font-semibold text-gray-600", children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), item.optionType === 'image' ? (_jsx(ChooseAnswerGroupOptionImageField, { itemIndex: itemIndex, optionIndex: optionIndex, imageUrl: getChooseAnswerGroupOptionImageSrc(option), onChange: (url) => updateOption(itemIndex, optionIndex, { imageUrl: url, text: '' }) })) : (_jsx(Input, { value: option.text, onChange: (event) => updateOption(itemIndex, optionIndex, { text: event.target.value }), placeholder: `Đáp án ${OPTION_LABELS[optionIndex]}` }))] }, option.id)))] }), !item.isExample && (_jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(itemIndex, {
                                     points: parsePointsValue(event.target.value, true),
                                 }) }))] })] }, `item-${itemIndex}`))), _jsxs(Button, { type: "button", variant: "outline", onClick: addItem, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Th\u00EAm c\u00E2u h\u1ECFi"] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (event) => setExplanation(event.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3 }) })] }), allErrors.length > 0 && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: allErrors.map((error) => (_jsx("p", { children: error }, error))) }))] }));
 }

package/dist/components/questions/types/choose-the-correct-answer-group/map-choose-the-correct-answer-group-data.d.ts

@@ -1,4 +1,4 @@
-import type { ChooseTheCorrectAnswerGroupData, ChooseTheCorrectAnswerGroupItemData } from '../../_shared/types/choose-the-correct-answer-group.type';
+import { type ChooseTheCorrectAnswerGroupData, type ChooseTheCorrectAnswerGroupItemData } from '../../_shared/types/choose-the-correct-answer-group.type';
 export declare function createEmptyChooseAnswerGroupItem(questionNumber: number): ChooseTheCorrectAnswerGroupItemData;
 export declare function mapChooseAnswerGroupItem(item: unknown, index: number, fallbackAnswer?: string): ChooseTheCorrectAnswerGroupItemData;
 export declare function mapQuestionToChooseAnswerGroupData(question: Record<string, unknown> | null | undefined): ChooseTheCorrectAnswerGroupData;

package/dist/components/questions/types/choose-the-correct-answer-group/map-choose-the-correct-answer-group-data.js

@@ -1,3 +1,4 @@
+import { fromChooseAnswerGroupImageUrls, toChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -36,9 +37,11 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
                 };
             }
             const optionRecord = asRecord(option);
+            const imageUrl = asString(optionRecord.imageUrl);
             return {
                 id: asString(optionRecord.id, `opt-${optionIndex + 1}`),
                 text: asString(optionRecord.text),
+                ...(imageUrl ? { imageUrl } : {}),
             };
         })
         : [
@@ -47,6 +50,7 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
             { id: 'opt-3', text: '' },
         ];
     const isExample = record.isExample === true;
+    const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(content.imageUrl));
     return {
         question: asString(content.question) || asString(record.question),
         optionType: asString(content.optionType) === 'image' ? 'image' : 'text',
@@ -55,6 +59,7 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
         isExample,
         points: isExample ? 0 : typeof record.points === 'number' ? record.points : 1,
         questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
+        ...(imageUrl !== undefined ? { imageUrl } : {}),
     };
 }
 export function mapQuestionToChooseAnswerGroupData(question) {

package/dist/components/questions/types/choose-the-correct-answer-group/transform.js

@@ -1,3 +1,4 @@
+import { fromChooseAnswerGroupImageUrls, toChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
 const CHILD_QUESTION_TYPE = 'CHOOSE_THE_CORRECT_ANSWER';
 function toOptionId(option, index) {
     return option?.id && option.id.trim() !== '' ? option.id : `opt-${index + 1}`;
@@ -21,8 +22,10 @@ export const transformChooseTheCorrectAnswerGroup = (question) => {
         const options = (item.options || []).map((option, optionIndex) => ({
             id: toOptionId(option, optionIndex),
             text: option.text || '',
+            ...(option.imageUrl ? { imageUrl: option.imageUrl } : {}),
         }));
         const correctAnswer = item.correctAnswer || options[0]?.id || 'opt-1';
+        const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(item.imageUrl));
         return {
             questionType: CHILD_QUESTION_TYPE,
             ...(item.isExample ? { isExample: true } : {}),
@@ -30,6 +33,7 @@ export const transformChooseTheCorrectAnswerGroup = (question) => {
                 question: item.question || '',
                 options,
                 optionType: item.optionType || 'text',
+                ...(imageUrl !== undefined ? { imageUrl } : {}),
             },
             correctAnswer: { answer: correctAnswer },
             points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),

package/dist/components/questions/types/match-word-to-picture/MatchWordToPictureClient.d.ts

@@ -0,0 +1,2 @@
+import { MatchWordToPictureClientProps } from '../../_shared/types/match-word-to-picture.type';
+export declare function MatchWordToPictureClient({ questionData, onSubmit, isReviewMode, userAnswer, autoFillCorrectAnswers, explanation, }: MatchWordToPictureClientProps): import("react").JSX.Element;

package/dist/components/questions/types/match-word-to-picture/MatchWordToPictureClient.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent } from '../../../../components/ui/card';
+import { Label } from '../../../../components/ui/label';
+import { BookOpen, CheckCircle2, XCircle } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION, } from '../../_shared/types/match-word-to-picture.type';
+import { useState } from 'react';
+export function MatchWordToPictureClient({ questionData, onSubmit, isReviewMode = false, userAnswer, autoFillCorrectAnswers = false, explanation, }) {
+    const [answer, setAnswer] = useState(userAnswer || '');
+    const { previewUrl: questionImageUrl } = usePresignedFileUrl(questionData.imageUrl || '');
+    const wordBank = questionData.wordBank || [];
+    if (!questionData.imageUrl) {
+        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-violet-400 to-indigo-500" }), _jsxs(CardContent, { className: "space-y-6 p-6", children: [_jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-violet-700", children: questionData.instruction || MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION }), wordBank.length > 0 && (_jsxs("div", { className: "rounded-xl border border-violet-200 bg-gradient-to-r from-violet-50 to-indigo-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-violet-700", children: "Word bank:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((word, index) => (_jsx("span", { className: "rounded-full border border-violet-200 bg-white px-3 py-1 text-sm font-semibold text-slate-700", children: word }, `${word}-${index}`))) })] })), _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 border border-amber-300 bg-amber-100 px-3 py-1", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5 text-amber-600" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-amber-700", children: "Example" })] })), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "relative h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm", children: _jsx("img", { src: questionImageUrl || questionData.imageUrl, alt: questionData.correctAnswer || 'Picture', className: "h-full w-full object-contain" }) }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Label, { className: "text-base font-semibold text-gray-800", children: "Ch\u1ECDn t\u1EEB ph\u00F9 h\u1EE3p" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("select", { value: displayedAnswer, onChange: (event) => {
+                                                            setAnswer(event.target.value);
+                                                            onSubmit?.(event.target.value);
+                                                        }, disabled: isReviewMode || isExample, className: `h-10 max-w-xs rounded-md border-2 bg-white px-3 text-sm font-medium ${isReviewMode
+                                                            ? isCorrect
+                                                                ? 'border-green-400 bg-green-50 text-green-700'
+                                                                : 'border-red-400 bg-red-50 text-red-700'
+                                                            : 'border-violet-300 focus:border-violet-500 focus:ring-violet-200'}`, children: [_jsx("option", { value: "", children: "-- Ch\u1ECDn t\u1EEB --" }), wordBank.map((word, index) => (_jsx("option", { value: word, children: word }, `${word}-${index}`)))] }), 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 border border-green-200 bg-green-50 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 })] })] }))] }), explanation && isReviewMode && (_jsxs("div", { className: "rounded-xl border border-blue-200 bg-blue-50 p-4", children: [_jsx("p", { className: "mb-1 text-sm font-semibold text-blue-800", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "text-sm text-blue-700", children: explanation })] }))] })] }));
+}

package/dist/components/questions/types/match-word-to-picture/MatchWordToPictureCreator.d.ts

@@ -0,0 +1,2 @@
+import { MatchWordToPictureCreatorProps } from '../../_shared/types/match-word-to-picture.type';
+export declare function MatchWordToPictureCreator(props: MatchWordToPictureCreatorProps): import("react").JSX.Element;

package/dist/components/questions/types/match-word-to-picture/MatchWordToPictureCreator.js

@@ -0,0 +1,267 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImagePreview } from '../../../../components/ui/image-preview';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Textarea } from '../../../../components/ui/textarea';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { BookOpen, Eye, HelpCircle, ImageIcon, Pencil } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { Checkbox } from '../../../../components/ui/checkbox';
+import { MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION, } from '../../_shared/types/match-word-to-picture.type';
+import { MatchWordToPictureClient } from './MatchWordToPictureClient';
+import { WordBankEditor } from './WordBankEditor';
+import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+function getGroupNumberForIndex(questionIndex, groups) {
+    if (!groups || groups.length === 0) {
+        return 1;
+    }
+    let currentIndex = 0;
+    for (const group of groups) {
+        if (questionIndex < currentIndex + group.questionCount) {
+            return group.number;
+        }
+        currentIndex += group.questionCount;
+    }
+    return groups[groups.length - 1]?.number || 1;
+}
+function normalizeWordBank(wordBank) {
+    if (!Array.isArray(wordBank)) {
+        return [];
+    }
+    return wordBank.filter((word) => typeof word === 'string');
+}
+function MatchWordToPictureContent({ initialData, onChange, onUnsavedChangesChange, externalErrors, groups, questionIndexInPart = 0, partId = '', validationRef, }) {
+    const setSharedPassageData = useExamQuestionStore((state) => state.setSharedPassageData);
+    const getSharedPassageData = useExamQuestionStore((state) => state.getSharedPassageData);
+    const initialGroupNum = getGroupNumberForIndex(questionIndexInPart, groups);
+    const [imageUrl, setImageUrl] = useState(initialData?.imageUrl || '');
+    const [correctAnswer, setCorrectAnswer] = useState(initialData?.correctAnswer || '');
+    const [points, setPoints] = useState(initialData?.points || 1);
+    const [isExample, setIsExample] = useState(initialData?.isExample || false);
+    const [groupNumber, setGroupNumber] = useState(initialData?.groupNumber || initialGroupNum);
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [wordBank, setWordBank] = useState(() => {
+        if (partId) {
+            const storedData = getSharedPassageData(partId, initialGroupNum);
+            if (Array.isArray(storedData?.wordBank)) {
+                return storedData.wordBank;
+            }
+        }
+        return initialData?.wordBank || [];
+    });
+    const [instruction, setInstruction] = useState(() => {
+        if (partId) {
+            const storedData = getSharedPassageData(partId, initialGroupNum);
+            if (storedData?.instruction) {
+                return storedData.instruction;
+            }
+        }
+        return initialData?.instruction || MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION;
+    });
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
+    const [validationErrors, setValidationErrors] = useState({});
+    const savedStateRef = useRef('');
+    const previousQuestionIndexRef = useRef(questionIndexInPart);
+    const isInitializingRef = useRef(false);
+    const hasInitializedRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    const onUnsavedChangesChangeRef = useRef(onUnsavedChangesChange);
+    const currentGroupNumber = groupNumber || 1;
+    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(imageUrl);
+    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
+    const usableWords = wordBank.map((word) => word.trim()).filter((word) => word.length > 0);
+    useEffect(() => {
+        onUnsavedChangesChangeRef.current = onUnsavedChangesChange;
+    }, [onUnsavedChangesChange]);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    const getCurrentStateString = () => JSON.stringify({ imageUrl, correctAnswer, points, isExample, wordBank, instruction });
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        const timer = setTimeout(() => {
+            savedStateRef.current = getCurrentStateString();
+            setHasUnsavedChanges(false);
+        }, 150);
+        return () => clearTimeout(timer);
+    }, [questionIndexInPart]);
+    useEffect(() => {
+        if (isInitializingRef.current || !savedStateRef.current)
+            return;
+        const hasChanges = getCurrentStateString() !== savedStateRef.current;
+        if (hasChanges !== hasUnsavedChanges) {
+            setHasUnsavedChanges(hasChanges);
+            onUnsavedChangesChangeRef.current?.(hasChanges);
+        }
+    }, [imageUrl, correctAnswer, points, isExample, wordBank, instruction, hasUnsavedChanges]);
+    useEffect(() => {
+        if (!validationRef)
+            return;
+        validationRef.current = {
+            triggerValidation: async () => {
+                const errors = {};
+                let isValid = true;
+                if (!imageUrl.trim()) {
+                    errors.imageUrl = 'Vui lòng upload hình ảnh';
+                    isValid = false;
+                }
+                if (usableWords.length === 0) {
+                    errors.wordBank = 'Vui lòng thêm word bank';
+                    isValid = false;
+                }
+                if (!correctAnswer.trim()) {
+                    errors.correctAnswer = 'Vui lòng chọn đáp án';
+                    isValid = false;
+                }
+                else if (usableWords.length > 0 &&
+                    !usableWords.some((word) => word.toLowerCase() === correctAnswer.trim().toLowerCase())) {
+                    errors.correctAnswer = 'Đáp án phải nằm trong word bank';
+                    isValid = false;
+                }
+                setValidationErrors(errors);
+                return isValid;
+            },
+            getFormData: () => ({
+                imageUrl,
+                correctAnswer,
+                points,
+                groupNumber: currentGroupNumber,
+                isExample,
+                wordBank,
+                instruction,
+                explanation,
+                groups,
+            }),
+        };
+    }, [
+        validationRef,
+        imageUrl,
+        correctAnswer,
+        points,
+        currentGroupNumber,
+        isExample,
+        wordBank,
+        instruction,
+        explanation,
+        groups,
+        usableWords,
+    ]);
+    useEffect(() => {
+        const questionIndexChanged = questionIndexInPart !== previousQuestionIndexRef.current;
+        const shouldSyncForFirstInit = !hasInitializedRef.current && !!initialData?.imageUrl;
+        if (!shouldSyncForFirstInit && !questionIndexChanged)
+            return;
+        isInitializingRef.current = true;
+        previousQuestionIndexRef.current = questionIndexInPart;
+        hasInitializedRef.current = true;
+        const groupNum = getGroupNumberForIndex(questionIndexInPart, groups);
+        setImageUrl(initialData?.imageUrl || '');
+        setCorrectAnswer(initialData?.correctAnswer || '');
+        setPoints(initialData?.points || 1);
+        setIsExample(initialData?.isExample || false);
+        setGroupNumber(groupNum);
+        setExplanation(initialData?.explanation || '');
+        let sharedWordBank = [];
+        let sharedInstruction = MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION;
+        if (partId) {
+            const storedData = getSharedPassageData(partId, groupNum);
+            if (Array.isArray(storedData?.wordBank)) {
+                sharedWordBank = storedData.wordBank;
+                sharedInstruction = storedData.instruction || MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION;
+            }
+            else {
+                sharedWordBank = initialData?.wordBank || [];
+                sharedInstruction = initialData?.instruction || MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION;
+                if (sharedWordBank.length > 0 || sharedInstruction) {
+                    setSharedPassageData(partId, groupNum, {
+                        wordBank: sharedWordBank,
+                        instruction: sharedInstruction,
+                    });
+                }
+            }
+        }
+        else {
+            sharedWordBank = initialData?.wordBank || [];
+            sharedInstruction = initialData?.instruction || MATCH_WORD_TO_PICTURE_DEFAULT_INSTRUCTION;
+        }
+        setWordBank(normalizeWordBank(sharedWordBank));
+        setInstruction(sharedInstruction);
+        setTimeout(() => {
+            isInitializingRef.current = false;
+        }, 100);
+    }, [initialData, groups, questionIndexInPart, partId, getSharedPassageData, setSharedPassageData]);
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        const payload = {
+            imageUrl,
+            correctAnswer,
+            points: points || 1,
+            groupNumber: currentGroupNumber,
+            isExample,
+            wordBank,
+            instruction,
+            explanation,
+            groups,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current === payloadString)
+            return;
+        previousPayloadRef.current = payloadString;
+        if (partId) {
+            setSharedPassageData(partId, currentGroupNumber, { wordBank, instruction });
+        }
+        debouncedOnChange(payload);
+    }, [
+        imageUrl,
+        correctAnswer,
+        points,
+        currentGroupNumber,
+        isExample,
+        wordBank,
+        instruction,
+        explanation,
+        groups,
+        partId,
+        setSharedPassageData,
+        debouncedOnChange,
+    ]);
+    if (isClientMode) {
+        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: "Match word to picture (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(MatchWordToPictureClient, { questionData: {
+                        imageUrl: displayPreviewUrl || imageUrl,
+                        correctAnswer,
+                        points,
+                        groupNumber: currentGroupNumber,
+                        isExample,
+                        wordBank: usableWords,
+                        instruction,
+                    }, isReviewMode: true, autoFillCorrectAnswers: true, explanation: explanation })] }));
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [groups && groups.length > 0 && (_jsx(WordBankEditor, { wordBank: wordBank, instruction: instruction, onWordBankChange: setWordBank, onInstructionChange: setInstruction })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-violet-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "N\u1ED1i t\u1EEB v\u1EDBi tranh" }), _jsx("p", { className: "text-xs text-gray-500", children: "Upload tranh v\u00E0 ch\u1ECDn t\u1EEB trong word bank" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !imageUrl, className: "gap-2 border-violet-200 text-violet-600 hover:bg-violet-50", 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: points || 1, onChange: (e) => setPoints(parseFloat(e.target.value) || 1) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "mwtp-isExample", checked: isExample || false, onCheckedChange: (checked) => setIsExample(!!checked) }), _jsx(Label, { htmlFor: "mwtp-isExample", className: "cursor-pointer text-sm font-medium text-gray-700", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 c\u00E2u h\u1ECFi Example" })] })] }), (!groups || groups.length === 0) && (_jsx(WordBankEditor, { wordBank: wordBank, instruction: instruction, onWordBankChange: setWordBank, onInstructionChange: setInstruction })), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-violet-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "mwtp-question-image", label: "", accept: "image/*", value: imageUrl || '', onChange: (url) => {
+                                            setImageUrl(url);
+                                            if (validationErrors.imageUrl) {
+                                                setValidationErrors((prev) => ({ ...prev, imageUrl: undefined }));
+                                            }
+                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" })), validationErrors.imageUrl && _jsx("p", { className: "text-sm text-red-600", children: validationErrors.imageUrl })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "mwtp-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: "*" })] }), _jsxs("select", { id: "mwtp-correctAnswer", value: correctAnswer, onChange: (event) => {
+                                            setCorrectAnswer(event.target.value);
+                                            if (validationErrors.correctAnswer) {
+                                                setValidationErrors((prev) => ({ ...prev, correctAnswer: undefined }));
+                                            }
+                                        }, className: `flex h-10 w-full rounded-md border bg-white px-3 py-2 text-sm ${validationErrors.correctAnswer
+                                            ? 'border-red-400 focus:border-red-500'
+                                            : 'border-gray-200 focus:border-green-300'}`, children: [_jsx("option", { value: "", children: "-- Ch\u1ECDn t\u1EEB trong word bank --" }), usableWords.map((word, index) => (_jsx("option", { value: word, children: word }, `${word}-${index}`)))] }), validationErrors.correctAnswer && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.correctAnswer })), validationErrors.wordBank && _jsx("p", { className: "text-sm text-red-600", children: validationErrors.wordBank })] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc", 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: "mt-0.5 text-xs text-gray-500", 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: "mwtp-explanation", value: explanation, onChange: (event) => setExplanation(event.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] resize-none border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" }) })] })] }));
+}
+export function MatchWordToPictureCreator(props) {
+    return _jsx(MatchWordToPictureContent, { ...props });
+}

package/dist/components/questions/types/match-word-to-picture/MatchWordToPictureGroupClient.d.ts

@@ -0,0 +1,2 @@
+import type { MatchWordToPictureGroupClientProps } from '../../_shared/types/match-word-to-picture.type';
+export declare function MatchWordToPictureGroupClient({ questionData, isReviewMode, userAnswers, onAnswerChange, }: MatchWordToPictureGroupClientProps): import("react").JSX.Element;