@tinyweb_dev/oe-exam-sdk 1.0.6 → 1.0.8

package/dist/components/questions/groups/DocumentGroupCard.js

@@ -107,7 +107,7 @@ export function DocumentGroupCard({ groupNumber, title, subtitle = '', content,
     const showImage = !hasConfig || groupConfig.includes('imageUrl');
     const { previewUrl } = usePresignedFileUrl(imageUrl);
     const displayPreviewUrl = previewUrl || '';
-    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-indigo-500 via-violet-500 to-purple-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 shadow-md", children: _jsx(Layers, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "\u0110o\u1EA1n v\u0103n nh\u00F3m" }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-indigo-300 bg-indigo-100 px-2.5 py-0.5 text-xs font-semibold text-indigo-700", children: ["Nh\u00F3m ", groupNumber] })] }), _jsxs("p", { className: "text-sm text-gray-500", children: ["N\u1ED9i dung \u0111\u1ECBnh d\u1EA1ng phong ph\u00FA \u2014 d\u00F9ng chung cho t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi trong Nh\u00F3m ", groupNumber] })] })] }) }), _jsxs(CardContent, { className: "space-y-5", children: [showTitle && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-title`, className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Type, { className: "h-4 w-4 text-indigo-500" }), "Ti\u00EAu \u0111\u1EC1 nh\u00F3m", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: `${uploadIdPrefix}-title`, value: title, onChange: (e) => { if (!isReadOnly)
+    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gray-100", children: _jsx(Layers, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-sm font-bold text-gray-900", children: "\u0110o\u1EA1n v\u0103n nh\u00F3m" }), _jsxs("span", { className: "inline-flex items-center rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs font-semibold text-gray-600", children: ["Nh\u00F3m ", groupNumber] })] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [showTitle && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-title`, className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Type, { className: "h-4 w-4 text-indigo-500" }), "Ti\u00EAu \u0111\u1EC1 nh\u00F3m", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: `${uploadIdPrefix}-title`, value: title, onChange: (e) => { if (!isReadOnly)
                                     onTitleChange(e.target.value); }, readOnly: isReadOnly, placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 nh\u00F3m c\u00E2u h\u1ECFi\u2026", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${isReadOnly ? 'cursor-not-allowed border-transparent bg-gray-50 text-gray-500 focus:border-transparent focus:ring-0' : ''}` })] })), showSubtitle && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-subtitle`, className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Pilcrow, { className: "h-4 w-4 text-indigo-500" }), "Ph\u1EE5 \u0111\u1EC1", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: `${uploadIdPrefix}-subtitle`, value: subtitle, onChange: (e) => { if (!isReadOnly)
                                     onSubtitleChange?.(e.target.value); }, readOnly: isReadOnly, placeholder: "Nh\u1EADp ph\u1EE5 \u0111\u1EC1 ho\u1EB7c m\u00F4 t\u1EA3 ng\u1EAFn\u2026", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${isReadOnly ? 'cursor-not-allowed border-transparent bg-gray-50 text-gray-500 focus:border-transparent focus:ring-0' : ''}` })] })), showContent && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(FileText, { className: "h-4 w-4 text-indigo-500" }), "N\u1ED9i dung \u0111o\u1EA1n v\u0103n", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(DocumentEditor, { value: content, onChange: onContentChange, isReadOnly: isReadOnly, placeholder: "Nh\u1EADp \u0111o\u1EA1n v\u0103n, email, th\u00F4ng b\u00E1o, qu\u1EA3ng c\u00E1o\u2026 d\u00F9ng chung cho nh\u00F3m c\u00E2u h\u1ECFi n\u00E0y", uploadIdPrefix: uploadIdPrefix }), !isReadOnly && (_jsxs("div", { className: "flex items-start gap-2.5 rounded-lg border border-amber-200 bg-amber-50 px-3.5 py-2.5", children: [_jsx(Info, { className: "mt-0.5 h-4 w-4 shrink-0 text-amber-500" }), _jsxs("div", { className: "text-xs text-amber-800 leading-relaxed", children: [_jsx("span", { className: "font-semibold", children: "G\u1EE3i \u00FD (ch\u1EC9 d\u00E0nh cho d\u1EA1ng \u0111i\u1EC1n t\u1EEB):" }), ' ', "N\u1EBFu \u0111o\u1EA1n v\u0103n c\u00F3 kho\u1EA3ng tr\u1ED1ng c\u1EA7n \u0111i\u1EC1n, h\u00E3y \u0111\u00E1nh d\u1EA5u b\u1EB1ng", ' ', _jsx("code", { className: "rounded bg-amber-100 px-1 py-0.5 font-mono font-semibold text-amber-700", children: '{0}' }), ",", ' ', _jsx("code", { className: "rounded bg-amber-100 px-1 py-0.5 font-mono font-semibold text-amber-700", children: '{1}' }), ",", ' ', _jsx("code", { className: "rounded bg-amber-100 px-1 py-0.5 font-mono font-semibold text-amber-700", children: '{2}' }), "\u2026 \u2014 m\u1ED7i s\u1ED1 t\u01B0\u01A1ng \u1EE9ng th\u1EE9 t\u1EF1 c\u00E2u h\u1ECFi trong nh\u00F3m. V\u1EDBi d\u1EA1ng b\u00E0i \u0111\u1ECDc th\u00F4ng th\u01B0\u1EDDng, b\u1EA1n kh\u00F4ng c\u1EA7n d\u00F9ng k\u00FD hi\u1EC7u n\u00E0y."] })] }))] })), showImage && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh nh\u00F3m", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), !isReadOnly && (_jsx(FileUpload, { id: `${uploadIdPrefix}-image`, label: "", accept: "image/*", value: imageUrl, onChange: (url) => { if (!isReadOnly)
                                     onImageChange(url); }, onPresignedUrlChange: onImagePresignedUrlChange, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Group image preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] }))] })] }));

package/dist/components/questions/groups/ImageLabelGroupCard.js

@@ -38,5 +38,5 @@ export function ImageLabelGroupCard({ groupNumber, imageLabels, onImageLabelsCha
             return;
         onImageLabelsChange(displayItems.filter((_, i) => i !== index));
     };
-    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-indigo-500 via-blue-500 to-sky-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-blue-600 shadow-md", children: _jsx(Layers, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "Ng\u00E2n h\u00E0ng \u1EA3nh + t\u1EEB" }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-indigo-300 bg-indigo-100 px-2.5 py-0.5 text-xs font-semibold text-indigo-700", children: ["Nh\u00F3m ", groupNumber] }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-600", children: [displayItems.length, " m\u1EE5c"] })] }), _jsx("p", { className: "text-sm text-gray-500", children: "M\u1ED7i m\u1EE5c g\u1ED3m 1 h\u00ECnh v\u00E0 1 nh\u00E3n \u2014 h\u1ECDc sinh th\u1EA5y h\u00E0ng \u1EA3nh + t\u1EEB ph\u00EDa tr\u00EAn c\u00E2u h\u1ECFi." })] })] }) }), _jsxs(CardContent, { className: "space-y-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-title`, className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Type, { className: "h-4 w-4 text-indigo-500" }), "Ti\u00EAu \u0111\u1EC1 nh\u00F3m", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: `${uploadIdPrefix}-title`, value: title, onChange: (e) => onTitleChange?.(e.target.value), placeholder: "VD: Words from the box", readOnly: isReadOnly, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${isReadOnly ? 'cursor-not-allowed border-transparent bg-gray-50 text-gray-500 focus:border-transparent focus:ring-0' : ''}` })] }), _jsx("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: displayItems.map((item, index) => (_jsxs("div", { className: "rounded-xl border-2 border-gray-200 bg-gradient-to-b from-slate-50 to-white p-3 transition-all hover:border-indigo-200 hover:shadow-sm", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("span", { className: "text-xs font-semibold text-gray-600", children: ["M\u1EE5c ", index + 1] }), displayItems.length > 1 && !isReadOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleDelete(index), className: "h-7 w-7 p-0 text-red-500 hover:bg-red-50 hover:text-red-600", title: "X\u00F3a m\u1EE5c", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }), _jsxs("div", { className: "space-y-2.5", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-label-${index}`, className: "flex items-center gap-1.5 text-xs font-medium text-gray-700", children: [_jsx(Type, { className: "h-3.5 w-3.5 text-indigo-500" }), "Nh\u00E3n"] }), _jsx(Input, { id: `${uploadIdPrefix}-label-${index}`, value: item.label, onChange: (e) => handleFieldChange(index, 'label', e.target.value), placeholder: "VD: swimming", readOnly: isReadOnly, className: `border-gray-200 bg-white text-sm focus:border-indigo-300 focus:ring-indigo-200 ${isReadOnly ? 'cursor-not-allowed bg-gray-50 text-gray-500' : ''}` })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "flex items-center gap-1.5 text-xs font-medium text-gray-700", children: [_jsx(ImageIcon, { className: "h-3.5 w-3.5 text-indigo-500" }), "H\u00ECnh \u1EA3nh"] }), !isReadOnly && (_jsx(FileUpload, { id: `${uploadIdPrefix}-image-${index}`, label: "", accept: "image/*", value: item.imageUrl, onChange: (url) => handleFieldChange(index, 'imageUrl', url), maxSize: 5, placeholder: "Upload \u1EA3nh", autoUpload: true, prefix: "questions" })), item.imageUrl && (_jsx(ItemImagePreview, { src: item.imageUrl, alt: item.label || `Item ${index + 1}` }))] })] })] }, index))) }), !isReadOnly && (_jsxs(Button, { type: "button", variant: "outline", className: "w-full border-dashed border-indigo-300 bg-indigo-50/50 text-indigo-700 hover:border-indigo-400 hover:bg-indigo-50 hover:text-indigo-800", onClick: handleAdd, children: [_jsx(PlusCircle, { className: "mr-2 h-4 w-4" }), "Th\u00EAm m\u1EE5c \u1EA3nh + t\u1EEB"] })), _jsxs("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50/40 p-4", children: [_jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-indigo-600", children: "Xem tr\u01B0\u1EDBc h\u00E0ng t\u1EEB" }), _jsx(ImageLabelWordBank, { items: displayItems })] })] })] }));
+    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gray-100", children: _jsx(Layers, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-sm font-bold text-gray-900", children: "Ng\u00E2n h\u00E0ng \u1EA3nh + t\u1EEB" }), _jsxs("span", { className: "inline-flex items-center rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs font-semibold text-gray-600", children: ["Nh\u00F3m ", groupNumber] }), _jsxs("span", { className: "inline-flex items-center rounded-md border border-blue-200 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-600", children: [displayItems.length, " m\u1EE5c"] })] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-title`, className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Type, { className: "h-4 w-4 text-indigo-500" }), "Ti\u00EAu \u0111\u1EC1 nh\u00F3m", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: `${uploadIdPrefix}-title`, value: title, onChange: (e) => onTitleChange?.(e.target.value), placeholder: "VD: Words from the box", readOnly: isReadOnly, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${isReadOnly ? 'cursor-not-allowed border-transparent bg-gray-50 text-gray-500 focus:border-transparent focus:ring-0' : ''}` })] }), _jsx("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: displayItems.map((item, index) => (_jsxs("div", { className: "rounded-md border border-gray-200 bg-white p-2.5 transition-all hover:border-gray-300 hover:shadow-sm", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("span", { className: "text-xs font-semibold text-gray-600", children: ["M\u1EE5c ", index + 1] }), displayItems.length > 1 && !isReadOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleDelete(index), className: "h-7 w-7 p-0 text-red-500 hover:bg-red-50 hover:text-red-600", title: "X\u00F3a m\u1EE5c", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }), _jsxs("div", { className: "space-y-2.5", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-label-${index}`, className: "flex items-center gap-1.5 text-xs font-medium text-gray-700", children: [_jsx(Type, { className: "h-3.5 w-3.5 text-indigo-500" }), "Nh\u00E3n"] }), _jsx(Input, { id: `${uploadIdPrefix}-label-${index}`, value: item.label, onChange: (e) => handleFieldChange(index, 'label', e.target.value), placeholder: "VD: swimming", readOnly: isReadOnly, className: `border-gray-200 bg-white text-sm focus:border-indigo-300 focus:ring-indigo-200 ${isReadOnly ? 'cursor-not-allowed bg-gray-50 text-gray-500' : ''}` })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "flex items-center gap-1.5 text-xs font-medium text-gray-700", children: [_jsx(ImageIcon, { className: "h-3.5 w-3.5 text-indigo-500" }), "H\u00ECnh \u1EA3nh"] }), !isReadOnly && (_jsx(FileUpload, { id: `${uploadIdPrefix}-image-${index}`, label: "", accept: "image/*", value: item.imageUrl, onChange: (url) => handleFieldChange(index, 'imageUrl', url), maxSize: 5, placeholder: "Upload \u1EA3nh", autoUpload: true, prefix: "questions" })), item.imageUrl && (_jsx(ItemImagePreview, { src: item.imageUrl, alt: item.label || `Item ${index + 1}` }))] })] })] }, index))) }), !isReadOnly && (_jsxs(Button, { type: "button", variant: "outline", className: "w-full border-dashed border-indigo-300 bg-indigo-50/50 text-indigo-700 hover:border-indigo-400 hover:bg-indigo-50 hover:text-indigo-800", onClick: handleAdd, children: [_jsx(PlusCircle, { className: "mr-2 h-4 w-4" }), "Th\u00EAm m\u1EE5c \u1EA3nh + t\u1EEB"] })), _jsxs("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50/40 p-4", children: [_jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-indigo-600", children: "Xem tr\u01B0\u1EDBc h\u00E0ng t\u1EEB" }), _jsx(ImageLabelWordBank, { items: displayItems })] })] })] }));
 }

package/dist/components/questions/groups/MatchAnswerGroupCard.js

@@ -16,10 +16,10 @@ function OptionRow({ option, index, canRemove, onUpdate, onRemove, groupConfig,
     const showAnswer = !groupConfig || groupConfig.includes('answer');
     const showContent = groupConfig?.includes('content') ?? false;
     const showImageUrl = !groupConfig || groupConfig.includes('imageUrl');
-    return (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50/50 to-violet-50/50 p-4", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 text-base font-bold text-white shadow-sm", children: index + 1 }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsxs("div", { className: "flex items-end gap-3", children: [showAnswer && (_jsx("div", { className: "flex-1", children: _jsx(Input, { value: option.answer, onChange: (e) => onUpdate(index, 'answer', e.target.value), placeholder: `Nhãn (ví dụ: ${String.fromCharCode(65 + index)} hoặc "a pineapple")`, className: "border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200" }) })), showContent && (_jsx("div", { className: "flex-1", children: _jsx(Input, { value: option.content || '', onChange: (e) => onUpdate(index, 'content', e.target.value), placeholder: "N\u1ED9i dung (m\u00F4 t\u1EA3 th\u00EAm cho \u0111\u00E1p \u00E1n)", className: "border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200" }) })), showImageUrl && (_jsx("div", { className: "flex-1", children: _jsx(FileUpload, { id: `option-image-${index}`, label: "", accept: "image/*", value: option.imageUrl || '', onChange: (url) => onUpdate(index, 'imageUrl', url), onPresignedUrlChange: setLocalPreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh cho \u0111\u00E1p \u00E1n", autoUpload: true, prefix: "questions" }) }))] }), showImageUrl && displayUrl && (_jsx("div", { className: "relative h-32 w-32 overflow-hidden rounded-lg border border-purple-200 bg-white shadow-sm", children: _jsx("img", { src: displayUrl, alt: option.answer || `Option ${index + 1}`, className: "h-full w-full object-contain" }) }))] }), canRemove && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onRemove(index), className: "flex-shrink-0 text-red-500 hover:bg-red-50 hover:text-red-700", children: _jsx(X, { className: "h-4 w-4" }) }))] }));
+    return (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-gray-200 bg-white px-3 py-2.5", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gray-100 text-xs font-bold text-gray-800", children: index + 1 }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsxs("div", { className: "flex items-end gap-3", children: [showAnswer && (_jsx("div", { className: "flex-1", children: _jsx(Input, { value: option.answer, onChange: (e) => onUpdate(index, 'answer', e.target.value), placeholder: `Nhãn (ví dụ: ${String.fromCharCode(65 + index)} hoặc "a pineapple")`, className: "border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200" }) })), showContent && (_jsx("div", { className: "flex-1", children: _jsx(Input, { value: option.content || '', onChange: (e) => onUpdate(index, 'content', e.target.value), placeholder: "N\u1ED9i dung (m\u00F4 t\u1EA3 th\u00EAm cho \u0111\u00E1p \u00E1n)", className: "border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200" }) })), showImageUrl && (_jsx("div", { className: "flex-1", children: _jsx(FileUpload, { id: `option-image-${index}`, label: "", accept: "image/*", value: option.imageUrl || '', onChange: (url) => onUpdate(index, 'imageUrl', url), onPresignedUrlChange: setLocalPreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh cho \u0111\u00E1p \u00E1n", autoUpload: true, prefix: "questions" }) }))] }), showImageUrl && displayUrl && (_jsx("div", { className: "relative h-32 w-32 overflow-hidden rounded-lg border border-purple-200 bg-white shadow-sm", children: _jsx("img", { src: displayUrl, alt: option.answer || `Option ${index + 1}`, className: "h-full w-full object-contain" }) }))] }), canRemove && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onRemove(index), className: "flex-shrink-0 text-red-500 hover:bg-red-50 hover:text-red-700", children: _jsx(X, { className: "h-4 w-4" }) }))] }));
 }
 export function MatchAnswerGroupCard({ currentGroupNumber, groupTitle, groupImageUrl, groupImagePreviewUrl, options, groupConfig, showGroupTitle, showGroupImageUrl, onGroupTitleChange, onGroupImageChange, onGroupImagePreviewUrlChange, onUpdateOption, onRemoveOption, onAddOption, }) {
     const { previewUrl: groupImagePresignedUrl } = usePresignedFileUrl(groupImageUrl || '');
     const displayGroupImageUrl = groupImagePreviewUrl || groupImagePresignedUrl || '';
-    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 shadow-md", children: _jsx(Layers, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "\u0110\u00E1p \u00E1n gh\u00E9p n\u1ED1i" }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-purple-300 bg-purple-100 px-2.5 py-0.5 text-xs font-semibold text-purple-700", children: ["Nh\u00F3m ", currentGroupNumber] })] }), _jsx("p", { className: "text-sm text-gray-500", children: "C\u00E1c \u0111\u00E1p \u00E1n (h\u00ECnh \u1EA3nh + nh\u00E3n) d\u00F9ng \u0111\u1EC3 gh\u00E9p n\u1ED1i v\u1EDBi t\u1EEBng c\u00E2u h\u1ECFi trong nh\u00F3m" })] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [showGroupTitle && (_jsxs("div", { className: "space-y-2 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50/30 to-violet-50/30 p-4", children: [_jsxs(Label, { htmlFor: "group-title", className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Type, { className: "h-4 w-4 text-purple-500" }), "Ti\u00EAu \u0111\u1EC1 nh\u00F3m", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(d\u00F9ng chung cho c\u1EA3 nh\u00F3m)" })] }), _jsx(Input, { id: "group-title", value: groupTitle, onChange: (e) => onGroupTitleChange(e.target.value), placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 nh\u00F3m...", className: "border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200" })] })), showGroupImageUrl && (_jsxs("div", { className: "space-y-2 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50/30 to-violet-50/30 p-4", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-purple-500" }), "H\u00ECnh \u1EA3nh nh\u00F3m ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn - d\u00F9ng chung cho c\u1EA3 nh\u00F3m)" })] }), _jsx(FileUpload, { id: "group-image", label: "", accept: "image/*", value: groupImageUrl || '', onChange: onGroupImageChange, onPresignedUrlChange: onGroupImagePreviewUrlChange, maxSize: 5, placeholder: "Upload \u1EA3nh nh\u00F3m ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayGroupImageUrl && (_jsx(ImagePreview, { src: displayGroupImageUrl, alt: "Group image preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), _jsx("div", { className: "space-y-4", children: options.map((option, index) => (_jsx(OptionRow, { option: option, index: index, canRemove: options.length > 2, onUpdate: onUpdateOption, onRemove: onRemoveOption, groupConfig: groupConfig }, index))) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: onAddOption, className: "gap-2 border-purple-300 text-purple-600 hover:bg-purple-50 hover:text-purple-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n (", options.length + 1, ")"] })] })] }));
+    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-gray-100", children: _jsx(Layers, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-sm font-bold text-gray-900", children: "\u0110\u00E1p \u00E1n gh\u00E9p n\u1ED1i" }), _jsxs("span", { className: "inline-flex items-center rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs font-semibold text-gray-600", children: ["Nh\u00F3m ", currentGroupNumber] })] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [showGroupTitle && (_jsxs("div", { className: "space-y-2 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50/30 to-violet-50/30 p-4", children: [_jsxs(Label, { htmlFor: "group-title", className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Type, { className: "h-4 w-4 text-purple-500" }), "Ti\u00EAu \u0111\u1EC1 nh\u00F3m", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(d\u00F9ng chung cho c\u1EA3 nh\u00F3m)" })] }), _jsx(Input, { id: "group-title", value: groupTitle, onChange: (e) => onGroupTitleChange(e.target.value), placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 nh\u00F3m...", className: "border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200" })] })), showGroupImageUrl && (_jsxs("div", { className: "space-y-2 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50/30 to-violet-50/30 p-4", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-purple-500" }), "H\u00ECnh \u1EA3nh nh\u00F3m ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn - d\u00F9ng chung cho c\u1EA3 nh\u00F3m)" })] }), _jsx(FileUpload, { id: "group-image", label: "", accept: "image/*", value: groupImageUrl || '', onChange: onGroupImageChange, onPresignedUrlChange: onGroupImagePreviewUrlChange, maxSize: 5, placeholder: "Upload \u1EA3nh nh\u00F3m ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayGroupImageUrl && (_jsx(ImagePreview, { src: displayGroupImageUrl, alt: "Group image preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), _jsx("div", { className: "space-y-4", children: options.map((option, index) => (_jsx(OptionRow, { option: option, index: index, canRemove: options.length > 2, onUpdate: onUpdateOption, onRemove: onRemoveOption, groupConfig: groupConfig }, index))) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: onAddOption, className: "gap-2 border-purple-300 text-purple-600 hover:bg-purple-50 hover:text-purple-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n (", options.length + 1, ")"] })] })] }));
 }

package/dist/components/questions/question-bank/QuestionEditorRenderer.d.ts

@@ -3,11 +3,8 @@ import type { QuestionEditorRendererProps } from './types';
 /** Marketing question types supported by the question-bank editor. */
 export declare enum QuestionBankEditorType {
     CHOOSE_THE_CORRECT_ANSWER = "CHOOSE_THE_CORRECT_ANSWER",
-    LOOK_PICTURE_CHOOSE_CORRECT_ANSWER = "LOOK_PICTURE_CHOOSE_CORRECT_ANSWER",
-    LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER = "LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER",
     FILL_MISSING_WORDS_IN_GRID = "FILL_MISSING_WORDS_IN_GRID",
     LABEL_THE_PICTURE = "LABEL_THE_PICTURE",
-    LOOK_PICTURE_FILL_WORD_HINT = "LOOK_PICTURE_FILL_WORD_HINT",
     READ_AND_COLOR_OBJECTS = "READ_AND_COLOR_OBJECTS",
     IMAGE_OBJECT_MATCHING = "IMAGE_OBJECT_MATCHING",
     READ_PASSAGE_AND_ANSWER_QUESTIONS = "READ_PASSAGE_AND_ANSWER_QUESTIONS",

package/dist/components/questions/question-bank/QuestionEditorRenderer.js

@@ -2,18 +2,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { t } from '../../../shared/lib/i18n';
-import { renderChooseCorrectAdjectiveEditor, renderChooseTheCorrectAnswerEditor, renderFillInBlankEditor, renderFillMissingWordsInGridEditor, renderImageObjectMatchingEditor, renderLabelThePictureEditor, renderLookPictureChooseCorrectAnswerEditor, renderLookPictureFillBlankChooseAnswerEditor, renderLookPictureFillWordHintEditor, renderReadAndColorObjectsEditor, renderReadPassageAndAnswerQuestionsEditor, renderWriteAShortLetterEditor, renderWriteCorrectVerbFormEditor, UnsupportedEditorFallback, } from './editor-adapters';
+import { renderChooseCorrectAdjectiveEditor, renderChooseTheCorrectAnswerEditor, renderFillInBlankEditor, renderFillMissingWordsInGridEditor, renderImageObjectMatchingEditor, renderLabelThePictureEditor, renderReadAndColorObjectsEditor, renderReadPassageAndAnswerQuestionsEditor, renderWriteAShortLetterEditor, renderWriteCorrectVerbFormEditor, UnsupportedEditorFallback, } from './editor-adapters';
 import { CrosswordPuzzleCreator } from '../types/crossword-puzzle/CrosswordPuzzleCreator';
 import { FindWordsInMatrixCreator } from '../types/find-words-in-matrix/FindWordsInMatrixCreator';
 /** Marketing question types supported by the question-bank editor. */
 export var QuestionBankEditorType;
 (function (QuestionBankEditorType) {
     QuestionBankEditorType["CHOOSE_THE_CORRECT_ANSWER"] = "CHOOSE_THE_CORRECT_ANSWER";
-    QuestionBankEditorType["LOOK_PICTURE_CHOOSE_CORRECT_ANSWER"] = "LOOK_PICTURE_CHOOSE_CORRECT_ANSWER";
-    QuestionBankEditorType["LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER"] = "LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER";
     QuestionBankEditorType["FILL_MISSING_WORDS_IN_GRID"] = "FILL_MISSING_WORDS_IN_GRID";
     QuestionBankEditorType["LABEL_THE_PICTURE"] = "LABEL_THE_PICTURE";
-    QuestionBankEditorType["LOOK_PICTURE_FILL_WORD_HINT"] = "LOOK_PICTURE_FILL_WORD_HINT";
     QuestionBankEditorType["READ_AND_COLOR_OBJECTS"] = "READ_AND_COLOR_OBJECTS";
     QuestionBankEditorType["IMAGE_OBJECT_MATCHING"] = "IMAGE_OBJECT_MATCHING";
     QuestionBankEditorType["READ_PASSAGE_AND_ANSWER_QUESTIONS"] = "READ_PASSAGE_AND_ANSWER_QUESTIONS";
@@ -49,16 +46,10 @@ export function QuestionEditorRenderer({ questionType, content, correctAnswer, e
     switch (questionType) {
         case QuestionBankEditorType.CHOOSE_THE_CORRECT_ANSWER:
             return renderChooseTheCorrectAnswerEditor(adapterProps);
-        case QuestionBankEditorType.LOOK_PICTURE_CHOOSE_CORRECT_ANSWER:
-            return renderLookPictureChooseCorrectAnswerEditor(adapterProps);
-        case QuestionBankEditorType.LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER:
-            return renderLookPictureFillBlankChooseAnswerEditor(adapterProps);
         case QuestionBankEditorType.FILL_MISSING_WORDS_IN_GRID:
             return renderFillMissingWordsInGridEditor(adapterProps);
         case QuestionBankEditorType.LABEL_THE_PICTURE:
             return renderLabelThePictureEditor(adapterProps);
-        case QuestionBankEditorType.LOOK_PICTURE_FILL_WORD_HINT:
-            return renderLookPictureFillWordHintEditor(adapterProps);
         case QuestionBankEditorType.READ_AND_COLOR_OBJECTS:
             return renderReadAndColorObjectsEditor(adapterProps);
         case QuestionBankEditorType.IMAGE_OBJECT_MATCHING:

package/dist/components/questions/question-bank/editor-adapters/choice-adapters.d.ts

@@ -1,5 +1,3 @@
 import type { QuestionEditorAdapterProps } from './types';
 export declare function renderChooseTheCorrectAnswerEditor({ content, correctAnswer, explanation, points, onChange, validationRef, }: QuestionEditorAdapterProps): import("react").JSX.Element;
-export declare function renderLookPictureChooseCorrectAnswerEditor({ content, correctAnswer, explanation, points, onChange, validationRef, }: QuestionEditorAdapterProps): import("react").JSX.Element;
-export declare function renderLookPictureFillBlankChooseAnswerEditor({ content, correctAnswer, explanation, points, onChange, validationRef, }: QuestionEditorAdapterProps): import("react").JSX.Element;
 export declare function renderChooseCorrectAdjectiveEditor({ content, correctAnswer, explanation, points, onChange, }: QuestionEditorAdapterProps): import("react").JSX.Element;

package/dist/components/questions/question-bank/editor-adapters/choice-adapters.js

@@ -2,8 +2,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChooseTheCorrectAnswerCreator } from '../../types/choose-the-correct-answer/ChooseTheCorrectAnswerCreator';
 import { normalizeChooseAnswerCorrectAnswer, normalizeChooseAnswerOptions, pickRawChooseAnswer, } from '../../types/choose-the-correct-answer/normalize';
-import { LookPictureChooseCorrectAnswer } from '../../types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerCreator';
-import { LookPictureFillBlankChooseAnswer } from '../../types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerCreator';
 import { ChooseCorrectAdjectiveCreator } from '../../types/choose-correct-adjective/ChooseCorrectAdjectiveCreator';
 export function renderChooseTheCorrectAnswerEditor({ content, correctAnswer, explanation, points, onChange, validationRef, }) {
     const rawOptions = content.options;
@@ -40,45 +38,6 @@ export function renderChooseTheCorrectAnswerEditor({ content, correctAnswer, exp
             });
         } }));
 }
-export function renderLookPictureChooseCorrectAnswerEditor({ content, correctAnswer, explanation, points, onChange, validationRef, }) {
-    const initialData = {
-        imageUrl: content.imageUrl || '',
-        options: content.options || ['', ''],
-        correctAnswer: correctAnswer?.answer ?? -1,
-        explanation: explanation || '',
-        points: points || 1,
-    };
-    return (_jsx(LookPictureChooseCorrectAnswer, { initialData: initialData, validationRef: validationRef, onChange: (data) => {
-            onChange?.({
-                content: { imageUrl: data?.imageUrl, options: data?.options },
-                answer: { answer: data?.correctAnswer },
-                explanation: data?.explanation,
-                points: data?.points,
-            });
-        } }));
-}
-export function renderLookPictureFillBlankChooseAnswerEditor({ content, correctAnswer, explanation, points, onChange, validationRef, }) {
-    const initialData = {
-        imageUrl: content.imageUrl || '',
-        question: content.question || '',
-        options: content.options || ['', '', '', ''],
-        correctAnswer: correctAnswer?.answer ?? -1,
-        explanation: explanation || '',
-        points: points || 1,
-    };
-    return (_jsx(LookPictureFillBlankChooseAnswer, { initialData: initialData, validationRef: validationRef, onChange: (data) => {
-            onChange?.({
-                content: {
-                    imageUrl: data?.imageUrl,
-                    question: data?.question,
-                    options: data?.options,
-                },
-                answer: { answer: data?.correctAnswer },
-                explanation: data?.explanation,
-                points: data?.points,
-            });
-        } }));
-}
 export function renderChooseCorrectAdjectiveEditor({ content, correctAnswer, explanation, points, onChange, }) {
     const initialData = {
         sentence: content.sentence || '',

package/dist/components/questions/question-bank/editor-adapters/index.d.ts

@@ -1,5 +1,5 @@
-export { renderChooseTheCorrectAnswerEditor, renderLookPictureChooseCorrectAnswerEditor, renderLookPictureFillBlankChooseAnswerEditor, renderChooseCorrectAdjectiveEditor, } from './choice-adapters';
-export { renderFillMissingWordsInGridEditor, renderLabelThePictureEditor, renderLookPictureFillWordHintEditor, renderReadAndColorObjectsEditor, renderImageObjectMatchingEditor, } from './media-adapters';
+export { renderChooseTheCorrectAnswerEditor, renderChooseCorrectAdjectiveEditor, } from './choice-adapters';
+export { renderFillMissingWordsInGridEditor, renderLabelThePictureEditor, renderReadAndColorObjectsEditor, renderImageObjectMatchingEditor, } from './media-adapters';
 export { renderReadPassageAndAnswerQuestionsEditor, renderWriteAShortLetterEditor, renderWriteCorrectVerbFormEditor, renderFillInBlankEditor, } from './writing-adapters';
 export { UnsupportedEditorFallback } from './unsupported-fallback';
 export type { QuestionEditorAdapterProps, QuestionEditorChangeData } from './types';

package/dist/components/questions/question-bank/editor-adapters/index.js

@@ -1,4 +1,4 @@
-export { renderChooseTheCorrectAnswerEditor, renderLookPictureChooseCorrectAnswerEditor, renderLookPictureFillBlankChooseAnswerEditor, renderChooseCorrectAdjectiveEditor, } from './choice-adapters';
-export { renderFillMissingWordsInGridEditor, renderLabelThePictureEditor, renderLookPictureFillWordHintEditor, renderReadAndColorObjectsEditor, renderImageObjectMatchingEditor, } from './media-adapters';
+export { renderChooseTheCorrectAnswerEditor, renderChooseCorrectAdjectiveEditor, } from './choice-adapters';
+export { renderFillMissingWordsInGridEditor, renderLabelThePictureEditor, renderReadAndColorObjectsEditor, renderImageObjectMatchingEditor, } from './media-adapters';
 export { renderReadPassageAndAnswerQuestionsEditor, renderWriteAShortLetterEditor, renderWriteCorrectVerbFormEditor, renderFillInBlankEditor, } from './writing-adapters';
 export { UnsupportedEditorFallback } from './unsupported-fallback';

package/dist/components/questions/question-bank/editor-adapters/media-adapters.d.ts

@@ -1,6 +1,5 @@
 import type { QuestionEditorAdapterProps } from './types';
 export declare function renderFillMissingWordsInGridEditor({ content, correctAnswer, onChange, }: QuestionEditorAdapterProps): import("react").JSX.Element;
 export declare function renderLabelThePictureEditor({ content, explanation, points, onChange, validationRef, }: QuestionEditorAdapterProps): import("react").JSX.Element;
-export declare function renderLookPictureFillWordHintEditor({ content, correctAnswer, explanation, points, onChange, validationRef, }: QuestionEditorAdapterProps): import("react").JSX.Element;
 export declare function renderReadAndColorObjectsEditor({ content, correctAnswer, explanation, points, onChange, validationRef, }: QuestionEditorAdapterProps): import("react").JSX.Element;
 export declare function renderImageObjectMatchingEditor({ content, correctAnswer, explanation, points, onChange, validationRef, }: QuestionEditorAdapterProps): import("react").JSX.Element;

package/dist/components/questions/question-bank/editor-adapters/media-adapters.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FillMissingWordsInGridCreator } from '../../types/fill-missing-words-in-grid/FillMissingWordsInGridCreator';
 import { LabelThePictureCreator } from '../../types/label-the-picture/LabelThePictureCreator';
-import { LookPictureFillWordHintCreator } from '../../types/look-picture-fill-word-hint/LookPictureFillWordHintCreator';
 import { ReadAndColorObjectsCreator } from '../../types/read-and-color-objects/ReadAndColorObjectsCreator';
 import { ImageObjectMatchingCreator } from '../../types/image-object-matching/ImageObjectMatchingCreator';
 export function renderFillMissingWordsInGridEditor({ content, correctAnswer, onChange, }) {
@@ -63,33 +62,6 @@ export function renderLabelThePictureEditor({ content, explanation, points, onCh
             });
         } }));
 }
-export function renderLookPictureFillWordHintEditor({ content, correctAnswer, explanation, points, onChange, validationRef, }) {
-    const initialData = {
-        subQuestions: [
-            {
-                id: 'edit-1',
-                imageUrl: content.imageUrl || '',
-                word: content.word || '',
-                correctAnswer: correctAnswer?.correctAnswer || '',
-            },
-        ],
-        hintLetters: [],
-        explanation: explanation || '',
-        points: points || 1,
-    };
-    return (_jsx(LookPictureFillWordHintCreator, { initialData: initialData, validationRef: validationRef, onChange: (data) => {
-            const subQ = data?.subQuestions?.[0] || {};
-            onChange?.({
-                content: {
-                    imageUrl: subQ.imageUrl,
-                    word: subQ.word,
-                },
-                answer: { correctAnswer: subQ.correctAnswer },
-                explanation: data?.explanation,
-                points: data?.points,
-            });
-        } }));
-}
 export function renderReadAndColorObjectsEditor({ content, correctAnswer, explanation, points, onChange, validationRef, }) {
     const initialData = {
         backgroundImageUrl: content.backgroundImageUrl || '',

package/dist/components/questions/question-bank/question-bank-picker.utils.js

@@ -35,10 +35,6 @@ const QUESTION_TYPE_LABELS = {
     MATCH_BY_WRITING_ANSWER: 'Nối bằng cách viết đáp án',
     SPEAKING_DESCRIBE_IMAGE: 'Nói: mô tả tranh',
     SPEAKING_CONVERSATION: 'Nói: hội thoại',
-    GN_SPEAKING_INTERVIEW: 'Nói: phỏng vấn',
-    LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER: 'Nhìn tranh điền chỗ trống',
-    LOOK_PICTURE_CHOOSE_CORRECT_ANSWER: 'Nhìn tranh chọn đáp án',
-    LOOK_PICTURE_FILL_WORD_HINT: 'Nhìn tranh điền từ gợi ý',
     LABEL_THE_PICTURE: 'Gắn nhãn hình ảnh',
     MATCH_WORD_TO_PICTURE: 'Nối từ với tranh',
     MATCH_WORD_TO_PICTURE_GROUP: 'Nối từ với tranh (nhóm)',
@@ -72,9 +68,6 @@ var QuestionTypeVisualKind;
     QuestionTypeVisualKind["TEXT"] = "text";
 })(QuestionTypeVisualKind || (QuestionTypeVisualKind = {}));
 const TYPE_VISUAL_KIND = {
-    LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER: QuestionTypeVisualKind.IMAGE,
-    LOOK_PICTURE_CHOOSE_CORRECT_ANSWER: QuestionTypeVisualKind.IMAGE,
-    LOOK_PICTURE_FILL_WORD_HINT: QuestionTypeVisualKind.IMAGE,
     LABEL_THE_PICTURE: QuestionTypeVisualKind.IMAGE,
     MATCH_WORD_TO_PICTURE: QuestionTypeVisualKind.IMAGE,
     MATCH_WORD_TO_PICTURE_GROUP: QuestionTypeVisualKind.IMAGE,

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

@@ -33,7 +33,7 @@ export function AnswerTheQuestionClient({ questionData, onSubmit, isReviewMode =
     const [answer, setAnswer] = useState(userAnswer || '');
     const imageUrls = toAnswerTheQuestionImageUrls(questionData.imageUrl);
     if (!questionData.question && imageUrls.length === 0) {
-        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" }) }) }));
+        return (_jsx(Card, { children: _jsx(CardContent, { className: "p-3", 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 correctAnswer = questionData.correctAnswer || '';
@@ -43,19 +43,19 @@ export function AnswerTheQuestionClient({ questionData, onSubmit, isReviewMode =
     const isCorrect = isReviewMode && userAnswer !== undefined
         ? userAnswer.trim().toLowerCase() === 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 }))] })), imageUrls.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: imageUrls.map((url, imageIndex) => (_jsx("div", { className: "relative max-w-lg overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm", children: _jsx(MediaPreview, { src: url, alt: `Question image ${imageIndex + 1}` }) }, `atq-image-${imageIndex}`))) })), _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" })] })), questionData.question ? (_jsx(Label, { className: "text-base font-semibold text-gray-800 mb-3 block", children: questionData.question })) : null, 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: 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: 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 })] }))] })] }));
+    return (_jsx(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: _jsxs(CardContent, { className: "p-3 space-y-3", 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 }))] })), imageUrls.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: imageUrls.map((url, imageIndex) => (_jsx("div", { className: "relative max-w-lg overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm", children: _jsx(MediaPreview, { src: url, alt: `Question image ${imageIndex + 1}` }) }, `atq-image-${imageIndex}`))) })), _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" })] })), questionData.question ? (_jsx(Label, { className: "text-base font-semibold text-gray-800 mb-3 block", children: questionData.question })) : null, 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: 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: 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 })] }))] }) }));
 }

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

@@ -4,11 +4,8 @@ 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 { HelpCircle, Plus, X, ListChecks, MessageSquare } from 'lucide-react';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { AnswerTheQuestionClient } from './AnswerTheQuestionClient';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
@@ -318,33 +315,42 @@ function AnswerTheQuestionContent({ initialData, onSave, onSaveToQuestionBank, o
             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 })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _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" }) })] })] }));
+    return (_jsxs("div", { className: "space-y-3", 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(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(HelpCircle, { className: "h-3.5 w-3.5" }), title: "\u0110\u1ECDc c\u00E2u h\u1ECFi v\u00E0 vi\u1EBFt \u0111\u00E1p \u00E1n", points: {
+                        value: currentQuestion.points || 1,
+                        onValueChange: (value) => updateCurrentQuestion('points', value),
+                    }, example: {
+                        checked: currentQuestion.isExample || false,
+                        onChange: (checked) => updateCurrentQuestion('isExample', checked),
+                    }, headerExtra: headerExtra, preview: {
+                        onClick: () => setIsClientMode(true),
+                        disabled: !currentQuestion.question,
+                    } }), children: [_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-center gap-2 rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: [_jsx("span", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("span", { children: externalErrors.join(' · ') })] }))] }), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation })] }));
 }
 export function AnswerTheQuestionCreator(props) {
     return _jsx(AnswerTheQuestionContent, { ...props });

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

@@ -52,6 +52,6 @@ export function AnswerTheQuestionGroupClient({ questionData, isReviewMode = fals
                 const expectedAnswers = Array.isArray(item.expectedAnswers)
                     ? item.expectedAnswers.filter((answer) => answer.trim() !== '')
                     : [];
-                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: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [toAnswerTheQuestionGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), _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: "rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700", children: userValue || (isReviewMode ? '(Chưa trả lời)' : 'Học sinh sẽ nhập câu trả lời tại đây') }), isReviewMode && expectedAnswers.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-gray-500", children: "\u0110\u00E1p \u00E1n m\u1EABu (AI)" }), _jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm text-gray-700", children: expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] }))] })] }, `${item.questionNumber}-${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-3 py-2", 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: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-3", children: [toAnswerTheQuestionGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), _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: "rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700", children: userValue || (isReviewMode ? '(Chưa trả lời)' : 'Học sinh sẽ nhập câu trả lời tại đây') }), isReviewMode && expectedAnswers.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-gray-500", children: "\u0110\u00E1p \u00E1n m\u1EABu (AI)" }), _jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm text-gray-700", children: expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] }))] })] }, `${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/answer-the-question-group/AnswerTheQuestionGroupCreator.js

@@ -10,7 +10,8 @@ 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, Sparkles, Star, Trash2 } from 'lucide-react';
+import { MessageSquare, Plus, Star, Trash2 } from 'lucide-react';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { AnswerTheQuestionGroupClient } from './AnswerTheQuestionGroupClient';
 import { toAnswerTheQuestionGroupImageUrls } from '../../_shared/types/answer-the-question-group.type';
 const DEFAULT_INSTRUCTION = 'Read the text again and answer the questions.';
@@ -180,10 +181,10 @@ export function AnswerTheQuestionGroupCreator({ initialData, onChange, externalE
     };
     const displayErrors = externalErrors && externalErrors.length > 0 ? externalErrors : errors;
     if (isClientMode) {
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Ch\u1EBF \u0111\u1ED9 ch\u1EC9nh s\u1EEDa"] }) }), _jsx(AnswerTheQuestionGroupClient, { questionData: buildPayload(), isReviewMode: true })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(AnswerTheQuestionGroupClient, { questionData: buildPayload(), isReviewMode: true })] }));
     }
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: "\u0110\u1ECDc v\u00E0 tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi (AI)" }), _jsx("p", { className: "text-sm text-gray-500", children: "Nh\u00F3m c\u00E2u \u0111\u1ECDc hi\u1EC3u l\u01B0u 1 row. AI ch\u1EA5m theo question + expectedAnswers." })] }), _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 \u0111\u1ECDc hi\u1EC3u" }) }), _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: DEFAULT_INSTRUCTION })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsxs("div", { className: "rounded-xl border border-violet-100 bg-violet-50 p-4 text-sm text-violet-800", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium", children: [_jsx(Sparkles, { className: "h-4 w-4" }), "Ch\u1EA5m \u0111i\u1EC3m b\u1EB1ng AI"] }), _jsx("p", { className: "mt-1 text-xs text-violet-700", children: "H\u1ECDc sinh vi\u1EBFt c\u00E2u tr\u1EA3 l\u1EDDi. AI so v\u1EDBi b\u1EA5t k\u1EF3 \u0111\u00E1p \u00E1n m\u1EABu n\u00E0o c\u1EE7a t\u1EEBng c\u00E2u (binary 0/1)." })] }), _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: "What is autism?" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "\u0110\u00E1p \u00E1n m\u1EABu cho AI" }), item.expectedAnswers.map((answer, answerIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: answer, onChange: (event) => updateExpectedAnswer(itemIndex, answerIndex, event.target.value), placeholder: `Đáp án mẫu ${answerIndex + 1}` }), item.expectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeExpectedAnswer(itemIndex, answerIndex), children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, `expected-${itemIndex}-${answerIndex}`))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => addExpectedAnswer(itemIndex), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n m\u1EABu"] })] }), !item.isExample && (_jsx(PointsInput, { value: item.points, allowZero: true, onChange: (e) => updateItem(itemIndex, { points: Number(e.target.value) || 0 }) }))] })] }, `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"] }), displayErrors.length > 0 && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: displayErrors.map((error) => (_jsx("p", { children: error }, error))) }))] }));
+    return (_jsxs("div", { className: "space-y-3", children: [displayErrors.length > 0 && (_jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: displayErrors.map((error) => (_jsx("p", { children: error }, error))) })), _jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(MessageSquare, { className: "h-3.5 w-3.5" }), title: "\u0110\u1ECDc v\u00E0 tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi (AI)", preview: { onClick: () => setIsClientMode(true) } }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "group-instruction", className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "group-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: DEFAULT_INSTRUCTION, className: "h-10 border-gray-200 bg-white" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-800", children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsxs("div", { className: "rounded-md border border-gray-200 bg-gray-50 px-3 py-2.5", children: [_jsx(PointsInput, { value: sumPoints(items), allowZero: true, readOnly: true }), _jsx("p", { className: "mt-1.5 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." })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs(CardTitle, { className: "text-sm font-semibold text-gray-800", children: ["Danh s\u00E1ch c\u00E2u h\u1ECFi (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm c\u00E2u h\u1ECFi"] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [items.map((item, itemIndex) => (_jsxs("div", { className: "space-y-2.5 rounded-md border border-gray-200 bg-white px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", itemIndex + 1] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: item.isExample === true, onCheckedChange: (checked) => updateItem(itemIndex, {
+                                                                    isExample: checked,
+                                                                    points: checked ? 0 : (item.points || 1),
+                                                                }) }), _jsxs(Label, { className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "C\u00E2u v\u00ED d\u1EE5"] })] }), !item.isExample && (_jsx(PointsInput, { value: item.points, allowZero: true, onChange: (e) => updateItem(itemIndex, { points: Number(e.target.value) || 0 }) })), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeItem(itemIndex), disabled: items.length <= 1, className: "h-7 w-7 text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: "C\u00E2u h\u1ECFi" }), _jsx(Textarea, { value: item.question, onChange: (event) => updateItem(itemIndex, { question: event.target.value }), rows: 2, placeholder: "What is autism?", className: "min-h-[56px] border-gray-200 bg-white" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: "\u0110\u00E1p \u00E1n m\u1EABu cho AI" }), item.expectedAnswers.map((answer, answerIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: answer, onChange: (event) => updateExpectedAnswer(itemIndex, answerIndex, event.target.value), placeholder: `Đáp án mẫu ${answerIndex + 1}`, className: "h-10 border-gray-200 bg-white" }), item.expectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeExpectedAnswer(itemIndex, answerIndex), className: "h-7 w-7 text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, `expected-${itemIndex}-${answerIndex}`))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => addExpectedAnswer(itemIndex), className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm \u0111\u00E1p \u00E1n m\u1EABu"] })] })] }, `item-${itemIndex}`))), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) })] })] })] }));
 }