@tinyweb_dev/oe-exam-sdk 1.0.0 → 1.0.1

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

@@ -0,0 +1,408 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { BookOpen, FileText, Grid3X3, Image as ImageIcon, Volume2, } from 'lucide-react';
+import { Label } from '../../../components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../components/ui/select';
+export const QUESTION_BANK_FILTER_ALL_VALUE = '__all__';
+/** Keep selected id visible even before cascade options finish loading. */
+export function mergeFilterOptions(options, selectedId, selectedLabel) {
+    const id = selectedId.trim();
+    if (!id)
+        return options;
+    if (options.some((opt) => opt.id === id))
+        return options;
+    return [{ id, name: selectedLabel?.trim() || id }, ...options];
+}
+export function FilterSelect({ label, value, options, onChange, disabled, selectedLabel, }) {
+    const mergedOptions = useMemo(() => mergeFilterOptions(options, value, selectedLabel), [options, value, selectedLabel]);
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[11px] font-semibold text-gray-500", children: label }), _jsxs(Select, { value: value || QUESTION_BANK_FILTER_ALL_VALUE, onValueChange: (v) => onChange(v === QUESTION_BANK_FILTER_ALL_VALUE ? '' : v), disabled: disabled, children: [_jsx(SelectTrigger, { className: "h-9 w-full bg-white", children: _jsx(SelectValue, { placeholder: `Tất cả ${label.toLowerCase()}` }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: QUESTION_BANK_FILTER_ALL_VALUE, children: "T\u1EA5t c\u1EA3" }), mergedOptions.map((opt) => (_jsx(SelectItem, { value: opt.id, children: opt.name }, opt.id)))] })] })] }));
+}
+/** Map plain string list (e.g. questionTypes) → FilterSelect options. */
+export function toStringOptions(values) {
+    return values.map((value) => ({ id: value, name: questionTypeLabel(value) }));
+}
+/** Vietnamese labels for the most common question types in the bank. */
+const QUESTION_TYPE_LABELS = {
+    CHOOSE_THE_CORRECT_ANSWER: 'Chọn đáp án đúng',
+    CHOOSE_THE_CORRECT_ANSWER_GROUP: 'Chọn đáp án đúng (nhóm)',
+    FILL_IN_BLANK: 'Điền vào chỗ trống',
+    FILL_IN_BLANK_GROUP: 'Điền chỗ trống (nhóm)',
+    WORD_FILL_STRUCTURED_FORM: 'Điền từ / cấu trúc',
+    READ_PASSAGE_AND_ANSWER_QUESTIONS: 'Đọc hiểu',
+    READ_DISPLAYED_CONTENT: 'Đọc nội dung hiển thị',
+    ANSWER_THE_QUESTION: 'Trả lời câu hỏi',
+    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)',
+    MATCHING_WITH_LINES_GROUP: 'Nối bằng đường kẻ (nhóm)',
+    MATCH_COLUMNS_TO_MAKE_SENTENCES: 'Ghép cột thành câu',
+    WORD_ORDERING_GROUP: 'Sắp xếp từ (nhóm)',
+    WORD_ORDER_AND_MATCH_GROUP: 'Sắp xếp từ & nối (nhóm)',
+    SORT_WORDS_INTO_CATEGORIES: 'Sắp xếp từ vào nhóm',
+    CHOOSE_THEN_ANSWER_GROUP: 'Chọn rồi trả lời (nhóm)',
+    ANSWER_THE_QUESTION_GROUP: 'Trả lời câu hỏi (nhóm)',
+    TRUE_FALSE_GROUP: 'Đúng / Sai (nhóm)',
+    TRUE_FALSE_CORRECT_GROUP: 'Đúng / Sai & sửa (nhóm)',
+    CROSS_OUT_WORD_GROUP: 'Gạch từ thừa (nhóm)',
+    FILL_MISSING_WORDS_IN_GRID: 'Điền chữ trong bảng',
+    CROSSWORD_PUZZLE: 'Ô chữ',
+    FIND_WORDS_IN_MATRIX: 'Tìm từ trong bảng',
+    WRITE_A_SHORT_LETTER: 'Viết thư ngắn',
+    WRITE_SHORT_PARAGRAPH: 'Viết đoạn văn ngắn',
+    WRITE_CORRECT_VERB_FORM: 'Viết dạng động từ',
+    SIMPLE_ANSWER: 'Trả lời ngắn',
+    SPONTANEOUS_QA_GROUP: 'Hỏi đáp tự do (nhóm)',
+};
+export function questionTypeLabel(type) {
+    return QUESTION_TYPE_LABELS[type] ?? type.replace(/_/g, ' ').toLowerCase();
+}
+var QuestionTypeVisualKind;
+(function (QuestionTypeVisualKind) {
+    QuestionTypeVisualKind["IMAGE"] = "image";
+    QuestionTypeVisualKind["PASSAGE"] = "passage";
+    QuestionTypeVisualKind["GRID"] = "grid";
+    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,
+    MATCHING_WITH_LINES_GROUP: QuestionTypeVisualKind.IMAGE,
+    READ_PASSAGE_AND_ANSWER_QUESTIONS: QuestionTypeVisualKind.PASSAGE,
+    READ_PASSAGE_AND_COMPLETE_STORY: QuestionTypeVisualKind.PASSAGE,
+    FILL_MISSING_WORDS_IN_GRID: QuestionTypeVisualKind.GRID,
+    CROSSWORD_PUZZLE: QuestionTypeVisualKind.GRID,
+    FIND_WORDS_IN_MATRIX: QuestionTypeVisualKind.GRID,
+};
+/** Icon + tint per question type family — quick visual scanning in lists. */
+export function QuestionTypeIcon({ type }) {
+    const kind = TYPE_VISUAL_KIND[type] ?? QuestionTypeVisualKind.TEXT;
+    switch (kind) {
+        case QuestionTypeVisualKind.IMAGE:
+            return _jsx(ImageIcon, { className: "h-4 w-4 text-blue-500" });
+        case QuestionTypeVisualKind.PASSAGE:
+            return _jsx(BookOpen, { className: "h-4 w-4 text-green-600" });
+        case QuestionTypeVisualKind.GRID:
+            return _jsx(Grid3X3, { className: "h-4 w-4 text-purple-500" });
+        default:
+            return _jsx(FileText, { className: "h-4 w-4 text-gray-400" });
+    }
+}
+export var QuestionDifficulty;
+(function (QuestionDifficulty) {
+    QuestionDifficulty["EASY"] = "EASY";
+    QuestionDifficulty["MEDIUM"] = "MEDIUM";
+    QuestionDifficulty["HARD"] = "HARD";
+})(QuestionDifficulty || (QuestionDifficulty = {}));
+const DIFFICULTY_BADGE_CLASS = {
+    [QuestionDifficulty.EASY]: 'border-green-200 bg-green-50 text-green-700',
+    [QuestionDifficulty.MEDIUM]: 'border-amber-200 bg-amber-50 text-amber-700',
+    [QuestionDifficulty.HARD]: 'border-red-200 bg-red-50 text-red-700',
+};
+const DIFFICULTY_LABEL = {
+    [QuestionDifficulty.EASY]: 'Dễ',
+    [QuestionDifficulty.MEDIUM]: 'TB',
+    [QuestionDifficulty.HARD]: 'Khó',
+};
+function parseDifficulty(raw) {
+    const upper = raw?.trim().toUpperCase();
+    if (upper === QuestionDifficulty.EASY)
+        return QuestionDifficulty.EASY;
+    if (upper === QuestionDifficulty.MEDIUM)
+        return QuestionDifficulty.MEDIUM;
+    if (upper === QuestionDifficulty.HARD)
+        return QuestionDifficulty.HARD;
+    return null;
+}
+export function difficultyBadge(raw) {
+    const difficulty = parseDifficulty(raw);
+    if (!difficulty)
+        return null;
+    return {
+        label: DIFFICULTY_LABEL[difficulty],
+        className: DIFFICULTY_BADGE_CLASS[difficulty],
+    };
+}
+function firstStringOf(record, keys) {
+    for (const key of keys) {
+        const value = record[key];
+        if (typeof value === 'string' && value.trim())
+            return value.trim();
+    }
+    return null;
+}
+function asRecord(value) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+        return value;
+    }
+    return null;
+}
+/** Strip HTML tags / entities so list rows show readable text, not markup. */
+export function stripHtmlToText(raw) {
+    let text = raw
+        .replace(/<\s*br\s*\/?>/gi, ' ')
+        .replace(/<\/\s*(p|div|tr|li|h[1-6]|table)\s*>/gi, ' ')
+        .replace(/<[^>]+>/g, ' ')
+        .replace(/\{(\d+)\}/g, '___')
+        .replace(/&nbsp;/gi, ' ')
+        .replace(/&/gi, '&')
+        .replace(/</gi, '<')
+        .replace(/>/gi, '>')
+        .replace(/"/gi, '"')
+        .replace(/'/g, "'")
+        .replace(/'/gi, "'");
+    text = text.replace(/\s+/g, ' ').trim();
+    return text;
+}
+const PREVIEW_TEXT_KEYS = [
+    'question',
+    'questionText',
+    'sentence',
+    'text',
+    'passage',
+    'prompt',
+    'instruction',
+    'mainTitle',
+    'title',
+    // Pearson WORD_FILL_STRUCTURED_FORM nests HTML under `content`.
+    'content',
+];
+const PREVIEW_MAX_LEN = 220;
+function clampPreview(text, max = PREVIEW_MAX_LEN) {
+    if (text.length <= max)
+        return text;
+    return `${text.slice(0, max - 1).trimEnd()}…`;
+}
+function optionPreviewLabel(option) {
+    if (typeof option === 'string' && option.trim())
+        return option.trim();
+    const record = asRecord(option);
+    if (!record)
+        return null;
+    return firstStringOf(record, ['text', 'label', 'value']);
+}
+/** Build "A / B / C" snippet from options array when question stem is empty. */
+function optionsPreview(options) {
+    if (!Array.isArray(options) || options.length === 0)
+        return null;
+    const labels = options
+        .map(optionPreviewLabel)
+        .filter((v) => Boolean(v))
+        .slice(0, 4);
+    if (labels.length === 0)
+        return null;
+    return labels.join(' · ');
+}
+function extractFromRecord(record) {
+    // Prefer human-readable fields; strip HTML when present.
+    for (const key of PREVIEW_TEXT_KEYS) {
+        const value = record[key];
+        if (typeof value !== 'string' || !value.trim())
+            continue;
+        const cleaned = stripHtmlToText(value);
+        if (cleaned)
+            return cleaned;
+    }
+    // Options-only MCQ (empty question stem).
+    const fromOptions = optionsPreview(record.options);
+    if (fromOptions)
+        return fromOptions;
+    // Word bank / labels.
+    if (Array.isArray(record.wordBank)) {
+        const words = record.wordBank
+            .map((w) => {
+            if (typeof w === 'string')
+                return w;
+            const r = asRecord(w);
+            return r ? firstStringOf(r, ['text', 'label', 'word']) : null;
+        })
+            .filter((v) => Boolean(v))
+            .slice(0, 5);
+        if (words.length > 0)
+            return `Từ: ${words.join(', ')}`;
+    }
+    // Crossword clues.
+    const clues = asRecord(record.clues);
+    if (clues) {
+        const across = Array.isArray(clues.across) ? clues.across : [];
+        const firstClue = asRecord(across[0]);
+        const clueText = firstClue ? firstStringOf(firstClue, ['clue']) : null;
+        if (clueText)
+            return clueText;
+    }
+    // Nested group items / subQuestions.
+    const nested = record.items ?? record.subQuestions;
+    if (Array.isArray(nested) && nested.length > 0) {
+        for (const raw of nested) {
+            const item = asRecord(raw);
+            if (!item)
+                continue;
+            const nestedContent = asRecord(item.content) ?? item;
+            const sub = extractFromRecord(nestedContent);
+            if (sub)
+                return sub;
+        }
+    }
+    // meta.instruction (group wrappers).
+    const meta = asRecord(record.meta);
+    if (meta) {
+        const instruction = firstStringOf(meta, ['instruction', 'title']);
+        if (instruction)
+            return stripHtmlToText(instruction);
+    }
+    return null;
+}
+/**
+ * Human-readable preview for bank list rows.
+ * Handles Pearson HTML (`content.content`), group items, options-only MCQ.
+ */
+export function previewText(item) {
+    const content = item.content;
+    if (typeof content === 'string' && content.trim()) {
+        const cleaned = stripHtmlToText(content);
+        if (cleaned)
+            return clampPreview(cleaned);
+    }
+    const record = asRecord(content);
+    if (record) {
+        const extracted = extractFromRecord(record);
+        if (extracted)
+            return clampPreview(extracted);
+    }
+    // Title often embeds exercise name; better than a bare dash.
+    const title = item.title?.trim();
+    if (title)
+        return clampPreview(stripHtmlToText(title), 120);
+    return item.explanation?.trim() || '—';
+}
+/** Prefer content preview over XML-ish titles for the primary row heading. */
+export function primaryDisplayText(item) {
+    const preview = previewText(item);
+    const title = item.title?.trim() ?? '';
+    // Title looks like a source file path → show content instead.
+    if (/\.xml\b/i.test(title) || /exercise-\d+/i.test(title)) {
+        return preview !== '—' ? preview : title;
+    }
+    if (title)
+        return title;
+    return preview;
+}
+function readMetaString(meta, keys) {
+    if (!meta)
+        return null;
+    for (const key of keys) {
+        const value = meta[key];
+        if (typeof value === 'string' && value.trim())
+            return value.trim();
+        if (typeof value === 'number' && Number.isFinite(value))
+            return String(value);
+    }
+    return null;
+}
+/** Pretty exercise label: "01-exercise-1.xml" → "Ex 1". */
+function formatExerciseLabel(assetName) {
+    if (!assetName)
+        return null;
+    const match = assetName.match(/exercise[-_]?(\d+)/i) ??
+        assetName.match(/^0*(\d+)[-_]/);
+    if (match?.[1])
+        return `Ex ${Number(match[1])}`;
+    // Strip .xml extension as fallback.
+    return assetName.replace(/\.xml$/i, '');
+}
+/**
+ * Compact provenance for row footer (right side):
+ * "Unit 0 · 0.3 Favourites · Ex 1"
+ */
+export function provenanceFooterText(item) {
+    const meta = asRecord(item.meta);
+    const unit = readMetaString(meta, ['unitName', 'unitTitle']) ??
+        readMetaString(asRecord(meta?.unit), ['name', 'title']);
+    const lesson = readMetaString(meta, ['lessonName', 'lessonTitle']) ??
+        readMetaString(asRecord(meta?.lesson), ['name', 'title']);
+    const asset = readMetaString(meta, ['assetName', 'assetTitle']) ??
+        readMetaString(asRecord(meta?.asset), ['name', 'title']);
+    const exercise = formatExerciseLabel(asset);
+    const parts = [];
+    if (unit) {
+        // "0" / bare number → "Unit 0"; already labeled names stay as-is.
+        parts.push(/^\d+([.]\d+)?$/.test(unit) ? `Unit ${unit}` : unit);
+    }
+    if (lesson)
+        parts.push(lesson);
+    if (exercise)
+        parts.push(exercise);
+    if (parts.length === 0)
+        return null;
+    return parts.join(' · ');
+}
+/** Sub-item count for group types — shown as “n câu con”. */
+export function subItemCount(item) {
+    const record = asRecord(item.content);
+    if (!record)
+        return null;
+    const items = record.items ?? record.subQuestions;
+    if (Array.isArray(items) && items.length > 1)
+        return items.length;
+    // WORD_FILL blanks counted via {n} placeholders in HTML content.
+    const html = typeof record.content === 'string' ? record.content : '';
+    if (html) {
+        const matches = html.match(/\{\d+\}/g);
+        if (matches && matches.length > 1)
+            return matches.length;
+    }
+    return null;
+}
+/** Detect media attachments to surface image/audio hints on list rows. */
+export function contentMediaFlags(item) {
+    const record = asRecord(item.content);
+    if (!record)
+        return { hasImage: false, hasAudio: false };
+    const topImage = Boolean(firstStringOf(record, ['imageUrl', 'backgroundImageUrl']));
+    const topAudio = Boolean(firstStringOf(record, ['audioUrl']));
+    const meta = asRecord(record.meta);
+    const metaImage = Boolean(meta && firstStringOf(meta, ['imageUrl', 'backgroundImageUrl']));
+    const metaAudio = Boolean(meta && firstStringOf(meta, ['audioUrl']));
+    // Options may be image-based.
+    let optionImage = false;
+    if (Array.isArray(record.options)) {
+        optionImage = record.options.some((opt) => {
+            const r = asRecord(opt);
+            return Boolean(r && firstStringOf(r, ['imageUrl']));
+        });
+    }
+    // Group first item media.
+    let nestedImage = false;
+    let nestedAudio = false;
+    const nested = record.items ?? record.subQuestions;
+    if (Array.isArray(nested) && nested.length > 0) {
+        const first = asRecord(nested[0]);
+        const nestedContent = first ? (asRecord(first.content) ?? first) : null;
+        if (nestedContent) {
+            nestedImage = Boolean(firstStringOf(nestedContent, ['imageUrl', 'backgroundImageUrl']));
+            nestedAudio = Boolean(firstStringOf(nestedContent, ['audioUrl']));
+        }
+    }
+    return {
+        hasImage: topImage || metaImage || optionImage || nestedImage,
+        hasAudio: topAudio || metaAudio || nestedAudio,
+    };
+}
+/** Small inline icons for image/audio presence. */
+export function MediaHints({ item }) {
+    const { hasImage, hasAudio } = contentMediaFlags(item);
+    if (!hasImage && !hasAudio)
+        return null;
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 text-gray-400", children: [hasImage ? _jsx(ImageIcon, { className: "h-3.5 w-3.5" }) : null, hasAudio ? _jsx(Volume2, { className: "h-3.5 w-3.5" }) : null] }));
+}

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

@@ -12,10 +12,10 @@ import { RadioGroup } from '../../../../components/ui/radio-group';
 import { Switch } from '../../../../components/ui/switch';
 import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
-import { Pencil, Eye, Plus, Trash2, HelpCircle, CheckCircle2, Lightbulb, MessageSquare, ImageIcon, Type, Users, BookOpen, Star, ListChecks } from 'lucide-react';
+import { Pencil, Eye, Plus, Trash2, HelpCircle, CheckCircle2, Lightbulb, MessageSquare, ImageIcon, Type, Users, BookOpen, Star, ListChecks, Pilcrow } from 'lucide-react';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
-import { isRichTextEmpty } from '../../../../shared/lib/rich-text';
+import { hasRichTextFormatting, htmlToPlainEditorText, isRichTextEmpty } from '../../../../shared/lib/rich-text';
 import { ChooseTheCorrectAnswerClient } from './ChooseTheCorrectAnswerClient';
 import { normalizeChooseAnswerCorrectAnswer, normalizeChooseAnswerOptions, pickRawChooseAnswer, } from './normalize';
 import { chooseCorrectAnswerFormSchema, } from '../../../../shared/lib/validation/choose-correct-answer.validation';
@@ -24,6 +24,24 @@ import { ArticlesGroupCard } from '../../groups/ArticlesGroupCard';
 import { DocumentGroupCard } from '../../groups/DocumentGroupCard';
 import { useBasicQuestionGroup } from '../../_shared/hooks/useBasicQuestionGroup';
 import { z } from 'zod';
+function shouldStartInTipTapMode(apiData) {
+    const question = apiData?.content?.question || apiData?.question || '';
+    if (hasRichTextFormatting(question))
+        return true;
+    const rawOptions = apiData?.content?.options || apiData?.options;
+    if (!Array.isArray(rawOptions))
+        return false;
+    return rawOptions.some((option) => hasRichTextFormatting(typeof option === 'string' ? option : option?.text));
+}
+function ChooseAnswerTextInput({ value, onChange, isTipTapMode, placeholder, compact = false, }) {
+    if (isTipTapMode) {
+        return (_jsx(RichTextEditor, { value: value, onChange: onChange, variant: "compact", minHeightClassName: compact ? 'min-h-[72px]' : 'min-h-[100px]' }));
+    }
+    if (compact) {
+        return (_jsx(Input, { value: htmlToPlainEditorText(value), onChange: (event) => onChange(event.target.value), placeholder: placeholder, className: "border-gray-200 bg-white" }));
+    }
+    return (_jsx(Textarea, { value: htmlToPlainEditorText(value), onChange: (event) => onChange(event.target.value), placeholder: placeholder, rows: 3, className: "min-h-[72px] border-gray-200 bg-white" }));
+}
 // Helper component to resolve presigned URL for option image preview (same pattern as Client's OptionImage)
 function OptionImagePreview({ src, alt }) {
     const { previewUrl, isLoading } = usePresignedFileUrl(src);
@@ -115,6 +133,9 @@ function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, o
     const [isClientMode, setIsClientMode] = useState(false);
     const [imagePreviewUrl, setImagePreviewUrl] = useState('');
     const [optionPreviewUrls, setOptionPreviewUrls] = useState({});
+    const [isImageInputVisible, setIsImageInputVisible] = useState(() => Boolean(apiData?.content?.imageUrl || apiData?.imageUrl));
+    const [isTipTapMode, setIsTipTapMode] = useState(() => shouldStartInTipTapMode(apiData));
+    const [isExplanationVisible, setIsExplanationVisible] = useState(() => Boolean(apiData?.explanation));
     // ============ GROUP (shared title / content / image) ============
     const { isGrouped, currentGroupNumber, isFirstInGroup, groupTitle, groupSubtitle, groupContent, imageUrl: groupImageUrl, articles, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl: setGroupImageUrl, setArticles, } = useBasicQuestionGroup({
         partId,
@@ -426,9 +447,12 @@ function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, o
                                                     form.setValue('correctAnswer', enabled ? normalized : (normalized[0] ?? -1), { shouldValidate: true });
                                                 }, className: `inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${watchedMultipleAnswers
                                                     ? 'border-violet-300 bg-violet-50 text-violet-700'
-                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'} ${Boolean(multipleAnswers) ? 'cursor-not-allowed opacity-50' : ''}`, children: [_jsx(ListChecks, { className: "h-4 w-4" }), "Nhi\u1EC1u \u0111\u00E1p \u00E1n"] })] })] }), viewMode === 'CONVERSATION' && (_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Users, { className: "h-4 w-4 text-indigo-500" }), "H\u1ED9i tho\u1EA1i ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn - d\u00F9ng cho c\u00E2u h\u1ECFi d\u1EA1ng h\u1ED9i tho\u1EA1i)" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "askerName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "askerName", ...form.register('askerName'), placeholder: "VD: John, Mary, Teacher...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('askerName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('askerName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('askerName') }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "answererName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "answererName", ...form.register('answererName'), placeholder: "VD: Tom, Anna, Student...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('answererName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('answererName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('answererName') }))] })] })] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('question')) && (_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-indigo-500" }), _jsx("span", { className: "flex items-center gap-1", children: "C\u00E2u h\u1ECFi" }), _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(RichTextEditor, { value: watchedQuestion, onChange: (html) => form.setValue('question', html, { shouldValidate: true }), variant: "compact", minHeightClassName: "min-h-[100px]" }), form.hasError('question') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('question') }))] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-sm font-normal text-gray-500" })] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: watchedImageUrl || '', onChange: (url) => {
+                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'} ${Boolean(multipleAnswers) ? 'cursor-not-allowed opacity-50' : ''}`, children: [_jsx(ListChecks, { className: "h-4 w-4" }), "Nhi\u1EC1u \u0111\u00E1p \u00E1n"] }), _jsxs("button", { type: "button", style: { paddingBlock: 'calc(var(--spacing) * 1)' }, onClick: () => setIsTipTapMode((enabled) => !enabled), title: isTipTapMode ? 'Chuyển về ô nhập thường' : 'Bật định dạng chữ (in đậm, danh sách, bảng)', className: `inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${isTipTapMode
+                                                    ? 'border-indigo-300 bg-indigo-50 text-indigo-700'
+                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Pilcrow, { className: "h-4 w-4" }), "\u0110\u1ECBnh d\u1EA1ng"] })] })] }), viewMode === 'CONVERSATION' && (_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Users, { className: "h-4 w-4 text-indigo-500" }), "H\u1ED9i tho\u1EA1i ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn - d\u00F9ng cho c\u00E2u h\u1ECFi d\u1EA1ng h\u1ED9i tho\u1EA1i)" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "askerName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "askerName", ...form.register('askerName'), placeholder: "VD: John, Mary, Teacher...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('askerName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('askerName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('askerName') }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "answererName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "answererName", ...form.register('answererName'), placeholder: "VD: Tom, Anna, Student...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('answererName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('answererName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('answererName') }))] })] })] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('question')) && (_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-indigo-500" }), _jsx("span", { className: "flex items-center gap-1", children: "C\u00E2u h\u1ECFi" }), _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(ChooseAnswerTextInput, { value: watchedQuestion, onChange: (html) => form.setValue('question', html, { shouldValidate: true }), isTipTapMode: isTipTapMode, placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi..." }), form.hasError('question') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('question') }))] })), ((!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && !isImageInputVisible
+                                || !isExplanationVisible) && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [(!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && !isImageInputVisible && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsImageInputVisible(true), className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(ImageIcon, { className: "h-4 w-4" }), watchedImageUrl ? 'Hiện hình ảnh' : 'Thêm hình ảnh'] })), !isExplanationVisible && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsExplanationVisible(true), className: "gap-2 border-amber-200 text-amber-700 hover:bg-amber-50 hover:text-amber-800", children: [_jsx(BookOpen, { className: "h-4 w-4" }), watchedExplanation ? 'Hiện giải thích' : 'Thêm giải thích'] }))] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && isImageInputVisible && (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh"] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setIsImageInputVisible(false), className: "h-8 text-gray-500 hover:text-gray-700", children: "\u1EA8n" })] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: watchedImageUrl || '', onChange: (url) => {
                                             form.setValue('imageUrl', url, { shouldValidate: true });
-                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), form.hasError('imageUrl') && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: form.getFieldError('imageUrl') })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), 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))) })] })] })), form.formState.errors.options?.message && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: form.formState.errors.options.message }) }))] })] }), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('options')) && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-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-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", watchedOptions.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5", children: [_jsx(Type, { className: `h-3.5 w-3.5 ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}`, children: "Text" }), _jsx(Switch, { checked: watchedOptionType === 'image', disabled: true, className: watchedOptionType === 'image' ? '!bg-indigo-600 !opacity-100' : '!bg-indigo-600 !opacity-100', onCheckedChange: (checked) => {
+                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), form.hasError('imageUrl') && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: form.getFieldError('imageUrl') })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), isExplanationVisible && (_jsxs("div", { className: "relative", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setIsExplanationVisible(false), className: "absolute right-3 top-3 z-10 h-8 text-gray-500 hover:text-gray-700", children: "\u1EA8n" }), _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 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] resize-none border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" }) })] })] })), 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))) })] })] })), form.formState.errors.options?.message && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: form.formState.errors.options.message }) }))] })] }), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('options')) && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-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-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", watchedOptions.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5", children: [_jsx(Type, { className: `h-3.5 w-3.5 ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}`, children: "Text" }), _jsx(Switch, { checked: watchedOptionType === 'image', disabled: true, className: watchedOptionType === 'image' ? '!bg-indigo-600 !opacity-100' : '!bg-indigo-600 !opacity-100', onCheckedChange: (checked) => {
                                                         const newType = checked ? 'image' : 'text';
                                                         const currentOptions = form.getValues('options');
                                                         const currentCorrectAnswer = form.getValues('correctAnswer');
@@ -492,11 +516,11 @@ function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, o
                                                                         setOptionPreviewUrls((prev) => ({ ...prev, [index]: presignedUrl }));
                                                                     }, maxSize: 5, placeholder: `Upload ảnh đáp án ${optionLetter}...`, autoUpload: true, prefix: "questions/options" }), (optionPreviewUrls[index] || option) && (_jsx(OptionImagePreview, { src: optionPreviewUrls[index] || option, alt: `Đáp án ${optionLetter}` }))] })) : (
                                                         /* Text Input Mode */
-                                                        _jsx(RichTextEditor, { value: option, onChange: (html) => {
+                                                        _jsx(ChooseAnswerTextInput, { value: option, onChange: (html) => {
                                                                 const newOptions = [...watchedOptions];
                                                                 newOptions[index] = html;
                                                                 form.setValue('options', newOptions, { shouldValidate: true });
-                                                            }, variant: "compact", minHeightClassName: "min-h-[72px]" })), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), watchedMultipleAnswers ? 'Đáp án đúng đã chọn' : 'Đáp án đúng'] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                                                            }, isTipTapMode: isTipTapMode, compact: true, placeholder: `Nhập đáp án ${optionLetter}...` })), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), watchedMultipleAnswers ? 'Đáp án đúng đã chọn' : 'Đáp án đúng'] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
                                                                 if (watchedMultipleAnswers) {
                                                                     const currentAnswers = Array.isArray(form.getValues('correctAnswer'))
                                                                         ? form.getValues('correctAnswer')
@@ -551,11 +575,11 @@ function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, o
                                                                         setOptionPreviewUrls((prev) => ({ ...prev, [index]: presignedUrl }));
                                                                     }, maxSize: 5, placeholder: `Upload ảnh đáp án ${optionLetter}...`, autoUpload: true, prefix: "questions/options" }), (optionPreviewUrls[index] || option) && (_jsx(OptionImagePreview, { src: optionPreviewUrls[index] || option, alt: `Đáp án ${optionLetter}` }))] })) : (
                                                         /* Text Input Mode */
-                                                        _jsx(RichTextEditor, { value: option, onChange: (html) => {
+                                                        _jsx(ChooseAnswerTextInput, { value: option, onChange: (html) => {
                                                                 const newOptions = [...watchedOptions];
                                                                 newOptions[index] = html;
                                                                 form.setValue('options', newOptions, { shouldValidate: true });
-                                                            }, variant: "compact", minHeightClassName: "min-h-[72px]" })), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                                                            }, isTipTapMode: isTipTapMode, compact: true, placeholder: `Nhập đáp án ${optionLetter}...` })), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
                                                                 form.setValue('correctAnswer', index, { shouldValidate: true });
                                                             }, className: isCorrect ? 'text-green-600 hover:text-green-700' : 'text-gray-400 hover:text-green-600', title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: _jsx(CheckCircle2, { className: "h-4 w-4" }) }), watchedOptions.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
                                                                 const currentOptions = form.getValues('options');
@@ -573,7 +597,7 @@ function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, o
                                 }) })), ((Array.isArray(watchedCorrectAnswer) && watchedCorrectAnswer.length === 0)
                                 || (!Array.isArray(watchedCorrectAnswer) && watchedCorrectAnswer === -1)) && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-amber-700", children: watchedMultipleAnswers
                                                     ? 'Click vào ô chữ cái hoặc icon ✓ để chọn một hoặc nhiều đáp án đúng'
-                                                    : 'Click vào ô chữ cái hoặc icon ✓ để chọn đáp án đúng' })] })] })), form.hasError('correctAnswer') && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('correctAnswer') }) }))] })] })), _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 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, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+                                                    : 'Click vào ô chữ cái hoặc icon ✓ để chọn đáp án đúng' })] })] })), form.hasError('correctAnswer') && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('correctAnswer') }) }))] })] }))] }));
 }
 export function ChooseTheCorrectAnswerCreator(props) {
     return _jsx(ChooseTheCorrectAnswerCreatorContent, { ...props });

package/dist/components/questions/types/fill-in-blank/FillInBlankClient.js

@@ -3,6 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect, useMemo } from 'react';
 import { Input } from '../../../../components/ui/input';
 import { Check, X, PenLine, AlertTriangle, ClipboardList, Lightbulb, BookOpen, Hash, Volume2, } from 'lucide-react';
+import { ImageLabelWordBank } from '../../groups/ImageLabelWordBank';
+import { hasImageLabels } from '../../_shared/types/question-group.type';
 import { extractPlaceholderIndices, formatBlankAnswersDisplay, getPrimaryBlankAnswer, isBlankInputCorrect, normalizeBlankAnswers, normalizeFillInBlankAnswers, } from './answer-utils';
 import { parseFillBlankSegments } from '../../../../shared/lib/utils/fill-in-blank';
 import { cn } from '../../../../shared/lib/utils';
@@ -31,7 +33,9 @@ export function FillInBlankClient({ questionData, questionConfig, onSubmit, isRe
     const groupContent = questionData.groupContent || '';
     const groupImageUrl = questionData.groupImageUrl || '';
     const groupNumber = questionData.groupNumber;
-    const hasGroupData = isGroup && (groupTitle || groupContent || groupImageUrl);
+    const imageLabels = questionData.imageLabels;
+    const hasImageLabelBank = hasImageLabels(imageLabels);
+    const hasGroupData = isGroup && (groupTitle || groupContent || groupImageUrl || hasImageLabelBank);
     // Custom hooks for presigned URL (question-level image, not group image)
     const { previewUrl: imagePreviewUrl, isLoading: isImageLoading } = usePresignedFileUrl(
     // Only use question-level imageUrl when NOT grouped (group image is handled separately)
@@ -128,7 +132,7 @@ export function FillInBlankClient({ questionData, questionConfig, onSubmit, isRe
     const renderGroupBlock = () => {
         if (!hasGroupData)
             return null;
-        return (_jsxs("div", { className: "relative overflow-hidden rounded-2xl border border-indigo-100 bg-white shadow-sm ring-1 ring-black/5 transition-all", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-blue-50/30 opacity-70 pointer-events-none" }), _jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1.5 bg-gradient-to-b from-indigo-500 to-blue-600 rounded-l-2xl" }), _jsxs("div", { className: "relative p-6 sm:p-7", children: [_jsxs("div", { className: "flex items-start gap-4 mb-5 border-b border-indigo-50/60 pb-4", children: [_jsx("div", { className: "flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-100 to-blue-100 shadow-inner ring-1 ring-indigo-200/50", children: _jsx(BookOpen, { className: "h-5 w-5 text-indigo-600" }) }), _jsxs("div", { className: "flex-1 pt-1", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [groupNumber && (_jsxs("span", { className: "inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-700/10", children: ["Nh\u00F3m ", groupNumber] })), _jsx("span", { className: "inline-flex items-center rounded-md bg-orange-50 px-2 py-1 text-xs font-semibold text-orange-700 ring-1 ring-inset ring-orange-700/10", children: "\u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng" })] }), groupTitle && (_jsx("h4", { className: "text-xl font-bold text-slate-800 leading-tight tracking-tight", children: groupTitle }))] })] }), _jsxs("div", { className: "space-y-6 text-slate-700", children: [groupContent && (_jsx("div", { className: "prose prose-slate prose-p:leading-relaxed prose-p:mb-3 max-w-none text-[15px]", children: groupContent.split('\n').map((line, i) => (_jsx("p", { className: "last:mb-0", children: line }, i))) })), groupImageUrl && (_jsxs("div", { className: "mt-5 relative overflow-hidden rounded-xl border border-slate-200/60 bg-slate-50 shadow-sm transition-all hover:shadow-md", children: [_jsx("div", { className: "flex items-center justify-between border-b border-slate-200/60 bg-slate-100/50 px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("span", { className: "ml-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500", children: "T\u00E0i li\u1EC7u \u0111\u00EDnh k\u00E8m" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4 min-h-[160px]", children: _jsx(GroupImage, { src: groupImageUrl, alt: groupTitle || 'Hình ảnh nhóm' }) })] }))] })] })] }));
+        return (_jsxs("div", { className: "relative overflow-hidden rounded-2xl border border-indigo-100 bg-white shadow-sm ring-1 ring-black/5 transition-all", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-blue-50/30 opacity-70 pointer-events-none" }), _jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1.5 bg-gradient-to-b from-indigo-500 to-blue-600 rounded-l-2xl" }), _jsxs("div", { className: "relative p-6 sm:p-7", children: [_jsxs("div", { className: "flex items-start gap-4 mb-5 border-b border-indigo-50/60 pb-4", children: [_jsx("div", { className: "flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-100 to-blue-100 shadow-inner ring-1 ring-indigo-200/50", children: _jsx(BookOpen, { className: "h-5 w-5 text-indigo-600" }) }), _jsxs("div", { className: "flex-1 pt-1", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [groupNumber && (_jsxs("span", { className: "inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-700/10", children: ["Nh\u00F3m ", groupNumber] })), _jsx("span", { className: "inline-flex items-center rounded-md bg-orange-50 px-2 py-1 text-xs font-semibold text-orange-700 ring-1 ring-inset ring-orange-700/10", children: "\u0110i\u1EC1n v\u00E0o ch\u1ED7 tr\u1ED1ng" })] }), groupTitle && (_jsx("h4", { className: "text-xl font-bold text-slate-800 leading-tight tracking-tight", children: groupTitle }))] })] }), _jsxs("div", { className: "space-y-6 text-slate-700", children: [hasImageLabelBank && (_jsx(ImageLabelWordBank, { items: imageLabels })), groupContent && (_jsx("div", { className: "prose prose-slate prose-p:leading-relaxed prose-p:mb-3 max-w-none text-[15px]", children: groupContent.split('\n').map((line, i) => (_jsx("p", { className: "last:mb-0", children: line }, i))) })), groupImageUrl && (_jsxs("div", { className: "mt-5 relative overflow-hidden rounded-xl border border-slate-200/60 bg-slate-50 shadow-sm transition-all hover:shadow-md", children: [_jsx("div", { className: "flex items-center justify-between border-b border-slate-200/60 bg-slate-100/50 px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("span", { className: "ml-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500", children: "T\u00E0i li\u1EC7u \u0111\u00EDnh k\u00E8m" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4 min-h-[160px]", children: _jsx(GroupImage, { src: groupImageUrl, alt: groupTitle || 'Hình ảnh nhóm' }) })] }))] })] })] }));
     };
     /** Render inline blanks within question text (new format) */
     const renderQuestionWithBlanks = () => {