@tinyweb_dev/oe-exam-sdk 1.0.0 → 1.0.1

package/dist/components/exams/take/index.js

@@ -1,5 +1,10 @@
 export { ExamTakingPageContainer } from './ExamTakingPageContainer';
 export { GenericQuestionRenderer } from './GenericQuestionRenderer';
+/** Per-type dispatcher used by ExamTakingPageContainer and host lite flows (BTVN). */
+export { QuestionRenderer } from './components/QuestionRenderer';
+export { groupQuestionsByPart } from './utils/question-transformers';
+/** Normalize UI answer map → API answer payloads (option index wrap, group composites). */
+export { transformAnswersForSubmission } from './utils/answer-transformers';
 export { useExamCountdown } from './hooks/useExamCountdown';
 export { useAnswerAutosave } from './hooks/useAnswerAutosave';
 export { useProctoringSnapshot } from './hooks/useProctoringSnapshot';

package/dist/components/exams/take/utils/question-transformers.d.ts

@@ -63,6 +63,7 @@ export interface QuestionPart {
     /** Zero-based exam-order start index of this part/section (for question numbering). */
     startIndex?: number;
     endIndex?: number;
+    suggestedAnswers?: string[];
 }
 /** Nested template group payload ({ items, config, type }) from the API template. */
 export interface TemplateGroupConfig {
@@ -108,6 +109,7 @@ export interface TemplatePart {
     category?: string;
     /** Max points for this part from exams.template.parts */
     points?: number;
+    suggestedAnswers?: string[];
 }
 /**
  * Group questions by part_id AND questionGroup.id
@@ -122,7 +124,9 @@ export interface TemplatePart {
  * @param templateParts - Optional template parts with name/instructions metadata
  */
 export declare function groupQuestionsByPart(questions: ApiQuestion[], templateParts?: TemplatePart[]): QuestionPart[];
-export declare function transformFillInBlank(questions: ApiQuestion[]): {
+export declare function transformFillInBlank(questions: ApiQuestion[], options?: {
+    suggestedAnswers?: string[];
+}): {
     questions: FillBlankQuestion[];
     title: string;
     imageUrl?: string;
@@ -134,6 +138,10 @@ export declare function transformFillInBlank(questions: ApiQuestion[]): {
     groupContent?: string;
     groupTitle?: string;
     groupImageUrl?: string;
+    imageLabels?: Array<{
+        imageUrl: string;
+        label: string;
+    }>;
 };
 export declare function transformWriteCorrectVerbForm(questions: ApiQuestion[]): {
     questions: FillBlankQuestion[];

package/dist/components/exams/take/utils/question-transformers.js

@@ -41,7 +41,9 @@ export function groupQuestionsByPart(questions, templateParts) {
         // a single screen with the passage on the left and ALL questions on the
         // right — so keep it whole and pass the sections through for the renderer.
         const partLevelGroup = templatePart?.group;
-        const hasDocumentGroup = Boolean(templatePart?.isGroup) && partLevelGroup?.type === 'DOCUMENT';
+        const sharedGroupType = String(partLevelGroup?.type || '').toUpperCase();
+        const hasDocumentGroup = Boolean(templatePart?.isGroup) &&
+            (sharedGroupType === 'DOCUMENT' || sharedGroupType === 'IMAGE_LABEL' || sharedGroupType === 'ARTICLES');
         // Mixed multi-section part (e.g. Listening SECTION 2: CHOOSE + MATCH +
         // WORD_FILL): keep it whole and pass the sections through so the grouped
         // renderer can stack each sub-section on one screen. Without this the part
@@ -68,6 +70,7 @@ export function groupQuestionsByPart(questions, templateParts) {
                 sections: templatePart?.sections,
                 startIndex: templatePart?.startIndex,
                 endIndex: templatePart?.endIndex,
+                suggestedAnswers: templatePart?.suggestedAnswers,
             });
             continue;
         }
@@ -96,6 +99,7 @@ export function groupQuestionsByPart(questions, templateParts) {
                 group: templatePart?.group,
                 startIndex: templatePart?.startIndex,
                 endIndex: templatePart?.endIndex,
+                suggestedAnswers: templatePart?.suggestedAnswers,
             });
             continue;
         }
@@ -138,6 +142,7 @@ export function groupQuestionsByPart(questions, templateParts) {
                 group: section.group,
                 startIndex: section.startIndex,
                 endIndex: section.endIndex,
+                suggestedAnswers: section.suggestedAnswers ?? templatePart?.suggestedAnswers,
             });
         }
     }
@@ -150,7 +155,42 @@ export function groupQuestionsByPart(questions, templateParts) {
         return (a.questions[0]?.question_number || 0) - (b.questions[0]?.question_number || 0);
     });
 }
-export function transformFillInBlank(questions) {
+// ============================================
+// FILL_IN_BLANK Transformer
+// ============================================
+function asImageLabelItems(value) {
+    if (!Array.isArray(value))
+        return undefined;
+    const items = value
+        .map((item) => {
+        if (!item || typeof item !== 'object')
+            return null;
+        const imageUrl = String(item.imageUrl ?? '').trim();
+        const label = String(item.label ?? '').trim();
+        if (!imageUrl && !label)
+            return null;
+        return { imageUrl, label };
+    })
+        .filter((item) => item !== null);
+    return items.length > 0 ? items : undefined;
+}
+function collectFillInBlankImageLabels(questions, suggestedAnswers) {
+    for (const question of questions) {
+        const payload = question.questionGroup?.payload ||
+            question.question_group?.payload;
+        const fromGroup = asImageLabelItems(payload?.imageLabels);
+        if (fromGroup)
+            return fromGroup;
+        const fromContent = asImageLabelItems(question.content?.imageLabels);
+        if (fromContent)
+            return fromContent;
+    }
+    if (suggestedAnswers?.length) {
+        return suggestedAnswers.map((label) => ({ imageUrl: '', label: String(label) }));
+    }
+    return undefined;
+}
+export function transformFillInBlank(questions, options) {
     const firstQuestion = questions[0];
     const content = firstQuestion?.content;
     const groupPayload = firstQuestion?.questionGroup?.payload;
@@ -187,6 +227,7 @@ export function transformFillInBlank(questions) {
         groupContent: groupPayload?.content || groupPayload?.groupContent,
         groupTitle: groupPayload?.title,
         groupImageUrl: groupPayload?.mainImageUrl || groupPayload?.imageUrl,
+        imageLabels: collectFillInBlankImageLabels(questions, options?.suggestedAnswers),
     };
 }
 export function transformWriteCorrectVerbForm(questions) {
@@ -1199,6 +1240,20 @@ function normalizeWfsfWordBank(raw) {
 export function transformWordFillStructuredForm(questions) {
     const firstQuestion = questions[0];
     const groupPayload = firstQuestion?.questionGroup?.payload;
+    const firstContent = firstQuestion?.content;
+    const firstMetaRaw = firstQuestion?.meta;
+    const firstMeta = firstMetaRaw &&
+        typeof firstMetaRaw === 'object' &&
+        !Array.isArray(firstMetaRaw)
+        ? firstMetaRaw
+        : undefined;
+    // Bank: meta.instruction; school: content.instruction; exam group: payload.instructions.
+    const topLevelInstruction = typeof firstQuestion?.instruction === 'string'
+        ? String(firstQuestion.instruction).trim()
+        : '';
+    const metaInstruction = String(firstMeta?.instruction || '').trim();
+    const contentInstruction = String(firstContent?.instruction || firstContent?.instructions || '').trim();
+    const groupInstruction = String(groupPayload?.instructions || groupPayload?.instruction || '').trim();
     const transformed = questions.map((q) => {
         const content = q.content;
         const correctAnswer = q.correct_answer || {};
@@ -1218,11 +1273,16 @@ export function transformWordFillStructuredForm(questions) {
         const hasWords = Boolean(wordBank?.some((e) => e != null && 'word' in e && e.word));
         const viewMode = content?.viewMode ||
             (hasOptions ? 'WITH_OPTIONS' : hasWords ? 'WITH_WORD_BANK' : undefined);
+        // Empty string imageUrl breaks ResolvedImage in some hosts — treat as absent.
+        const imageUrlRaw = content?.imageUrl;
+        const imageUrl = typeof imageUrlRaw === 'string' && imageUrlRaw.trim().length > 0
+            ? imageUrlRaw.trim()
+            : undefined;
         return {
             id: q.id,
             questionNumber: q.question_number,
             title: content?.title || '',
-            imageUrl: content?.imageUrl,
+            imageUrl,
             content: resolvedContent,
             answers: correctAnswer?.answers || {},
             caseSensitive: correctAnswer?.caseSensitive ?? content?.caseSensitive ?? false,
@@ -1233,7 +1293,11 @@ export function transformWordFillStructuredForm(questions) {
     });
     return {
         questions: transformed,
-        instruction: groupPayload?.instructions || 'COMPLETE THE FORM BELOW',
+        instruction: groupInstruction ||
+            contentInstruction ||
+            topLevelInstruction ||
+            metaInstruction ||
+            'COMPLETE THE FORM BELOW',
         groupTitle: groupPayload?.title,
         groupContent: groupPayload?.content,
         groupImageUrl: groupPayload?.imageUrl,

package/dist/components/questions/_shared/hooks/useBasicQuestionGroup.d.ts

@@ -1,4 +1,4 @@
-import type { QuestionGroupConfig, BasicGroupData, ArticleData } from '../types/question-group.type';
+import type { QuestionGroupConfig, BasicGroupData, ArticleData, ImageLabelData } from '../types/question-group.type';
 /**
  * Derives which group number a question at `questionIndexInPart` belongs to,
  * given the part's group configuration array.
@@ -23,6 +23,8 @@ export interface UseBasicQuestionGroupOptions {
     initialData?: BasicGroupData;
     /** Number of articles for ARTICLES group type (creates empty articles array when > 0) */
     articleCount?: number;
+    /** Number of image+label items for IMAGE_LABEL group type */
+    imageLabelCount?: number;
 }
 export interface UseBasicQuestionGroupReturn {
     /** Is this question part of a group (i.e. groups array is non-empty)? */
@@ -36,11 +38,13 @@ export interface UseBasicQuestionGroupReturn {
     groupContent: string;
     imageUrl: string;
     articles: ArticleData[];
+    imageLabels: ImageLabelData[];
     setGroupTitle: (value: string) => void;
     setGroupSubtitle: (value: string) => void;
     setGroupContent: (value: string) => void;
     setImageUrl: (value: string) => void;
     setArticles: (articles: ArticleData[]) => void;
+    setImageLabels: (imageLabels: ImageLabelData[]) => void;
 }
 /**
  * `useBasicQuestionGroup`
@@ -53,4 +57,4 @@ export interface UseBasicQuestionGroupReturn {
  * the same group), falls back to `initialData`, and writes every change back to
  * the store so sibling questions instantly see the updated values.
  */
-export declare function useBasicQuestionGroup({ partId, groups, questionIndexInPart, initialData, articleCount, }: UseBasicQuestionGroupOptions): UseBasicQuestionGroupReturn;
+export declare function useBasicQuestionGroup({ partId, groups, questionIndexInPart, initialData, articleCount, imageLabelCount, }: UseBasicQuestionGroupOptions): UseBasicQuestionGroupReturn;

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

@@ -54,7 +54,7 @@ export function getIsFirstInGroup(questionIndexInPart, groups) {
  * the same group), falls back to `initialData`, and writes every change back to
  * the store so sibling questions instantly see the updated values.
  */
-export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, initialData, articleCount = 0, }) {
+export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, initialData, articleCount = 0, imageLabelCount = 0, }) {
     const setSharedPassageData = useExamQuestionStore((s) => s.setSharedPassageData);
     const getSharedPassageData = useExamQuestionStore((s) => s.getSharedPassageData);
     const isGrouped = Boolean(groups && groups.length > 0);
@@ -67,6 +67,9 @@ export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, ini
     const defaultArticles = articleCount > 0
         ? Array.from({ length: articleCount }, () => ({ name: '', content: '', imageUrl: '' }))
         : [];
+    const defaultImageLabels = imageLabelCount > 0
+        ? Array.from({ length: imageLabelCount }, () => ({ imageUrl: '', label: '' }))
+        : [];
     const resolveInitial = () => {
         if (isGrouped && partId) {
             const stored = getSharedPassageData(partId, currentGroupNumber);
@@ -77,6 +80,7 @@ export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, ini
                     content: stored.groupContent ?? stored.passage ?? initialData?.content ?? '',
                     imageUrl: stored.imageUrl ?? initialData?.imageUrl ?? '',
                     articles: stored.articles ?? initialData?.articles ?? defaultArticles,
+                    imageLabels: stored.imageLabels ?? initialData?.imageLabels ?? defaultImageLabels,
                 };
             }
         }
@@ -86,6 +90,7 @@ export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, ini
             content: initialData?.content ?? '',
             imageUrl: initialData?.imageUrl ?? '',
             articles: initialData?.articles ?? defaultArticles,
+            imageLabels: initialData?.imageLabels ?? defaultImageLabels,
         };
     };
     const initial = resolveInitial();
@@ -94,6 +99,7 @@ export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, ini
     const [groupContent, setGroupContentState] = useState(initial.content ?? '');
     const [imageUrl, setImageUrlState] = useState(initial.imageUrl ?? '');
     const [articles, setArticlesState] = useState(initial.articles ?? defaultArticles);
+    const [imageLabels, setImageLabelsState] = useState(initial.imageLabels ?? defaultImageLabels);
     // Track the last rendered group number so we can re-sync when navigating
     const prevGroupNumberRef = useRef(currentGroupNumber);
     // Track whether we have already seeded from initialData for the current group
@@ -121,7 +127,8 @@ export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, ini
         const newContent = initialData.content || null;
         const newImage = initialData.imageUrl || null;
         const newArticles = initialData.articles || null;
-        if (newTitle === null && newSubtitle === null && newContent === null && newImage === null && newArticles === null)
+        const newImageLabels = initialData.imageLabels || null;
+        if (newTitle === null && newSubtitle === null && newContent === null && newImage === null && newArticles === null && newImageLabels === null)
             return;
         if (newTitle !== null)
             setGroupTitleState(newTitle);
@@ -133,6 +140,8 @@ export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, ini
             setImageUrlState(newImage);
         if (newArticles !== null)
             setArticlesState(newArticles);
+        if (newImageLabels !== null)
+            setImageLabelsState(newImageLabels);
         setSharedPassageData(partId, currentGroupNumber, {
             passageTitle: newTitle ?? '',
             passageSubtitle: newSubtitle ?? '',
@@ -140,6 +149,7 @@ export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, ini
             passage: newContent ?? '',
             imageUrl: newImage ?? '',
             articles: newArticles ?? defaultArticles,
+            imageLabels: newImageLabels ?? defaultImageLabels,
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [initialData, partId, currentGroupNumber, isGrouped]);
@@ -153,12 +163,13 @@ export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, ini
         if (!isGrouped || !partId)
             return;
         const stored = getSharedPassageData(partId, currentGroupNumber);
-        if (stored && (stored.passageTitle || stored.passageSubtitle || stored.groupContent || stored.passage || stored.imageUrl || stored.articles)) {
+        if (stored && (stored.passageTitle || stored.passageSubtitle || stored.groupContent || stored.passage || stored.imageUrl || stored.articles || stored.imageLabels)) {
             setGroupTitleState(stored.passageTitle ?? '');
             setGroupSubtitleState(stored.passageSubtitle ?? '');
             setGroupContentState(stored.groupContent ?? stored.passage ?? '');
             setImageUrlState(stored.imageUrl ?? '');
             setArticlesState(stored.articles ?? defaultArticles);
+            setImageLabelsState(stored.imageLabels ?? defaultImageLabels);
         }
         else {
             setGroupTitleState(initialData?.title ?? '');
@@ -166,22 +177,26 @@ export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, ini
             setGroupContentState(initialData?.content ?? '');
             setImageUrlState(initialData?.imageUrl ?? '');
             setArticlesState(initialData?.articles ?? defaultArticles);
+            setImageLabelsState(initialData?.imageLabels ?? defaultImageLabels);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentGroupNumber, partId, isGrouped]);
     // ------------------------------------------------------------------
     // Helpers: write state + persist to store
     // ------------------------------------------------------------------
-    const persistToStore = (title, subtitle, content, image, arts) => {
+    const persistToStore = (title, subtitle, content, image, arts, labels) => {
         if (!isGrouped || !partId)
             return;
+        const existing = getSharedPassageData(partId, currentGroupNumber);
         setSharedPassageData(partId, currentGroupNumber, {
+            ...existing,
             passageTitle: title,
             passageSubtitle: subtitle,
             groupContent: content,
             passage: content,
             imageUrl: image,
             articles: arts ?? articles,
+            imageLabels: labels ?? imageLabels,
         });
     };
     const setGroupTitle = (value) => {
@@ -202,7 +217,11 @@ export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, ini
     };
     const setArticles = (value) => {
         setArticlesState(value);
-        persistToStore(groupTitle, groupSubtitle, groupContent, imageUrl, value);
+        persistToStore(groupTitle, groupSubtitle, groupContent, imageUrl, value, imageLabels);
+    };
+    const setImageLabels = (value) => {
+        setImageLabelsState(value);
+        persistToStore(groupTitle, groupSubtitle, groupContent, imageUrl, articles, value);
     };
     return {
         isGrouped,
@@ -213,10 +232,12 @@ export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, ini
         groupContent,
         imageUrl,
         articles,
+        imageLabels,
         setGroupTitle,
         setGroupSubtitle,
         setGroupContent,
         setImageUrl,
         setArticles,
+        setImageLabels,
     };
 }

package/dist/components/questions/_shared/types/fill-in-blank.type.d.ts

@@ -40,6 +40,11 @@ export interface FillInBlankData {
     groupImageUrl?: string;
     groupNumber?: number;
     groups?: FillInBlankGroup[];
+    /** Picture + label bank when groupType === "IMAGE_LABEL" */
+    imageLabels?: Array<{
+        imageUrl: string;
+        label: string;
+    }>;
     blanks?: BlankItem[];
 }
 export interface FillInBlankCreatorProps {
@@ -55,6 +60,10 @@ export interface FillInBlankCreatorProps {
     partId?: string;
     /** Template questionConfig — controls which fields are shown (e.g. "audio") */
     questionConfig?: string[];
+    /** Template group.type (e.g. IMAGE_LABEL) */
+    groupType?: string;
+    /** Template suggestedAnswers — prefill IMAGE_LABEL labels when empty */
+    suggestedAnswers?: string[];
 }
 export interface FillInBlankClientProps {
     questionData: FillInBlankData;

package/dist/components/questions/_shared/types/question-group.type.d.ts

@@ -6,6 +6,7 @@
  *
  * Different question types may use different group shapes:
  *   - BasicGroupData  → ANSWER_THE_QUESTION, CHOOSE_THE_CORRECT_ANSWER, FILL_IN_BLANK
+ *   - IMAGE_LABEL     → FILL_IN_BLANK word bank (image + label items)
  *   - (future)        → MATCH_BY_WRITING_ANSWER, LISTENING_*, etc.
  */
 /** One entry in a part's group configuration array */
@@ -24,6 +25,14 @@ export interface ArticleData {
     /** Hình ảnh – S3 key hoặc URL */
     imageUrl: string;
 }
+/** One item in an IMAGE_LABEL word bank (e.g. GET Primary vocabulary box) */
+export interface ImageLabelData {
+    /** Hình ảnh – S3 key hoặc URL */
+    imageUrl: string;
+    /** Nhãn / từ hiển thị dưới ảnh */
+    label: string;
+}
+export declare function hasImageLabels(items?: ImageLabelData[] | null): boolean;
 /**
  * Shared context fields for a group of ANSWER_THE_QUESTION,
  * CHOOSE_THE_CORRECT_ANSWER, or FILL_IN_BLANK questions.
@@ -41,4 +50,6 @@ export interface BasicGroupData {
     imageUrl?: string;
     /** Mảng bài viết – dùng cho groupType "ARTICLES" (optional) */
     articles?: ArticleData[];
+    /** Mảng ảnh + nhãn – dùng cho groupType "IMAGE_LABEL" (optional) */
+    imageLabels?: ImageLabelData[];
 }

package/dist/components/questions/_shared/types/question-group.type.js

@@ -6,6 +6,9 @@
  *
  * Different question types may use different group shapes:
  *   - BasicGroupData  → ANSWER_THE_QUESTION, CHOOSE_THE_CORRECT_ANSWER, FILL_IN_BLANK
+ *   - IMAGE_LABEL     → FILL_IN_BLANK word bank (image + label items)
  *   - (future)        → MATCH_BY_WRITING_ANSWER, LISTENING_*, etc.
  */
-export {};
+export function hasImageLabels(items) {
+    return Array.isArray(items) && items.some((item) => Boolean(item?.imageUrl?.trim() || item?.label?.trim()));
+}

package/dist/components/questions/_shared/types/spontaneous-qa.type.d.ts

@@ -13,6 +13,13 @@ export interface SpontaneousQAData {
     /** Points per question */
     points?: number;
 }
+export interface SpontaneousQAClientProps {
+    questionData: SpontaneousQAData & {
+        isBackup?: boolean;
+        expectedAnswers?: string[];
+    };
+    isReviewMode?: boolean;
+}
 export interface SpontaneousQACreatorProps {
     initialData?: SpontaneousQAData;
     onSave?: (data: SpontaneousQAData) => void;

package/dist/components/questions/groups/ImageLabelGroupCard.d.ts

@@ -0,0 +1,15 @@
+import type { ImageLabelData } from '../_shared/types/question-group.type';
+export interface ImageLabelGroupCardProps {
+    groupNumber: number;
+    imageLabels: ImageLabelData[];
+    onImageLabelsChange: (items: ImageLabelData[]) => void;
+    title?: string;
+    onTitleChange?: (value: string) => void;
+    isReadOnly?: boolean;
+    uploadIdPrefix?: string;
+}
+/**
+ * Editor for groupType IMAGE_LABEL: repeatable image + label items
+ * that render as a horizontal word bank for students.
+ */
+export declare function ImageLabelGroupCard({ groupNumber, imageLabels, onImageLabelsChange, title, onTitleChange, isReadOnly, uploadIdPrefix, }: ImageLabelGroupCardProps): import("react").JSX.Element;

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

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

package/dist/components/questions/groups/ImageLabelWordBank.d.ts

@@ -0,0 +1,10 @@
+import { type ImageLabelData } from '../_shared/types/question-group.type';
+export interface ImageLabelWordBankProps {
+    items?: ImageLabelData[];
+    title?: string;
+    className?: string;
+}
+/**
+ * Horizontal picture + label bank shown to students (and creator preview).
+ */
+export declare function ImageLabelWordBank({ items, title, className }: ImageLabelWordBankProps): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import { hasImageLabels } from '../_shared/types/question-group.type';
+/**
+ * Horizontal picture + label bank shown to students (and creator preview).
+ */
+export function ImageLabelWordBank({ items, title, className }) {
+    if (!hasImageLabels(items))
+        return null;
+    const visible = items.filter((item) => item.imageUrl?.trim() || item.label?.trim());
+    const hasAnyImage = visible.some((item) => Boolean(item.imageUrl?.trim()));
+    if (!hasAnyImage) {
+        return (_jsxs("div", { className: className, children: [title ? (_jsx("p", { className: "mb-3 text-center text-sm font-semibold text-slate-700", children: title })) : null, _jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-2 rounded-xl border-2 border-slate-300 bg-white px-4 py-3 sm:gap-x-8", children: visible.map((item, index) => (_jsx("span", { className: "text-sm font-semibold text-slate-800 sm:text-base", children: item.label }, `${item.label || 'item'}-${index}`))) })] }));
+    }
+    return (_jsxs("div", { className: className, children: [title ? (_jsx("p", { className: "mb-3 text-center text-sm font-semibold text-slate-700", children: title })) : null, _jsx("div", { className: "flex flex-wrap justify-center gap-3 sm:gap-4", children: visible.map((item, index) => (_jsxs("div", { className: "flex w-[5.5rem] flex-col items-center gap-1.5 sm:w-24", children: [_jsx("div", { className: "flex h-20 w-full items-center justify-center overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm sm:h-24", children: item.imageUrl ? (_jsx(ResolvedImage, { src: item.imageUrl, alt: item.label || `Item ${index + 1}`, className: "h-full w-full object-contain p-1" })) : (_jsx("span", { className: "px-1 text-center text-[10px] text-slate-400", children: "Ch\u01B0a c\u00F3 \u1EA3nh" })) }), item.label?.trim() ? (_jsx("span", { className: "text-center text-xs font-semibold leading-tight text-slate-800 sm:text-sm", children: item.label })) : null] }, `${item.label || 'item'}-${index}`))) })] }));
+}

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

@@ -0,0 +1,45 @@
+import type { QuestionBankFiltersInput, QuestionBankFiltersResult, QuestionSearchItem, SearchQuestionBankInput, SearchQuestionBankResult } from '../../../api/exam-questions.types';
+/**
+ * Prefill cascade filters from host context.
+ * Values are Pearson meta ids: bookId / unitId / lessonId.
+ * `lessonIds` = session textbook lessons (default search scope when lesson select = Tất cả).
+ */
+export type QuestionBankPickerDefaultFilters = {
+    bookId?: string;
+    unitId?: string;
+    lessonId?: string;
+    /** Session lesson ids — used when lesson dropdown is "Tất cả". */
+    lessonIds?: string[];
+    questionType?: string;
+    /** Optional labels so prefill renders before cascade options load. */
+    bookLabel?: string;
+    unitLabel?: string;
+};
+/** Session textbook lesson → merge into Lesson select + default search scope. */
+export type QuestionBankLessonSuggestion = {
+    lessonId?: string | null;
+    label?: string | null;
+    /** @deprecated use lessonId */
+    lesson?: string | null;
+    book?: string | null;
+    unit?: string | null;
+};
+export interface QuestionBankPickerDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    searchQuestions: (input: SearchQuestionBankInput) => Promise<SearchQuestionBankResult>;
+    getQuestionFilters?: (input?: QuestionBankFiltersInput) => Promise<QuestionBankFiltersResult>;
+    defaultFilters?: QuestionBankPickerDefaultFilters;
+    /** Session lessons: options + default multi-lesson search scope. */
+    lessonSuggestions?: QuestionBankLessonSuggestion[];
+    onConfirm: (items: QuestionSearchItem[]) => void;
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+}
+/**
+ * Multi-select bank picker. Cascade filters use stable meta ids:
+ * bookId → unitId → lessonId (labels from meta.*Name).
+ * Default lesson scope = session lessonIds when dropdown is "Tất cả".
+ */
+export declare function QuestionBankPickerDialog({ open, onOpenChange, searchQuestions, getQuestionFilters, defaultFilters, lessonSuggestions, onConfirm, title, description, confirmLabel, }: QuestionBankPickerDialogProps): import("react").JSX.Element;