@tinyweb_dev/oe-exam-sdk 1.0.6 → 1.0.7

package/dist/components/questions/_shared/components/compact/CompactFieldCard.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+interface CompactFieldCardProps {
+    header?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    contentClassName?: string;
+}
+export declare function CompactFieldCard({ header, children, className, contentClassName, }: CompactFieldCardProps): import("react").JSX.Element;
+export {};

package/dist/components/questions/_shared/components/compact/CompactFieldCard.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader } from '../../../../../components/ui/card';
+import { cn } from '../../../../../shared/lib/utils';
+export function CompactFieldCard({ header, children, className, contentClassName, }) {
+    return (_jsxs(Card, { className: cn('overflow-hidden border-0 bg-white shadow-sm', className), children: [header ? _jsx(CardHeader, { className: "px-3 py-2", children: header }) : null, _jsx(CardContent, { className: cn('space-y-2.5 px-3 pb-3', !header && 'pt-3', contentClassName), children: children })] }));
+}

package/dist/components/questions/_shared/components/compact/CompactPreviewBanner.d.ts

@@ -0,0 +1,7 @@
+interface CompactPreviewBannerProps {
+    message?: string;
+    onBack: () => void;
+    backLabel?: string;
+}
+export declare function CompactPreviewBanner({ message, onBack, backLabel, }: CompactPreviewBannerProps): import("react").JSX.Element;
+export {};

package/dist/components/questions/_shared/components/compact/CompactPreviewBanner.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../../../components/ui/button';
+import { Pencil } from 'lucide-react';
+export function CompactPreviewBanner({ message = 'Xem trước — hiển thị đáp án đúng, ảnh và audio đã thêm', onBack, backLabel = 'Quay lại chỉnh sửa', }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 rounded-xl border border-indigo-100 bg-indigo-50/70 px-4 py-2.5", children: [_jsx("p", { className: "text-sm font-medium text-indigo-800", children: message }), _jsxs(Button, { variant: "outline", size: "sm", onClick: onBack, children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), backLabel] })] }));
+}

package/dist/components/questions/_shared/components/compact/CompactPreviewButton.d.ts

@@ -0,0 +1,6 @@
+interface CompactPreviewButtonProps {
+    onClick: () => void;
+    disabled?: boolean;
+}
+export declare function CompactPreviewButton({ onClick, disabled }: CompactPreviewButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/questions/_shared/components/compact/CompactPreviewButton.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../../../components/ui/button';
+import { Eye } from 'lucide-react';
+export function CompactPreviewButton({ onClick, disabled }) {
+    return (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onClick, disabled: disabled, className: "h-8 gap-1.5 border-indigo-200 px-2.5 text-xs text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-3.5 w-3.5" }), "Xem tr\u01B0\u1EDBc"] }));
+}

package/dist/components/questions/_shared/components/compact/index.d.ts

@@ -0,0 +1,6 @@
+export { CompactPreviewBanner } from './CompactPreviewBanner';
+export { CompactExampleToggle } from './CompactExampleToggle';
+export { CompactPreviewButton } from './CompactPreviewButton';
+export { CompactCreatorHeader } from './CompactCreatorHeader';
+export { CompactFieldCard } from './CompactFieldCard';
+export { CompactExplanationToggle } from './CompactExplanationToggle';

package/dist/components/questions/_shared/components/compact/index.js

@@ -0,0 +1,6 @@
+export { CompactPreviewBanner } from './CompactPreviewBanner';
+export { CompactExampleToggle } from './CompactExampleToggle';
+export { CompactPreviewButton } from './CompactPreviewButton';
+export { CompactCreatorHeader } from './CompactCreatorHeader';
+export { CompactFieldCard } from './CompactFieldCard';
+export { CompactExplanationToggle } from './CompactExplanationToggle';

package/dist/components/questions/_shared/config/question-types.config.js

@@ -101,21 +101,6 @@ export const QUESTION_TYPE_CONFIG = {
         requiresContent: true,
         hasDedicatedComponent: true,
     },
-    LOOK_PICTURE_CHOOSE_CORRECT_ANSWER: {
-        label: 'Nhìn tranh, chọn đáp án đúng',
-        requiresContent: true,
-        hasDedicatedComponent: true,
-    },
-    LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER: {
-        label: 'Nhìn tranh, điền chỗ trống, chọn đáp án',
-        requiresContent: true,
-        hasDedicatedComponent: true,
-    },
-    LOOK_PICTURE_FILL_WORD_HINT: {
-        label: 'Nhìn tranh điền từ gợi ý',
-        requiresContent: true,
-        hasDedicatedComponent: true,
-    },
     LABEL_THE_PICTURE: {
         label: 'Label the Picture',
         requiresContent: true,
@@ -322,11 +307,6 @@ export const QUESTION_TYPE_CONFIG = {
         requiresContent: true,
         hasDedicatedComponent: true,
     },
-    GN_SPEAKING_INTERVIEW: {
-        label: 'GN Speaking - Hỏi đáp (Virtual + Real)',
-        requiresContent: true,
-        hasDedicatedComponent: true,
-    },
     SPEAKING_CUE_CARD: {
         label: 'IELTS Cue Card (Speaking Part 2)',
         requiresContent: true,
@@ -378,9 +358,6 @@ export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'ARRANGE_LETTERS_INTO_WORDS',
     'WRITE_SHORT_PARAGRAPH',
     'FILL_MISSING_WORDS_IN_GRID',
-    'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER',
-    'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER',
-    'LOOK_PICTURE_FILL_WORD_HINT',
     'LABEL_THE_PICTURE',
     'READ_AND_COLOR_OBJECTS',
     'IMAGE_OBJECT_MATCHING',
@@ -418,7 +395,6 @@ export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'SPONTANEOUS_QA',
     'SPONTANEOUS_QA_GROUP',
     'SPEAKING_CONVERSATION',
-    'GN_SPEAKING_INTERVIEW',
     'SPEAKING_CUE_CARD',
     'WORD_FILL_STRUCTURED_FORM',
     'CROSSWORD_PUZZLE',

package/dist/components/questions/_shared/hooks/useQuestionInitialization.js

@@ -98,15 +98,6 @@ export function useQuestionInitialization({ initialData, prefilledType, prefille
                         if (answerData.missingLetters)
                             updateFieldRef.current('fillMissingWordsInGridAnswers', answerData.missingLetters);
                         break;
-                    case 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER':
-                    case 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER':
-                        if (answerData.subQuestions)
-                            updateFieldRef.current('lookPictureChooseSubQuestions', answerData.subQuestions);
-                        break;
-                    case 'LOOK_PICTURE_FILL_WORD_HINT':
-                        if (answerData.subQuestions)
-                            updateFieldRef.current('lookPictureFillWordHintSubQuestions', answerData.subQuestions);
-                        break;
                 }
             }
         }

package/dist/components/questions/_shared/types/index.d.ts

@@ -5,7 +5,6 @@ export * from './arrange-letters-into-words.type';
 export * from './write-short-paragraph.type';
 export * from './fill-missing-words-in-grid.type';
 export * from './look-and-choose-answer.type';
-export * from './look-picture-fill-word-hint.type';
 export * from './label-the-picture.type';
 export * from './read-and-color-objects.type';
 export * from './fill-in-blank.type';

package/dist/components/questions/_shared/types/index.js

@@ -5,7 +5,6 @@ export * from './arrange-letters-into-words.type';
 export * from './write-short-paragraph.type';
 export * from './fill-missing-words-in-grid.type';
 export * from './look-and-choose-answer.type';
-export * from './look-picture-fill-word-hint.type';
 export * from './label-the-picture.type';
 export * from './read-and-color-objects.type';
 export * from './fill-in-blank.type';

package/dist/components/questions/_shared/types/look-and-choose-answer.type.d.ts

@@ -10,10 +10,6 @@ export interface LookAndChooseData {
     correctAnswerId?: string;
     points?: number;
 }
-export interface LookPictureChooseCorrectAnswerData {
-    subQuestions: LookAndChooseSubQuestion[];
-    points?: number;
-}
 export interface ValidationRef {
     triggerValidation: () => Promise<boolean>;
     getFormData?: () => any;
@@ -27,15 +23,6 @@ export interface LookAndChooseCreatorProps {
     optionCount?: number | null;
     validationRef?: React.MutableRefObject<ValidationRef | null>;
 }
-export interface LookPictureChooseCorrectAnswerCreatorProps {
-    initialData?: LookPictureChooseCorrectAnswerData;
-    onSave?: (data: LookPictureChooseCorrectAnswerData) => void;
-    onCancel?: () => void;
-    onChange?: (data: LookPictureChooseCorrectAnswerData) => void;
-    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
-    optionCount?: number | null;
-    validationRef?: React.MutableRefObject<ValidationRef | null>;
-}
 export interface LookAndChooseClientProps {
     questionData: {
         imageUrl?: string;

package/dist/components/questions/_shared/utils/answer-builder.js

@@ -59,17 +59,6 @@ export function buildAnswerPayload(questionType, state) {
                 missingLetters: state.fillMissingWordsInGridAnswers || [],
                 caseSensitive: false,
             };
-        case 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER':
-            // This type uses dedicated component, so answer is built by the component itself
-            return undefined;
-        case 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER':
-            // This type uses dedicated component, so answer is built by the component itself
-            return undefined;
-        case 'LOOK_PICTURE_FILL_WORD_HINT':
-            return {
-                subQuestions: state.lookPictureFillWordHintSubQuestions || [],
-                caseSensitive: false,
-            };
         case 'READ_PASSAGE_AND_ANSWER_QUESTIONS':
             // This type uses dedicated component, so answer is built by the component itself
             return undefined;

package/dist/components/questions/components/ColorRegionCreator.js

@@ -3,11 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { Button } from '../../../components/ui/button';
 import { Label } from '../../../components/ui/label';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
-import { PointsInput } from '../../../components/ui/points-input';
-import { X, Pencil, Eye, Plus, Trash2, MessageSquare, Palette, Lightbulb, Image } from 'lucide-react';
+import { X, Plus, Trash2, MessageSquare, Palette, Image } from 'lucide-react';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../_shared/components/compact';
 import { Input } from '../../../components/ui/input';
-import { Textarea } from '../../../components/ui/textarea';
 import { FileUpload } from '../../../components/ui/file-upload';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../components/ui/select';
 import { ColorRegionNode } from './ColorRegionNode';
@@ -352,68 +350,73 @@ function ColorRegionCreatorContent({ initialData, onSave, onCancel, onChange, on
             instructions,
             explanation,
         };
-        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { children: _jsx(CardTitle, { children: config.previewTitle }) }), _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(ClientComponent, { questionData: questionData, onSubmit: () => { }, isReviewMode: true, explanation: explanation })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(ClientComponent, { questionData: questionData, onSubmit: () => { }, isReviewMode: true, explanation: explanation })] }));
     }
     // Get available colors (not yet added)
     const availableColors = COLOR_PALETTE.filter((color) => !colorNodes.some((node) => node.color === color));
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-pink-500 to-purple-600 shadow-md", children: _jsx(Palette, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: config.creatorTitle }), _jsx("p", { className: "text-sm text-gray-500", children: config.creatorSubtitle })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(!isClientMode), className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [!isClientMode && (_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { value: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }) })), !isClientMode && (_jsx("div", { className: "rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "text-sm text-blue-900", children: [_jsx("p", { className: "font-semibold text-blue-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsx("ul", { className: "mt-2 space-y-1.5 text-blue-700", children: config.instructionsTips.map((tip, index) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), tip] }, index))) })] })] }) })), !isClientMode && (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), config.instructionsLabel, " ", instructionsRequired && _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs(Button, { onClick: () => {
-                                                    setInstructions([...instructions, '']);
-                                                    form.clearErrors('instructions');
-                                                }, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", size: "sm", variant: "outline", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u l\u1EC7nh"] })] }), errors.instructions && (_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("span", { className: "text-lg", children: "\u274C" }), _jsx("p", { className: "text-sm text-red-600", children: errors.instructions })] })), _jsx("div", { className: "space-y-3", children: instructions.map((instruction, index) => {
-                                            const hasError = errors.instructionItems?.[index];
-                                            return (_jsxs("div", { className: `group relative rounded-xl border-2 p-3 transition-all duration-200 ${instruction.trim()
-                                                    ? 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50'
-                                                    : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg font-bold transition-all ${instruction.trim()
-                                                                    ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
-                                                                    : 'bg-gray-100 text-gray-600'}`, children: index + 1 }), _jsx(Input, { value: instruction, onChange: (e) => {
-                                                                    const newInstructions = [...instructions];
-                                                                    newInstructions[index] = e.target.value;
-                                                                    setInstructions(newInstructions);
-                                                                    form.clearErrors('instructions');
-                                                                }, placeholder: `Ví dụ: ${config.instructionPlaceholder}`, className: `flex-1 border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${hasError ? 'border-red-400' : ''}` }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
-                                                                    setInstructions(instructions.filter((_, i) => i !== index));
-                                                                }, className: "text-gray-400 hover:bg-red-50 hover:text-red-500", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), hasError && (_jsx("p", { className: "ml-11 mt-2 text-sm text-red-600", children: hasError }))] }, index));
-                                        }) }), instructions.length === 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }), _jsx("p", { className: "text-sm text-amber-800", children: "Ch\u01B0a c\u00F3 h\u01B0\u1EDBng d\u1EABn n\u00E0o. Nh\u1EA5n \"Th\u00EAm c\u00E2u l\u1EC7nh\" \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u." })] }))] })), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Image, { className: "h-4 w-4 text-indigo-500" }), "\u1EA2nh n\u1EC1n ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "image-upload", label: "\u1EA2nh n\u1EC1n", accept: "image/*", value: backgroundImageUrl, onChange: (key) => {
-                                            setBackgroundImageUrl(key);
-                                            setImageLoaded(false);
-                                            form.clearErrors();
-                                        }, onPresignedUrlChange: (url) => {
-                                            setBackgroundPreviewUrl(url);
-                                            setImageLoaded(false);
-                                        }, disabled: isClientMode, maxSize: 5, placeholder: "Paste URL ho\u1EB7c upload file", required: true, autoUpload: true, prefix: "questions", onFileLoad: () => {
-                                            setImageLoaded(false);
-                                        } }), errors.backgroundImageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: errors.backgroundImageUrl }))] }), !isClientMode && (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Palette, { className: "h-4 w-4 text-purple-500" }), config.addItemLabel || 'Thêm Màu', " ", _jsx("span", { className: "text-red-500", children: "*" })] }), !showAddColorPanel && (_jsxs(Button, { onClick: () => setShowAddColorPanel(true), className: "gap-2 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700", size: "sm", variant: "outline", disabled: availableColors.length === 0, children: [_jsx(Plus, { className: "h-4 w-4" }), config.addItemLabel || 'Thêm màu'] }))] }), errors.colorNodes && (_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("span", { className: "text-lg", children: "\u274C" }), _jsx("p", { className: "text-sm text-red-600", children: errors.colorNodes })] })), showAddColorPanel && (_jsxs("div", { className: "flex flex-col gap-3 rounded-xl border-2 border-purple-200 bg-gradient-to-r from-purple-50 to-indigo-50 p-4", children: [showColorLabel && (_jsx(Input, { value: colorLabelValue, onChange: (e) => setColorLabelValue(e.target.value), placeholder: config.colorLabelPlaceholder || 'Nhập label (ví dụ: Tom, Apple...)', className: "h-9 border-gray-200 bg-white" })), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { value: selectedColor, onValueChange: setSelectedColor, children: [_jsx(SelectTrigger, { className: "flex-1 border-gray-200 bg-white", children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn m\u00E0u..." }) }), _jsx(SelectContent, { children: availableColors.map((color) => (_jsx(SelectItem, { value: color, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border border-gray-300", style: { backgroundColor: color } }), _jsx("span", { className: "font-mono text-xs", children: color })] }) }, color))) })] }), _jsx(Button, { size: "sm", onClick: addNewColorNode, disabled: !selectedColor ||
-                                                            availableColors.length === 0 ||
-                                                            (showColorLabel && !colorLabelValue.trim()), className: "bg-purple-600 hover:bg-purple-700", children: "T\u1EA1o" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => {
-                                                            setShowAddColorPanel(false);
-                                                            setSelectedColor('');
-                                                            setColorLabelValue('');
-                                                        }, children: "H\u1EE7y" })] })] })), colorNodes.length === 0 && !showAddColorPanel && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }), _jsx("p", { className: "text-sm text-amber-800", children: config.emptyItemMessage || 'Chưa có màu nào. Nhấn "Thêm màu" để bắt đầu.' })] }))] })), errors.regionNodes && (_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("span", { className: "text-lg", children: "\u274C" }), _jsx("p", { className: "text-sm text-red-600", children: errors.regionNodes })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 to-purple-500" }), _jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Workspace \u2014 \u1EA2nh n\u1EC1n" }), _jsx("span", { className: "text-xs text-gray-500", children: "K\u00E9o th\u1EA3 region \u0111\u1EC3 \u0111\u1ECBnh v\u1ECB" })] }) }), _jsxs(CardContent, { className: "p-0", children: [colorNodes.length > 0 && (_jsx("div", { className: "border-b border-gray-100 px-4 py-3 flex flex-wrap gap-2", children: colorNodes.map((node) => (_jsxs("div", { className: "inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900", children: [_jsx("div", { className: "h-4 w-4 rounded border border-gray-300", style: { backgroundColor: node.color } }), node.label ? (_jsx("span", { className: "text-xs", children: node.label })) : (_jsx("span", { className: "font-mono text-xs", children: node.color })), !isClientMode && (_jsx("button", { onClick: () => removeColorNode(node.id), className: "group rounded p-0.5 transition-all hover:scale-110 hover:bg-red-100", type: "button", children: _jsx(X, { className: "h-3 w-3 text-gray-500 transition-colors group-hover:text-red-600" }) }))] }, node.id))) })), _jsx("div", { ref: workspaceRef, className: "relative w-full overflow-hidden select-none isolate", style: { cursor: draggingId ? 'grabbing' : 'default' }, children: backgroundPreviewUrl ? (_jsxs(_Fragment, { children: [_jsx("img", { src: backgroundPreviewUrl, alt: "Background", className: "block w-full h-auto", draggable: false, onLoad: () => setImageLoaded(true), onError: () => {
-                                                form.setError('backgroundImageUrl', { message: 'Không thể load ảnh!' });
-                                                setImageLoaded(false);
-                                            } }), imageLoaded &&
-                                            regionNodes.map((region) => {
-                                                const linkedColorNode = colorNodes.find((n) => n.id === region.linkedColorNodeId);
-                                                return (_jsx("div", { style: {
-                                                        position: 'absolute',
-                                                        left: `${region.x}%`,
-                                                        top: `${region.y}%`,
-                                                        width: `${region.width}%`,
-                                                        height: `${region.height}%`,
-                                                        cursor: isClientMode ? 'default' : 'grab',
-                                                        zIndex: draggingId === region.id ? 2 : 1,
-                                                    }, onMouseDown: (e) => handleRegionMouseDown(region.id, region.x, region.y, e), children: _jsx(ColorRegionNode, { data: {
-                                                            color: region.color,
-                                                            x: region.x,
-                                                            y: region.y,
-                                                            width: region.width,
-                                                            height: region.height,
-                                                            onRemove: () => removeRegion(region.id),
-                                                            isEditMode: !isClientMode,
-                                                            isClientMode: isClientMode,
-                                                            label: linkedColorNode?.label || '',
-                                                        } }) }, region.id));
-                                            })] })) : (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-20 text-gray-400", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-10 w-10 text-gray-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), _jsx("p", { className: "text-sm", children: "Ch\u01B0a c\u00F3 \u1EA3nh n\u1EC1n. H\u00E3y upload \u1EA3nh \u1EDF tr\u00EAn." })] })) })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-gray-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-gray-300 to-gray-400" }), _jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-gray-100", children: _jsx(MessageSquare, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "Nh\u1EADp gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng...", rows: 3, className: "border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200" }) })] })] }));
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(Palette, { className: "h-3.5 w-3.5" }), title: config.creatorTitle, points: {
+                        value: points,
+                        onValueChange: setPoints,
+                    }, preview: {
+                        onClick: () => setIsClientMode(true),
+                    } }), children: [!isClientMode && (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), config.instructionsLabel, " ", instructionsRequired && _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs(Button, { onClick: () => {
+                                            setInstructions([...instructions, '']);
+                                            form.clearErrors('instructions');
+                                        }, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", size: "sm", variant: "outline", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u l\u1EC7nh"] })] }), errors.instructions && (_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("span", { className: "text-lg", children: "\u274C" }), _jsx("p", { className: "text-sm text-red-600", children: errors.instructions })] })), _jsx("div", { className: "space-y-3", children: instructions.map((instruction, index) => {
+                                    const hasError = errors.instructionItems?.[index];
+                                    return (_jsxs("div", { className: `group relative rounded-xl border-2 p-3 transition-all duration-200 ${instruction.trim()
+                                            ? 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50'
+                                            : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg font-bold transition-all ${instruction.trim()
+                                                            ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
+                                                            : 'bg-gray-100 text-gray-600'}`, children: index + 1 }), _jsx(Input, { value: instruction, onChange: (e) => {
+                                                            const newInstructions = [...instructions];
+                                                            newInstructions[index] = e.target.value;
+                                                            setInstructions(newInstructions);
+                                                            form.clearErrors('instructions');
+                                                        }, placeholder: `Ví dụ: ${config.instructionPlaceholder}`, className: `flex-1 border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${hasError ? 'border-red-400' : ''}` }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                                                            setInstructions(instructions.filter((_, i) => i !== index));
+                                                        }, className: "text-gray-400 hover:bg-red-50 hover:text-red-500", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), hasError && (_jsx("p", { className: "ml-11 mt-2 text-sm text-red-600", children: hasError }))] }, index));
+                                }) }), instructions.length === 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }), _jsx("p", { className: "text-sm text-amber-800", children: "Ch\u01B0a c\u00F3 h\u01B0\u1EDBng d\u1EABn n\u00E0o. Nh\u1EA5n \"Th\u00EAm c\u00E2u l\u1EC7nh\" \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u." })] }))] })), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Image, { className: "h-4 w-4 text-indigo-500" }), "\u1EA2nh n\u1EC1n ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "image-upload", label: "\u1EA2nh n\u1EC1n", accept: "image/*", value: backgroundImageUrl, onChange: (key) => {
+                                    setBackgroundImageUrl(key);
+                                    setImageLoaded(false);
+                                    form.clearErrors();
+                                }, onPresignedUrlChange: (url) => {
+                                    setBackgroundPreviewUrl(url);
+                                    setImageLoaded(false);
+                                }, disabled: isClientMode, maxSize: 5, placeholder: "Paste URL ho\u1EB7c upload file", required: true, autoUpload: true, prefix: "questions", onFileLoad: () => {
+                                    setImageLoaded(false);
+                                } }), errors.backgroundImageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: errors.backgroundImageUrl }))] }), !isClientMode && (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Palette, { className: "h-4 w-4 text-purple-500" }), config.addItemLabel || 'Thêm Màu', " ", _jsx("span", { className: "text-red-500", children: "*" })] }), !showAddColorPanel && (_jsxs(Button, { onClick: () => setShowAddColorPanel(true), className: "gap-2 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700", size: "sm", variant: "outline", disabled: availableColors.length === 0, children: [_jsx(Plus, { className: "h-4 w-4" }), config.addItemLabel || 'Thêm màu'] }))] }), errors.colorNodes && (_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("span", { className: "text-lg", children: "\u274C" }), _jsx("p", { className: "text-sm text-red-600", children: errors.colorNodes })] })), showAddColorPanel && (_jsxs("div", { className: "flex flex-col gap-3 rounded-xl border-2 border-purple-200 bg-gradient-to-r from-purple-50 to-indigo-50 p-4", children: [showColorLabel && (_jsx(Input, { value: colorLabelValue, onChange: (e) => setColorLabelValue(e.target.value), placeholder: config.colorLabelPlaceholder || 'Nhập label (ví dụ: Tom, Apple...)', className: "h-9 border-gray-200 bg-white" })), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { value: selectedColor, onValueChange: setSelectedColor, children: [_jsx(SelectTrigger, { className: "flex-1 border-gray-200 bg-white", children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn m\u00E0u..." }) }), _jsx(SelectContent, { children: availableColors.map((color) => (_jsx(SelectItem, { value: color, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border border-gray-300", style: { backgroundColor: color } }), _jsx("span", { className: "font-mono text-xs", children: color })] }) }, color))) })] }), _jsx(Button, { size: "sm", onClick: addNewColorNode, disabled: !selectedColor ||
+                                                    availableColors.length === 0 ||
+                                                    (showColorLabel && !colorLabelValue.trim()), className: "bg-purple-600 hover:bg-purple-700", children: "T\u1EA1o" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => {
+                                                    setShowAddColorPanel(false);
+                                                    setSelectedColor('');
+                                                    setColorLabelValue('');
+                                                }, children: "H\u1EE7y" })] })] })), colorNodes.length === 0 && !showAddColorPanel && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }), _jsx("p", { className: "text-sm text-amber-800", children: config.emptyItemMessage || 'Chưa có màu nào. Nhấn "Thêm màu" để bắt đầu.' })] }))] })), errors.regionNodes && (_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("span", { className: "text-lg", children: "\u274C" }), _jsx("p", { className: "text-sm text-red-600", children: errors.regionNodes })] }))] }), _jsxs(CompactFieldCard, { header: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: "Workspace \u2014 \u1EA2nh n\u1EC1n" }), _jsx("span", { className: "text-xs text-gray-500", children: "K\u00E9o th\u1EA3 region \u0111\u1EC3 \u0111\u1ECBnh v\u1ECB" })] }), contentClassName: "p-0 space-y-0 px-0 pb-0", children: [colorNodes.length > 0 && (_jsx("div", { className: "border-b border-gray-100 px-4 py-3 flex flex-wrap gap-2", children: colorNodes.map((node) => (_jsxs("div", { className: "inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900", children: [_jsx("div", { className: "h-4 w-4 rounded border border-gray-300", style: { backgroundColor: node.color } }), node.label ? (_jsx("span", { className: "text-xs", children: node.label })) : (_jsx("span", { className: "font-mono text-xs", children: node.color })), !isClientMode && (_jsx("button", { onClick: () => removeColorNode(node.id), className: "group rounded p-0.5 transition-all hover:scale-110 hover:bg-red-100", type: "button", children: _jsx(X, { className: "h-3 w-3 text-gray-500 transition-colors group-hover:text-red-600" }) }))] }, node.id))) })), _jsx("div", { ref: workspaceRef, className: "relative w-full overflow-hidden select-none isolate", style: { cursor: draggingId ? 'grabbing' : 'default' }, children: backgroundPreviewUrl ? (_jsxs(_Fragment, { children: [_jsx("img", { src: backgroundPreviewUrl, alt: "Background", className: "block w-full h-auto", draggable: false, onLoad: () => setImageLoaded(true), onError: () => {
+                                        form.setError('backgroundImageUrl', { message: 'Không thể load ảnh!' });
+                                        setImageLoaded(false);
+                                    } }), imageLoaded &&
+                                    regionNodes.map((region) => {
+                                        const linkedColorNode = colorNodes.find((n) => n.id === region.linkedColorNodeId);
+                                        return (_jsx("div", { style: {
+                                                position: 'absolute',
+                                                left: `${region.x}%`,
+                                                top: `${region.y}%`,
+                                                width: `${region.width}%`,
+                                                height: `${region.height}%`,
+                                                cursor: isClientMode ? 'default' : 'grab',
+                                                zIndex: draggingId === region.id ? 2 : 1,
+                                            }, onMouseDown: (e) => handleRegionMouseDown(region.id, region.x, region.y, e), children: _jsx(ColorRegionNode, { data: {
+                                                    color: region.color,
+                                                    x: region.x,
+                                                    y: region.y,
+                                                    width: region.width,
+                                                    height: region.height,
+                                                    onRemove: () => removeRegion(region.id),
+                                                    isEditMode: !isClientMode,
+                                                    isClientMode: isClientMode,
+                                                    label: linkedColorNode?.label || '',
+                                                } }) }, region.id));
+                                    })] })) : (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-20 text-gray-400", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-10 w-10 text-gray-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), _jsx("p", { className: "text-sm", children: "Ch\u01B0a c\u00F3 \u1EA3nh n\u1EC1n. H\u00E3y upload \u1EA3nh \u1EDF tr\u00EAn." })] })) })] }), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) })] }));
 }
 export function ColorRegionCreator(props) {
     return _jsx(ColorRegionCreatorContent, { ...props });

package/dist/components/questions/components/QuestionSearchDropdown.js

@@ -19,9 +19,6 @@ const truncate = (text, maxLength) => {
 };
 // Image-based question types
 const IMAGE_BASED_TYPES = [
-    'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER',
-    'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER',
-    'LOOK_PICTURE_FILL_WORD_HINT',
     'FILL_IN_BLANK',
     'FILL_IN_BLANK_GROUP',
     'LABEL_THE_PICTURE',
@@ -54,9 +51,6 @@ const getQuestionTypeIcon = (type) => {
 // Get question type display name in Vietnamese
 const getQuestionTypeName = (type) => {
     const typeMap = {
-        '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 ý',
         'FILL_MISSING_WORDS_IN_GRID': 'Điền chữ trong bảng',
         'CHOOSE_THE_CORRECT_ANSWER': 'Chọn đáp án đúng',
         'LABEL_THE_PICTURE': 'Gắn nhãn hình ảnh',
@@ -90,7 +84,6 @@ export const getContentDisplayText = (content, type) => {
     }
     // Handle object content based on question type
     if (typeof content === 'object') {
-        // LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER, LOOK_PICTURE_CHOOSE_CORRECT_ANSWER
         if (content.subQuestions && Array.isArray(content.subQuestions)) {
             const firstSubQ = content.subQuestions[0];
             if (firstSubQ?.question) {
@@ -101,7 +94,6 @@ export const getContentDisplayText = (content, type) => {
         if (content.question) {
             return content.question;
         }
-        // LOOK_PICTURE_FILL_WORD_HINT - show word pattern
         if (content.word) {
             return `Điền chữ: ${content.word}`;
         }

package/dist/components/questions/components/QuestionTypeSelector.js

@@ -19,8 +19,6 @@ export function QuestionTypeSelector({ value, onValueChange, disabled, }) {
         'READ_AND_CHOOSE_APPROPRIATE_WORD',
         'WRITE_SHORT_PARAGRAPH',
         'FILL_MISSING_WORDS_IN_GRID',
-        'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER',
-        'LOOK_PICTURE_FILL_WORD_HINT',
         'LABEL_THE_PICTURE',
         'READ_AND_COLOR_OBJECTS',
         'ANSWER_THE_QUESTION',

package/dist/components/questions/components/index.d.ts

@@ -3,6 +3,7 @@ export { ColorRegionClient } from './ColorRegionClient';
 export { ColorRegionCreator } from './ColorRegionCreator';
 export { ColorRegionNode } from './ColorRegionNode';
 export { CreatorGuide } from './CreatorGuide';
+export { CompactCreatorHeader, CompactExampleToggle, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, CompactPreviewButton, } from '../_shared/components/compact';
 export { NameNode } from './NameNode';
 export { QuestionBankOption } from './QuestionBankOption';
 export { QuestionBasicInfoForm } from './QuestionBasicInfoForm';

package/dist/components/questions/components/index.js

@@ -3,6 +3,7 @@ export { ColorRegionClient } from './ColorRegionClient';
 export { ColorRegionCreator } from './ColorRegionCreator';
 export { ColorRegionNode } from './ColorRegionNode';
 export { CreatorGuide } from './CreatorGuide';
+export { CompactCreatorHeader, CompactExampleToggle, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, CompactPreviewButton, } from '../_shared/components/compact';
 export { NameNode } from './NameNode';
 export { QuestionBankOption } from './QuestionBankOption';
 export { QuestionBasicInfoForm } from './QuestionBasicInfoForm';

package/dist/components/questions/creator/question-type-registry.js

@@ -3,9 +3,6 @@ import { fillInBlankRegistration } from '../types/fill-in-blank/register';
 import { arrangeLettersIntoWordsRegistration } from '../types/arrange-letters-into-words/register';
 import { writeShortParagraphRegistration } from '../types/write-short-paragraph/register';
 import { fillMissingWordsInGridRegistration } from '../types/fill-missing-words-in-grid/register';
-import { lookPictureChooseCorrectAnswerRegistration } from '../types/look-picture-choose-correct-answer/register';
-import { lookPictureFillBlankChooseAnswerRegistration } from '../types/look-picture-fill-blank-choose-answer/register';
-import { lookPictureFillWordHintRegistration } from '../types/look-picture-fill-word-hint/register';
 import { labelThePictureRegistration } from '../types/label-the-picture/register';
 import { readAndColorObjectsRegistration } from '../types/read-and-color-objects/register';
 import { imageObjectMatchingRegistration } from '../types/image-object-matching/register';
@@ -44,7 +41,6 @@ import { spontaneousQARegistration } from '../types/spontaneous-qa/register';
 import { spontaneousQaGroupRegistration } from '../types/spontaneous-qa-group/register';
 import { readDisplayedContentRegistration } from '../types/read-displayed-content/register';
 import { speakingConversationRegistration } from '../types/speaking-conversation/register';
-import { gnSpeakingInterviewRegistration } from '../types/gn-speaking-interview/register';
 import { speakingCueCardRegistration } from '../types/speaking-cue-card/register';
 import { wordFillStructuredFormRegistration } from '../types/word-fill-structured-form/register';
 import { wordOrderAndMatchGroupRegistration } from '../types/word-order-and-match-group/register';
@@ -68,9 +64,6 @@ export const questionTypeRegistry = {
     ARRANGE_LETTERS_INTO_WORDS: arrangeLettersIntoWordsRegistration,
     WRITE_SHORT_PARAGRAPH: writeShortParagraphRegistration,
     FILL_MISSING_WORDS_IN_GRID: fillMissingWordsInGridRegistration,
-    LOOK_PICTURE_CHOOSE_CORRECT_ANSWER: lookPictureChooseCorrectAnswerRegistration,
-    LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER: lookPictureFillBlankChooseAnswerRegistration,
-    LOOK_PICTURE_FILL_WORD_HINT: lookPictureFillWordHintRegistration,
     LABEL_THE_PICTURE: labelThePictureRegistration,
     READ_AND_COLOR_OBJECTS: readAndColorObjectsRegistration,
     IMAGE_OBJECT_MATCHING: imageObjectMatchingRegistration,
@@ -102,7 +95,6 @@ export const questionTypeRegistry = {
     SPONTANEOUS_QA_GROUP: spontaneousQaGroupRegistration,
     READ_DISPLAYED_CONTENT: readDisplayedContentRegistration,
     SPEAKING_CONVERSATION: speakingConversationRegistration,
-    GN_SPEAKING_INTERVIEW: gnSpeakingInterviewRegistration,
     SPEAKING_CUE_CARD: speakingCueCardRegistration,
     WORD_FILL_STRUCTURED_FORM: wordFillStructuredFormRegistration,
     CROSSWORD_PUZZLE: crosswordPuzzleRegistration,

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

@@ -114,8 +114,8 @@ export function ArticlesGroupCard({ groupNumber, articleCount, articles, onArtic
         const updated = displayArticles.filter((_, i) => i !== index);
         onArticlesChange(updated);
     };
-    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-teal-500 via-emerald-500 to-green-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-teal-500 to-emerald-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: "B\u00E0i vi\u1EBFt nh\u00F3m" }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-teal-300 bg-teal-100 px-2.5 py-0.5 text-xs font-semibold text-teal-700", children: ["Nh\u00F3m ", groupNumber] }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-600", children: [articles.length || articleCount, " b\u00E0i vi\u1EBFt"] })] }), _jsxs("p", { className: "text-sm text-gray-500", children: ["Nh\u1EADp n\u1ED9i dung t\u1EEBng b\u00E0i vi\u1EBFt \u2014 d\u00F9ng chung cho t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi trong Nh\u00F3m ", groupNumber, ". B\u1EA1n c\u00F3 th\u1EC3 th\u00EAm ho\u1EB7c x\u00F3a b\u00E0i vi\u1EBFt."] })] })] }) }), _jsxs(CardContent, { className: "space-y-5", children: [_jsxs("div", { className: "space-y-2 pb-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-teal-500" }), "Ti\u00EAu \u0111\u1EC1 nh\u00F3m b\u00E0i vi\u1EBFt", ' ', _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: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 chung cho nh\u00F3m b\u00E0i vi\u1EBFt\u2026", readOnly: isReadOnly, className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${isReadOnly ? 'bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0' : ''}` })] }), displayArticles.map((article, index) => {
+    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: "B\u00E0i vi\u1EBFt 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("span", { className: "inline-flex items-center rounded-md border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-600", children: [articles.length || articleCount, " b\u00E0i vi\u1EBFt"] })] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [_jsxs("div", { className: "space-y-2 pb-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-teal-500" }), "Ti\u00EAu \u0111\u1EC1 nh\u00F3m b\u00E0i vi\u1EBFt", ' ', _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: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 chung cho nh\u00F3m b\u00E0i vi\u1EBFt\u2026", readOnly: isReadOnly, className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${isReadOnly ? 'bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0' : ''}` })] }), displayArticles.map((article, index) => {
                         const letter = String.fromCharCode(65 + index); // A, B, C...
-                        return (_jsxs("div", { className: "rounded-xl border-2 border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 transition-all hover:border-teal-200 hover:shadow-sm", children: [_jsxs("div", { className: "mb-3 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-emerald-600 text-sm font-bold text-white shadow-sm", children: letter }), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["B\u00E0i vi\u1EBFt ", index + 1] })] }), displayArticles.length > 1 && !isReadOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleDeleteArticle(index), className: "h-8 w-8 p-0 text-red-500 hover:bg-red-50 hover:text-red-600", title: "X\u00F3a b\u00E0i vi\u1EBFt", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-name-${index}`, className: "flex items-center gap-1.5 text-sm font-medium text-gray-700", children: [_jsx(Type, { className: "h-3.5 w-3.5 text-teal-500" }), "T\u00EAn ng\u01B0\u1EDDi / ti\u00EAu \u0111\u1EC1"] }), _jsx(Input, { id: `${uploadIdPrefix}-name-${index}`, value: article.name, onChange: (e) => handleFieldChange(index, 'name', e.target.value), placeholder: `VD: Ariel, Clive, Vicky...`, readOnly: isReadOnly, className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${isReadOnly ? 'bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0' : ''}` })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "flex items-center gap-1.5 text-sm font-medium text-gray-700", children: [_jsx(FileText, { className: "h-3.5 w-3.5 text-teal-500" }), "N\u1ED9i dung b\u00E0i vi\u1EBFt"] }), _jsx(ArticleEditor, { value: article.content, onChange: (html) => handleFieldChange(index, 'content', html), isReadOnly: isReadOnly })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "flex items-center gap-1.5 text-sm font-medium text-gray-700", children: [_jsx(ImageIcon, { className: "h-3.5 w-3.5 text-teal-500" }), "H\u00ECnh \u1EA3nh", ' ', _jsx("span", { className: "text-xs font-normal text-gray-400", children: "(T\u00F9y ch\u1ECDn)" })] }), !isReadOnly && (_jsx(FileUpload, { id: `${uploadIdPrefix}-image-${index}`, label: "", accept: "image/*", value: article.imageUrl, onChange: (url) => handleFieldChange(index, 'imageUrl', url), maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" })), article.imageUrl && (_jsx(ArticleImagePreview, { src: article.imageUrl, alt: `Article ${letter} image` }))] })] })] }, index));
+                        return (_jsxs("div", { className: "rounded-md border border-gray-200 bg-white p-3 transition-all hover:border-gray-300 hover:shadow-sm", children: [_jsxs("div", { className: "mb-3 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-emerald-600 text-sm font-bold text-white shadow-sm", children: letter }), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["B\u00E0i vi\u1EBFt ", index + 1] })] }), displayArticles.length > 1 && !isReadOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleDeleteArticle(index), className: "h-8 w-8 p-0 text-red-500 hover:bg-red-50 hover:text-red-600", title: "X\u00F3a b\u00E0i vi\u1EBFt", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-name-${index}`, className: "flex items-center gap-1.5 text-sm font-medium text-gray-700", children: [_jsx(Type, { className: "h-3.5 w-3.5 text-teal-500" }), "T\u00EAn ng\u01B0\u1EDDi / ti\u00EAu \u0111\u1EC1"] }), _jsx(Input, { id: `${uploadIdPrefix}-name-${index}`, value: article.name, onChange: (e) => handleFieldChange(index, 'name', e.target.value), placeholder: `VD: Ariel, Clive, Vicky...`, readOnly: isReadOnly, className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${isReadOnly ? 'bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0' : ''}` })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "flex items-center gap-1.5 text-sm font-medium text-gray-700", children: [_jsx(FileText, { className: "h-3.5 w-3.5 text-teal-500" }), "N\u1ED9i dung b\u00E0i vi\u1EBFt"] }), _jsx(ArticleEditor, { value: article.content, onChange: (html) => handleFieldChange(index, 'content', html), isReadOnly: isReadOnly })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "flex items-center gap-1.5 text-sm font-medium text-gray-700", children: [_jsx(ImageIcon, { className: "h-3.5 w-3.5 text-teal-500" }), "H\u00ECnh \u1EA3nh", ' ', _jsx("span", { className: "text-xs font-normal text-gray-400", children: "(T\u00F9y ch\u1ECDn)" })] }), !isReadOnly && (_jsx(FileUpload, { id: `${uploadIdPrefix}-image-${index}`, label: "", accept: "image/*", value: article.imageUrl, onChange: (url) => handleFieldChange(index, 'imageUrl', url), maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" })), article.imageUrl && (_jsx(ArticleImagePreview, { src: article.imageUrl, alt: `Article ${letter} image` }))] })] })] }, index));
                     }), !isReadOnly && (_jsxs(Button, { type: "button", variant: "outline", className: "w-full border-dashed border-teal-300 bg-teal-50/50 text-teal-700 hover:bg-teal-50 hover:text-teal-800 hover:border-teal-400", onClick: handleAddArticle, children: [_jsx(PlusCircle, { className: "mr-2 h-4 w-4" }), "Th\u00EAm b\u00E0i vi\u1EBFt"] }))] })] }));
 }

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

@@ -34,7 +34,7 @@ export function BasicQuestionGroupCard({ groupNumber, title, subtitle, content,
     // Resolve presigned preview URL for the stored image key
     const { previewUrl } = usePresignedFileUrl(imageUrl);
     const displayPreviewUrl = previewUrl || '';
-    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-purple-500 via-violet-500 to-indigo-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-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: "D\u1EEF li\u1EC7u nh\u00F3m" }), _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 ", groupNumber] })] }), _jsxs("p", { className: "text-sm text-gray-500", children: ["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-purple-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) => {
+    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: "D\u1EEF li\u1EC7u 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-purple-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-purple-300 focus:ring-purple-200 ${isReadOnly ? 'bg-gray-50 text-gray-500 cursor-not-allowed border-transparent 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(Type, { className: "h-4 w-4 text-purple-500" }), "Ph\u1EE5 \u0111\u1EC1 nh\u00F3m", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: `${uploadIdPrefix}-subtitle`, value: subtitle, onChange: (e) => {