@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/types/look-picture-fill-word-hint/index.js

@@ -1 +1,2 @@
-export*from"./LookPictureFillWordHintCreator";export*from"./LookPictureFillWordHintClient";
+export * from './LookPictureFillWordHintCreator';
+export * from './LookPictureFillWordHintClient';

package/dist/components/questions/types/look-picture-fill-word-hint/register.js

@@ -1 +1,82 @@
-import{LookPictureFillWordHint as t}from"./LookPictureFillWordHintCreator";export const lookPictureFillWordHintRegistration={component:t,transformInitialData:t=>{const e=t?.content,n=t?.answer,i=t?.questionGroup?.payload?.hintLetters,a=n?.hintLetters,s=e?.hintLetters,o=i||a||s||[],l=t?.total_points?parseFloat(t.total_points):t?.points||1;return n?.subQuestions&&n.subQuestions.length>0?{subQuestions:n.subQuestions,hintLetters:o.length>0?o:n.hintLetters||[],caseSensitive:n?.caseSensitive??!1,points:l,explanation:n?.explanation||t?.explanation||""}:!e||void 0===e.imageUrl&&void 0===e.word?{...n,hintLetters:o,caseSensitive:n?.caseSensitive??!1,points:l,explanation:n?.explanation||t?.explanation||""}:{content:{imageUrl:e.imageUrl||"",word:e.word||""},answer:{correctAnswer:n?.correctAnswer||"",caseSensitive:n?.caseSensitive??!1,hintLetters:o,explanation:n?.explanation||t?.explanation||""},hintLetters:o,caseSensitive:n?.caseSensitive??!1,points:l,explanation:n?.explanation||t?.explanation||""}},getExtraProps:t=>({groups:t.groups,questionIndexInPart:t.questionIndexInPart,partId:t.partId,onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef}),wrapOnSave:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t,explanation:t?.explanation||""}),wrapOnChange:(t,e)=>({type:e.questionType,content:e.state.content,points:t?.points??e.state.points??1,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:t,explanation:t?.explanation||""})};
+import { LookPictureFillWordHint } from './LookPictureFillWordHintCreator';
+export const lookPictureFillWordHintRegistration = {
+    component: LookPictureFillWordHint,
+    transformInitialData: (initialData) => {
+        const content = initialData?.content;
+        const answer = initialData?.answer;
+        // Get hintLetters from various sources
+        const hintLettersFromGroup = initialData?.questionGroup?.payload?.hintLetters;
+        const hintLettersFromAnswer = answer?.hintLetters;
+        const hintLettersFallback = content?.hintLetters;
+        const hintLetters = hintLettersFromGroup || hintLettersFromAnswer || hintLettersFallback || [];
+        const apiPoints = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (initialData?.points || 1);
+        // PRIORITY 1: Store format - answer has subQuestions
+        if (answer?.subQuestions && answer.subQuestions.length > 0) {
+            return {
+                subQuestions: answer.subQuestions,
+                hintLetters: hintLetters.length > 0 ? hintLetters : answer.hintLetters || [],
+                caseSensitive: answer?.caseSensitive ?? false,
+                points: apiPoints,
+                explanation: answer?.explanation || initialData?.explanation || '',
+            };
+        }
+        // PRIORITY 2: API format - content has imageUrl/word
+        else if (content && (content.imageUrl !== undefined || content.word !== undefined)) {
+            return {
+                content: {
+                    imageUrl: content.imageUrl || '',
+                    word: content.word || '',
+                },
+                answer: {
+                    correctAnswer: answer?.correctAnswer || '',
+                    caseSensitive: answer?.caseSensitive ?? false,
+                    hintLetters,
+                    explanation: answer?.explanation || initialData?.explanation || '',
+                },
+                hintLetters,
+                caseSensitive: answer?.caseSensitive ?? false,
+                points: apiPoints,
+                explanation: answer?.explanation || initialData?.explanation || '',
+            };
+        }
+        // PRIORITY 3: Fallback
+        else {
+            return {
+                ...answer,
+                hintLetters,
+                caseSensitive: answer?.caseSensitive ?? false,
+                points: apiPoints,
+                explanation: answer?.explanation || initialData?.explanation || '',
+            };
+        }
+    },
+    getExtraProps: (ctx) => ({
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: ctx.state.content,
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: data,
+        explanation: data?.explanation || '',
+    }),
+};

package/dist/components/questions/types/look-picture-fill-word-hint/transform.js

@@ -1 +1,29 @@
-export const transformLookPictureFillWordHint=e=>{const t=e.answer;if(!t?.subQuestions||0===t.subQuestions.length)return{apiContent:{},apiCorrectAnswer:{}};const r=t.subQuestions[0],n={imageUrl:r.imageUrl,word:r.word},s=r.groupNumber||1,o=t.hintLettersByGroup;let i=[];return o&&o[s]?i=o[s]:t.hintLetters&&(i=t.hintLetters),{apiContent:n,apiCorrectAnswer:{correctAnswer:r.correctAnswer||"",caseSensitive:t.caseSensitive||!1},hintLetters:i,groupNumber:s}};
+export const transformLookPictureFillWordHint = (question) => {
+    const answerData = question.answer;
+    if (!answerData?.subQuestions || answerData.subQuestions.length === 0) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const sq = answerData.subQuestions[0];
+    const apiContent = {
+        imageUrl: sq.imageUrl,
+        word: sq.word,
+    };
+    const groupNumber = sq.groupNumber || 1;
+    const hintLettersByGroup = answerData.hintLettersByGroup;
+    let hintLetters = [];
+    if (hintLettersByGroup && hintLettersByGroup[groupNumber]) {
+        hintLetters = hintLettersByGroup[groupNumber];
+    }
+    else if (answerData.hintLetters) {
+        hintLetters = answerData.hintLetters;
+    }
+    return {
+        apiContent,
+        apiCorrectAnswer: {
+            correctAnswer: sq.correctAnswer || '',
+            caseSensitive: answerData.caseSensitive || false,
+        },
+        hintLetters,
+        groupNumber,
+    };
+};

package/dist/components/questions/types/match-by-writing-answer/MatchByWritingAnswerClient.js

@@ -1 +1,38 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Card as t,CardContent as a}from"../../../../components/ui/card";import{Input as s}from"../../../../components/ui/input";import{Label as l}from"../../../../components/ui/label";import{CheckCircle2 as n,XCircle as i,BookOpen as o}from"lucide-react";import{usePresignedFileUrl as c}from"../../../../shared/lib/hooks";import{useState as d}from"react";function m({option:t}){const{previewUrl:a}=c(t.imageUrl||""),s=a||t.imageUrl;return r("div",s?{className:"flex flex-col items-center gap-2 rounded-xl border border-gray-200 bg-white p-3 shadow-sm",children:[e("div",{className:"relative h-24 w-24 overflow-hidden rounded-lg bg-gray-50",children:e("img",{src:s,alt:t.answer,className:"h-full w-full object-contain"})}),e("span",{className:"text-sm font-semibold text-gray-700",children:t.answer}),t.content&&e("span",{className:"text-xs text-gray-500 text-center line-clamp-2",children:t.content})]}:{className:"flex items-center gap-2.5 rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-sm",children:[e("div",{className:"flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-sm font-bold text-white shadow-sm",children:t.answer?.[0]??"?"}),r("div",{className:"min-w-0",children:[e("span",{className:"block text-sm font-semibold text-gray-800",children:t.answer}),t.content&&e("span",{className:"block truncate text-xs text-gray-500",children:t.content})]})]})}export function MatchByWritingAnswerClient({questionData:g,onSubmit:p,isReviewMode:h=!1,userAnswer:b,autoFillCorrectAnswers:x=!1,explanation:u}){const[f,w]=d(b||""),{previewUrl:N}=c(g.imageUrl||"");if(!g.question)return e(t,{children:e(a,{className:"p-6",children:e("p",{className:"text-gray-500",children:"Không có dữ liệu câu hỏi"})})});const v=g.isExample||!1,y=x||v?g.correctAnswer:f,U=h&&void 0!==b?b.trim().toLowerCase()===g.correctAnswer.trim().toLowerCase():void 0;return r(t,{className:"overflow-hidden border-0 bg-white shadow-lg",children:[e("div",{className:"h-1 bg-gradient-to-r from-teal-400 to-cyan-500"}),r(a,{className:"p-6 space-y-6",children:[g.options&&g.options.length>0&&r("div",{className:"rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-violet-50 p-4",children:[e("p",{className:"mb-3 text-sm font-semibold text-purple-700",children:"Các lựa chọn:"}),e("div",{className:"grid gap-3 "+(g.options.some(e=>e.imageUrl)?"grid-cols-2 sm:grid-cols-3 md:grid-cols-4":"grid-cols-1 sm:grid-cols-2"),children:g.options.map((r,t)=>e(m,{option:r},t))})]}),r("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5",children:[v&&r("div",{className:"mb-2 inline-flex items-center gap-1.5 rounded-full bg-amber-100 border border-amber-300 px-3 py-1",children:[e(o,{className:"h-3.5 w-3.5 text-amber-600"}),e("span",{className:"text-xs font-semibold text-amber-700 uppercase tracking-wide",children:"Example"})]}),r("div",{className:"flex items-center gap-4",children:[N||g.imageUrl?e("div",{className:"relative h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm",children:e("img",{src:N||g.imageUrl,alt:g.question,className:"h-full w-full object-contain"})}):null,r("div",{className:"flex-1 space-y-2",children:[e(l,{className:"text-base font-semibold text-gray-800",children:g.question}),r("div",{className:"flex items-center gap-3",children:[e(s,{value:y,onChange:e=>{w(e.target.value),p?.(e.target.value)},placeholder:"Viết đáp án...",disabled:h||v,className:"max-w-xs border-2 text-lg font-medium "+(h?U?"border-green-400 bg-green-50 text-green-700":"border-red-400 bg-red-50 text-red-700":"border-teal-300 focus:border-teal-500 focus:ring-teal-200")}),h&&void 0!==U&&e("span",{className:"flex items-center gap-1",children:U?e(n,{className:"h-5 w-5 text-green-500"}):e(i,{className:"h-5 w-5 text-red-500"})})]})]})]}),h&&!1===U&&r("div",{className:"mt-3 flex items-center gap-2 rounded-lg bg-green-50 border border-green-200 px-4 py-2",children:[e(n,{className:"h-4 w-4 text-green-600"}),r("span",{className:"text-sm text-green-700",children:["Đáp án đúng: ",e("strong",{children:g.correctAnswer})]})]}),x&&r("div",{className:"mt-3 flex items-center gap-2 rounded-lg bg-teal-50 border border-teal-200 px-4 py-2",children:[e(n,{className:"h-4 w-4 text-teal-600"}),r("span",{className:"text-sm text-teal-700",children:["Đáp án: ",e("strong",{children:g.correctAnswer})]})]})]}),u&&h&&r("div",{className:"rounded-xl border border-blue-200 bg-blue-50 p-4",children:[e("p",{className:"text-sm font-semibold text-blue-800 mb-1",children:"Giải thích:"}),e("p",{className:"text-sm text-blue-700",children:u})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent } from '../../../../components/ui/card';
+import { Input } from '../../../../components/ui/input';
+import { Label } from '../../../../components/ui/label';
+import { CheckCircle2, XCircle, BookOpen } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { useState } from 'react';
+function OptionCard({ option }) {
+    const { previewUrl } = usePresignedFileUrl(option.imageUrl || '');
+    const displayUrl = previewUrl || option.imageUrl;
+    if (displayUrl) {
+        return (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-xl border border-gray-200 bg-white p-3 shadow-sm", children: [_jsx("div", { className: "relative h-24 w-24 overflow-hidden rounded-lg bg-gray-50", children: _jsx("img", { src: displayUrl, alt: option.answer, className: "h-full w-full object-contain" }) }), _jsx("span", { className: "text-sm font-semibold text-gray-700", children: option.answer }), option.content && (_jsx("span", { className: "text-xs text-gray-500 text-center line-clamp-2", children: option.content }))] }));
+    }
+    return (_jsxs("div", { className: "flex items-center gap-2.5 rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-sm", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-sm font-bold text-white shadow-sm", children: option.answer?.[0] ?? '?' }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "block text-sm font-semibold text-gray-800", children: option.answer }), option.content && (_jsx("span", { className: "block truncate text-xs text-gray-500", children: option.content }))] })] }));
+}
+export function MatchByWritingAnswerClient({ questionData, onSubmit, isReviewMode = false, userAnswer, autoFillCorrectAnswers = false, explanation, }) {
+    const [answer, setAnswer] = useState(userAnswer || '');
+    const { previewUrl: questionImageUrl } = usePresignedFileUrl(questionData.imageUrl || '');
+    if (!questionData.question) {
+        return (_jsx(Card, { children: _jsx(CardContent, { className: "p-6", children: _jsx("p", { className: "text-gray-500", children: "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u c\u00E2u h\u1ECFi" }) }) }));
+    }
+    const isExample = questionData.isExample || false;
+    const displayedAnswer = autoFillCorrectAnswers || isExample
+        ? questionData.correctAnswer
+        : answer;
+    const isCorrect = isReviewMode && userAnswer !== undefined
+        ? userAnswer.trim().toLowerCase() === questionData.correctAnswer.trim().toLowerCase()
+        : undefined;
+    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-500" }), _jsxs(CardContent, { className: "p-6 space-y-6", children: [questionData.options && questionData.options.length > 0 && (_jsxs("div", { className: "rounded-xl border border-purple-200 bg-gradient-to-r from-purple-50 to-violet-50 p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-purple-700", children: "C\u00E1c l\u1EF1a ch\u1ECDn:" }), _jsx("div", { className: `grid gap-3 ${questionData.options.some((o) => o.imageUrl) ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4' : 'grid-cols-1 sm:grid-cols-2'}`, children: questionData.options.map((option, index) => (_jsx(OptionCard, { option: option }, index))) })] })), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5", children: [isExample && (_jsxs("div", { className: "mb-2 inline-flex items-center gap-1.5 rounded-full bg-amber-100 border border-amber-300 px-3 py-1", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5 text-amber-600" }), _jsx("span", { className: "text-xs font-semibold text-amber-700 uppercase tracking-wide", children: "Example" })] })), _jsxs("div", { className: "flex items-center gap-4", children: [(questionImageUrl || questionData.imageUrl) ? (_jsx("div", { className: "relative h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm", children: _jsx("img", { src: questionImageUrl || questionData.imageUrl, alt: questionData.question, className: "h-full w-full object-contain" }) })) : null, _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Label, { className: "text-base font-semibold text-gray-800", children: questionData.question }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Input, { value: displayedAnswer, onChange: (e) => {
+                                                            setAnswer(e.target.value);
+                                                            onSubmit?.(e.target.value);
+                                                        }, placeholder: "Vi\u1EBFt \u0111\u00E1p \u00E1n...", disabled: isReviewMode || isExample, className: `max-w-xs border-2 text-lg font-medium ${isReviewMode
+                                                            ? isCorrect
+                                                                ? 'border-green-400 bg-green-50 text-green-700'
+                                                                : 'border-red-400 bg-red-50 text-red-700'
+                                                            : 'border-teal-300 focus:border-teal-500 focus:ring-teal-200'}` }), isReviewMode && isCorrect !== undefined && (_jsx("span", { className: "flex items-center gap-1", children: isCorrect ? (_jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" })) : (_jsx(XCircle, { className: "h-5 w-5 text-red-500" })) }))] })] })] }), isReviewMode && isCorrect === false && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-green-50 border border-green-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsxs("span", { className: "text-sm text-green-700", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: questionData.correctAnswer })] })] })), autoFillCorrectAnswers && (_jsxs("div", { className: "mt-3 flex items-center gap-2 rounded-lg bg-teal-50 border border-teal-200 px-4 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-teal-600" }), _jsxs("span", { className: "text-sm text-teal-700", children: ["\u0110\u00E1p \u00E1n: ", _jsx("strong", { children: questionData.correctAnswer })] })] }))] }), explanation && isReviewMode && (_jsxs("div", { className: "rounded-xl border border-blue-200 bg-blue-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-blue-800 mb-1", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "text-sm text-blue-700", children: explanation })] }))] })] }));
+}

package/dist/components/questions/types/match-by-writing-answer/MatchByWritingAnswerCreator.js

@@ -1 +1,359 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{ImagePreview as t}from"../../../../components/ui/image-preview";import{useState as n,useRef as a,useEffect as i}from"react";import{Button as s}from"../../../../components/ui/button";import{Label as o}from"../../../../components/ui/label";import{Input as l}from"../../../../components/ui/input";import{Textarea as c}from"../../../../components/ui/textarea";import{PointsInput as m}from"../../../../components/ui/points-input";import{Card as d,CardContent as u,CardHeader as g,CardTitle as p}from"../../../../components/ui/card";import{Pencil as h,Eye as x,ImageIcon as f,MessageSquare as N,HelpCircle as b,BookOpen as w,Grid3X3 as v,Users as y}from"lucide-react";import{FileUpload as C}from"../../../../components/ui/file-upload";import{Checkbox as U}from"../../../../components/ui/checkbox";import{MatchByWritingAnswerClient as A}from"./MatchByWritingAnswerClient";import{MatchAnswerGroupCard as T}from"../../groups/MatchAnswerGroupCard";import{useDebouncedCallback as q,usePresignedFileUrl as I}from"../../../../shared/lib/hooks";import{useExamQuestionStore as k}from"../../../../shared/lib/stores/examQuestionStore";function E(e,r){if(!r||0===r.length)return 1;let t=0;for(const n of r){if(e<t+n.questionCount)return n.number;t+=n.questionCount}return r[r.length-1]?.number||1}function S({initialData:S,onSave:G,onSaveToQuestionBank:D,onCancel:M,onChange:j,onUnsavedChangesChange:F,externalErrors:P,groups:O,groupConfig:V,questionConfig:R,viewMode:z,questionIndexInPart:J=0,partId:B="",validationRef:H,headerExtra:Q}){const W=k(e=>e.setSharedPassageData),L=k(e=>e.getSharedPassageData),K=E(J,O),[X,Y]=n(S?.question||""),[Z,$]=n(S?.imageUrl||""),[_,ee]=n(S?.correctAnswer||""),[re,te]=n(S?.points||1),[ne,ae]=n(S?.isExample||!1),[ie,se]=n(S?.groupNumber||K),[oe,le]=n(S?.explanation||""),[ce,me]=n(S?.askerName||""),[de,ue]=n(S?.answererName||""),[ge,pe]=n(()=>{if(B){const e=L(B,K);if(e?.options&&Array.isArray(e.options))return e.options}return S?.options||[]}),[he,xe]=n(()=>{if(B){const e=L(B,K);if(e?.groupImageUrl)return e.groupImageUrl}return S?.groupImageUrl||""}),[fe,Ne]=n(""),[be,we]=n(()=>{if(B){const e=L(B,K);if(e?.groupTitle)return e.groupTitle}return S?.groupTitle||""}),ve=V?.includes("groupImageUrl")??!1,ye=V?.includes("groupTitle")??!1,[Ce,Ue]=n(!1),[Ae,Te]=n(!1),[qe,Ie]=n(""),[ke,Ee]=n({}),Se=a(""),Ge=a(S),De=a(J),Me=a(!1),je=a(!1),Fe=a(j),Pe=a(""),Oe=a(F),Ve=ie||1,Re=!R||R.includes("question"),ze=!R||R.includes("imageUrl"),Je=!R||R.includes("answer"),{previewUrl:Be}=I(Z),He=qe||Be||"";i(()=>{Oe.current=F},[F]),i(()=>{Fe.current=j},[j]);const Qe=q(e=>{Fe.current?.(e)},300),We=()=>JSON.stringify({question:X,imageUrl:Z,correctAnswer:_,points:re,isExample:ne,askerName:ce,answererName:de,options:ge,groupImageUrl:he,groupTitle:be});i(()=>{if(Me.current)return;const e=setTimeout(()=>{Se.current=We(),Te(!1)},150);return()=>clearTimeout(e)},[J]),i(()=>{if(Me.current)return;if(!Se.current)return;const e=We()!==Se.current;e!==Ae&&(Te(e),Oe.current?.(e))},[X,Z,_,re,ne,ce,de,ge,he,be,Ae]),i(()=>{H&&(H.current={triggerValidation:async()=>{const e={};let r=!0;return!Re||X&&""!==X.trim()||(e.question="Vui lòng nhập tên/câu hỏi",r=!1),!Je||_&&""!==_.trim()||(e.correctAnswer="Vui lòng nhập đáp án",r=!1),Ee(e),r},getFormData:()=>({question:X,imageUrl:Z,correctAnswer:_,points:re,groupNumber:Ve,isExample:ne,askerName:ce,answererName:de,options:ge,groupImageUrl:he,groupTitle:be,explanation:oe,groups:O})})},[H,X,Z,_,re,Ve,ne,ce,de,ge,he,be,oe,O]),i(()=>{const e=J!==De.current,r=!!S?.question;if(!(!je.current&&r)&&!e)return;Me.current=!0,Ge.current=S,De.current=J,je.current=!0;const t=E(J,O);Y(S?.question||""),$(S?.imageUrl||""),ee(S?.correctAnswer||""),te(S?.points||1),ae(S?.isExample||!1),se(t),le(S?.explanation||""),me(S?.askerName||""),ue(S?.answererName||"");let n=[],a="",i="";if(B){const e=L(B,t);e?.options&&Array.isArray(e.options)?(n=e.options,a=e?.groupImageUrl||"",i=e?.groupTitle||""):(n=S?.options||[],a=S?.groupImageUrl||"",i=S?.groupTitle||"",(n.length>0||a||i)&&W(B,t,{options:n,groupImageUrl:a,groupTitle:i}))}else n=S?.options||[],a=S?.groupImageUrl||"",i=S?.groupTitle||"";pe(n),xe(a),we(i),setTimeout(()=>{Me.current=!1},100)},[S,O,J,B,L,W]),i(()=>{if(Me.current)return;const e={question:X,imageUrl:Z,correctAnswer:_,points:re||1,groupNumber:Ve,isExample:ne,askerName:ce,answererName:de,options:ge,groupImageUrl:he,groupTitle:be,explanation:oe,groups:O},r=JSON.stringify(e);Pe.current!==r&&(Pe.current=r,B&&W(B,Ve,{options:ge,groupImageUrl:he,groupTitle:be}),Qe(e))},[X,Z,_,re,Ve,ne,ce,de,ge,he,be,oe,O,B,W,Qe]);if(Ce){const t={question:X,imageUrl:He||Z,correctAnswer:_,points:re,groupNumber:Ve,isExample:ne,options:ge};return r("div",{className:"space-y-4",children:[e(d,{children:e(g,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(p,{children:"Match by Writing Answer (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước - Hiển thị đáp án đúng"})]}),r(s,{variant:"outline",size:"sm",onClick:()=>Ue(!1),children:[e(h,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(A,{questionData:t,isReviewMode:!0,autoFillCorrectAnswers:!0,explanation:oe})]})}return r("div",{className:"space-y-4",children:[O&&O.length>0&&e(T,{currentGroupNumber:Ve,groupTitle:be,groupImageUrl:he,groupImagePreviewUrl:fe,options:ge,groupConfig:V,showGroupTitle:ye,showGroupImageUrl:ve,onGroupTitleChange:we,onGroupImageChange:xe,onGroupImagePreviewUrlChange:Ne,onUpdateOption:(e,r,t)=>{pe(n=>{const a=[...n];return a[e]={...a[e],[r]:t},a})},onRemoveOption:e=>{pe(r=>r.filter((r,t)=>t!==e))},onAddOption:()=>{String(ge.length+1);pe(e=>[...e,{answer:"",content:"",imageUrl:""}])}}),r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e(g,{className:"px-4 py-3",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 shadow-sm",children:e(v,{className:"h-4 w-4 text-white"})}),r("div",{children:[e(p,{className:"text-base font-bold text-gray-900",children:"Ghép đáp án bằng cách viết"}),e("p",{className:"text-xs text-gray-500",children:"Nhìn hình và viết đáp án tương ứng"})]})]}),r("div",{className:"flex items-center gap-2",children:[Q,r(s,{variant:"outline",size:"sm",onClick:()=>Ue(!0),disabled:!X,className:"gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700",children:[e(x,{className:"h-4 w-4"}),"Xem trước"]})]})]})}),r(u,{className:"space-y-4 px-4 pb-4",children:[r("div",{className:"flex items-center gap-6",children:[e(m,{value:re||1,onChange:e=>te(parseFloat(e.target.value)||1)}),r("div",{className:"flex items-center gap-2",children:[e(U,{id:"isExample",checked:ne||!1,onCheckedChange:e=>ae(!!e)}),e(o,{htmlFor:"isExample",className:"flex items-center gap-1.5 cursor-pointer text-sm font-medium text-gray-700",children:"Đánh dấu là câu hỏi Example"})]})]}),"CONVERSATION"===z&&r("div",{className:"space-y-3",children:[r(o,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(y,{className:"h-4 w-4 text-indigo-500"}),"Hội thoại ",e("span",{className:"text-sm font-normal text-gray-500",children:"(tuỳ chọn - dùng cho câu hỏi dạng hội thoại)"})]}),r("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:[r("div",{className:"space-y-1.5",children:[e(o,{htmlFor:"askerName",className:"text-sm font-medium text-gray-600",children:"Tên người hỏi"}),e(l,{id:"askerName",value:ce,onChange:e=>me(e.target.value),placeholder:"VD: John, Mary, Teacher...",className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200"})]}),r("div",{className:"space-y-1.5",children:[e(o,{htmlFor:"answererName",className:"text-sm font-medium text-gray-600",children:"Tên người trả lời"}),e(l,{id:"answererName",value:de,onChange:e=>ue(e.target.value),placeholder:"VD: Tom, Anna, Student...",className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200"})]})]})]}),Re&&r("div",{className:"space-y-2",children:[r(o,{htmlFor:"question",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(N,{className:"h-4 w-4 text-teal-500"}),"Tên / Câu hỏi ",e("span",{className:"text-xs font-normal text-gray-500",children:"(tùy chọn)"})]}),e(l,{id:"question",value:X,onChange:e=>{Y(e.target.value),ke.question&&Ee(e=>({...e,question:void 0}))},placeholder:"Nhập tên hoặc câu hỏi... (vd: Mum, Dad, Julia)",className:"border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 "+(ke.question?"border-red-400 focus:border-red-500 focus:ring-red-200":"")}),ke.question&&e("p",{className:"text-sm text-red-600",children:ke.question})]}),ze&&r("div",{className:"space-y-2",children:[r(o,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(f,{className:"h-4 w-4 text-teal-500"}),"Hình ảnh câu hỏi ",e("span",{className:"text-xs font-normal text-gray-500",children:"(tùy chọn)"})]}),e(C,{id:"question-image",label:"",accept:"image/*",value:Z||"",onChange:e=>{$(e),ke.imageUrl&&Ee(e=>({...e,imageUrl:void 0}))},onPresignedUrlChange:Ie,maxSize:5,placeholder:"Upload ảnh hoặc paste URL",autoUpload:!0,prefix:"questions"}),He&&e(t,{src:He,alt:"Preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]}),Je&&r("div",{className:"space-y-2",children:[r(o,{htmlFor:"correctAnswer",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(b,{className:"h-4 w-4 text-green-500"}),"Đáp án đúng ",e("span",{className:"text-red-500",children:"*"})]}),r("select",{id:"correctAnswer",value:_,onChange:e=>{ee(e.target.value),ke.correctAnswer&&Ee(e=>({...e,correctAnswer:void 0}))},className:"flex h-10 w-full rounded-md border px-3 py-2 text-sm bg-white transition-all focus:outline-none focus:ring-2 focus:ring-offset-0 "+(ke.correctAnswer?"border-red-400 focus:border-red-500 focus:ring-red-200":"border-gray-200 focus:border-green-300 focus:ring-green-200"),children:[e("option",{value:"",children:"-- Chọn đáp án đúng --"}),ge.filter(e=>e.answer&&""!==e.answer.trim()).map((r,t)=>e("option",{value:r.answer,children:r.answer},t))]}),ke.correctAnswer&&e("p",{className:"text-sm text-red-600",children:ke.correctAnswer})]}),P&&P.length>0&&r("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:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100",children:e("span",{className:"text-lg",children:"❌"})}),r("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Lỗi:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:P.map((r,t)=>e("li",{children:r},t))})]})]})]})]}),r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e(g,{className:"px-4 py-3",children:r("div",{className:"flex items-center gap-2",children:[e("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:e(w,{className:"h-3.5 w-3.5 text-white"})}),r("div",{children:[r("div",{className:"flex items-center gap-2",children:[e(p,{className:"text-base font-semibold text-gray-800",children:"Giải thích"}),e("span",{className:"inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"text-xs text-gray-500 mt-0.5",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(u,{className:"px-4 pb-4",children:e(c,{id:"explanation",value:oe,onChange:e=>le(e.target.value),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}export function MatchByWritingAnswerCreator(r){return e(S,{...r})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImagePreview } from '../../../../components/ui/image-preview';
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Pencil, Eye, ImageIcon, MessageSquare, HelpCircle, BookOpen, Grid3X3, Users } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { Checkbox } from '../../../../components/ui/checkbox';
+import { MatchByWritingAnswerClient } from './MatchByWritingAnswerClient';
+import { MatchAnswerGroupCard } from '../../groups/MatchAnswerGroupCard';
+import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+// Helper: Calculate group number for a question index based on groups config
+function getGroupNumberForIndex(questionIndex, groups) {
+    if (!groups || groups.length === 0) {
+        return 1;
+    }
+    let currentIndex = 0;
+    for (const group of groups) {
+        if (questionIndex < currentIndex + group.questionCount) {
+            return group.number;
+        }
+        currentIndex += group.questionCount;
+    }
+    return groups[groups.length - 1]?.number || 1;
+}
+function MatchByWritingAnswerContent({ initialData, onSave, onSaveToQuestionBank, onCancel, onChange, onUnsavedChangesChange, externalErrors, groups, groupConfig, questionConfig, viewMode, questionIndexInPart = 0, partId = '', validationRef, headerExtra, }) {
+    // Access exam question store for shared data
+    const setSharedPassageData = useExamQuestionStore((state) => state.setSharedPassageData);
+    const getSharedPassageData = useExamQuestionStore((state) => state.getSharedPassageData);
+    // Get current group number
+    const initialGroupNum = getGroupNumberForIndex(questionIndexInPart, groups);
+    // Per-question state
+    const [question, setQuestion] = useState(initialData?.question || '');
+    const [imageUrl, setImageUrl] = useState(initialData?.imageUrl || '');
+    const [correctAnswer, setCorrectAnswer] = useState(initialData?.correctAnswer || '');
+    const [points, setPoints] = useState(initialData?.points || 1);
+    const [isExample, setIsExample] = useState(initialData?.isExample || false);
+    const [groupNumber, setGroupNumber] = useState(initialData?.groupNumber || initialGroupNum);
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [askerName, setAskerName] = useState(initialData?.askerName || '');
+    const [answererName, setAnswererName] = useState(initialData?.answererName || '');
+    // Shared options state (stored via exam question store)
+    const [options, setOptions] = useState(() => {
+        // Priority 1: Check shared data from store
+        if (partId) {
+            const storedData = getSharedPassageData(partId, initialGroupNum);
+            if (storedData?.options && Array.isArray(storedData.options)) {
+                return storedData.options;
+            }
+        }
+        // Priority 2: From initialData
+        return initialData?.options || [];
+    });
+    // Group image URL state (shared across all questions in the group)
+    const [groupImageUrl, setGroupImageUrl] = useState(() => {
+        if (partId) {
+            const storedData = getSharedPassageData(partId, initialGroupNum);
+            if (storedData?.groupImageUrl) {
+                return storedData.groupImageUrl;
+            }
+        }
+        return initialData?.groupImageUrl || '';
+    });
+    const [groupImagePreviewUrl, setGroupImagePreviewUrl] = useState('');
+    // Group title state (shared across all questions in the group)
+    const [groupTitle, setGroupTitle] = useState(() => {
+        if (partId) {
+            const storedData = getSharedPassageData(partId, initialGroupNum);
+            if (storedData?.groupTitle) {
+                return storedData.groupTitle;
+            }
+        }
+        return initialData?.groupTitle || '';
+    });
+    // Whether to show shared group fields
+    const showGroupImageUrl = groupConfig?.includes('groupImageUrl') ?? false;
+    const showGroupTitle = groupConfig?.includes('groupTitle') ?? false;
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
+    // Inline validation errors
+    const [validationErrors, setValidationErrors] = useState({});
+    // Refs
+    const savedStateRef = useRef('');
+    const previousInitialDataRef = useRef(initialData);
+    const previousQuestionIndexRef = useRef(questionIndexInPart);
+    const isInitializingRef = useRef(false);
+    const hasInitializedRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    const onUnsavedChangesChangeRef = useRef(onUnsavedChangesChange);
+    const currentGroupNumber = groupNumber || 1;
+    // Determine which per-question fields to show based on questionConfig
+    // Default: show all fields if questionConfig is not provided
+    const showQuestionField = !questionConfig || questionConfig.includes('question');
+    const showImageUrlField = !questionConfig || questionConfig.includes('imageUrl');
+    const showAnswerField = !questionConfig || questionConfig.includes('answer');
+    // Presigned URL for per-question image preview
+    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(imageUrl);
+    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
+    useEffect(() => { onUnsavedChangesChangeRef.current = onUnsavedChangesChange; }, [onUnsavedChangesChange]);
+    useEffect(() => { onChangeRef.current = onChange; }, [onChange]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // Helper to get current state string
+    const getCurrentStateString = () => {
+        return JSON.stringify({
+            question,
+            imageUrl,
+            correctAnswer,
+            points,
+            isExample,
+            askerName,
+            answererName,
+            options,
+            groupImageUrl,
+            groupTitle,
+        });
+    };
+    // Initialize saved state when questionIndexInPart changes
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        const timer = setTimeout(() => {
+            savedStateRef.current = getCurrentStateString();
+            setHasUnsavedChanges(false);
+        }, 150);
+        return () => clearTimeout(timer);
+    }, [questionIndexInPart]);
+    // Detect unsaved changes
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        if (!savedStateRef.current)
+            return;
+        const currentState = getCurrentStateString();
+        const hasChanges = currentState !== savedStateRef.current;
+        if (hasChanges !== hasUnsavedChanges) {
+            setHasUnsavedChanges(hasChanges);
+            onUnsavedChangesChangeRef.current?.(hasChanges);
+        }
+    }, [question, imageUrl, correctAnswer, points, isExample, askerName, answererName, options, groupImageUrl, groupTitle, hasUnsavedChanges]);
+    // Expose validation function via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    const errors = {};
+                    let isValid = true;
+                    if (showQuestionField && (!question || question.trim() === '')) {
+                        errors.question = 'Vui lòng nhập tên/câu hỏi';
+                        isValid = false;
+                    }
+                    if (showAnswerField && (!correctAnswer || correctAnswer.trim() === '')) {
+                        errors.correctAnswer = 'Vui lòng nhập đáp án';
+                        isValid = false;
+                    }
+                    setValidationErrors(errors);
+                    return isValid;
+                },
+                getFormData: () => ({
+                    question,
+                    imageUrl,
+                    correctAnswer,
+                    points,
+                    groupNumber: currentGroupNumber,
+                    isExample,
+                    askerName,
+                    answererName,
+                    options,
+                    groupImageUrl,
+                    groupTitle,
+                    explanation,
+                    groups,
+                }),
+            };
+        }
+    }, [validationRef, question, imageUrl, correctAnswer, points, currentGroupNumber, isExample, askerName, answererName, options, groupImageUrl, groupTitle, explanation, groups]);
+    // Sync from initialData when navigation or first init
+    useEffect(() => {
+        const questionIndexChanged = questionIndexInPart !== previousQuestionIndexRef.current;
+        const hasValidInitialData = !!initialData?.question;
+        const shouldSyncForFirstInit = !hasInitializedRef.current && hasValidInitialData;
+        const shouldSyncForNavigation = questionIndexChanged;
+        if (!shouldSyncForFirstInit && !shouldSyncForNavigation)
+            return;
+        isInitializingRef.current = true;
+        previousInitialDataRef.current = initialData;
+        previousQuestionIndexRef.current = questionIndexInPart;
+        hasInitializedRef.current = true;
+        const groupNum = getGroupNumberForIndex(questionIndexInPart, groups);
+        // Set per-question state
+        setQuestion(initialData?.question || '');
+        setImageUrl(initialData?.imageUrl || '');
+        setCorrectAnswer(initialData?.correctAnswer || '');
+        setPoints(initialData?.points || 1);
+        setIsExample(initialData?.isExample || false);
+        setGroupNumber(groupNum);
+        setExplanation(initialData?.explanation || '');
+        setAskerName(initialData?.askerName || '');
+        setAnswererName(initialData?.answererName || '');
+        // Handle shared options, groupImageUrl & groupTitle
+        let sharedOptions = [];
+        let sharedGroupImageUrl = '';
+        let sharedGroupTitle = '';
+        if (partId) {
+            const storedData = getSharedPassageData(partId, groupNum);
+            if (storedData?.options && Array.isArray(storedData.options)) {
+                sharedOptions = storedData.options;
+                sharedGroupImageUrl = storedData?.groupImageUrl || '';
+                sharedGroupTitle = storedData?.groupTitle || '';
+            }
+            else {
+                sharedOptions = initialData?.options || [];
+                sharedGroupImageUrl = initialData?.groupImageUrl || '';
+                sharedGroupTitle = initialData?.groupTitle || '';
+                if (sharedOptions.length > 0 || sharedGroupImageUrl || sharedGroupTitle) {
+                    setSharedPassageData(partId, groupNum, { options: sharedOptions, groupImageUrl: sharedGroupImageUrl, groupTitle: sharedGroupTitle });
+                }
+            }
+        }
+        else {
+            sharedOptions = initialData?.options || [];
+            sharedGroupImageUrl = initialData?.groupImageUrl || '';
+            sharedGroupTitle = initialData?.groupTitle || '';
+        }
+        setOptions(sharedOptions);
+        setGroupImageUrl(sharedGroupImageUrl);
+        setGroupTitle(sharedGroupTitle);
+        setTimeout(() => { isInitializingRef.current = false; }, 100);
+    }, [initialData, groups, questionIndexInPart, partId, getSharedPassageData, setSharedPassageData]);
+    // Call onChange when data changes
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        const payload = {
+            question,
+            imageUrl,
+            correctAnswer,
+            points: points || 1,
+            groupNumber: currentGroupNumber,
+            isExample,
+            askerName,
+            answererName,
+            options,
+            groupImageUrl,
+            groupTitle,
+            explanation,
+            groups,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            // Save shared data to store
+            if (partId) {
+                setSharedPassageData(partId, currentGroupNumber, { options, groupImageUrl, groupTitle });
+            }
+            debouncedOnChange(payload);
+        }
+    }, [question, imageUrl, correctAnswer, points, currentGroupNumber, isExample, askerName, answererName, options, groupImageUrl, groupTitle, explanation, groups, partId, setSharedPassageData, debouncedOnChange]);
+    // Update option
+    const updateOption = (index, field, value) => {
+        setOptions((prev) => {
+            const updated = [...prev];
+            updated[index] = { ...updated[index], [field]: value };
+            return updated;
+        });
+    };
+    // Add option
+    const addOption = () => {
+        const nextNumber = String(options.length + 1); // 1, 2, 3...
+        setOptions((prev) => [...prev, { answer: '', content: '', imageUrl: '' }]);
+    };
+    // Remove option
+    const removeOption = (index) => {
+        setOptions((prev) => prev.filter((_, i) => i !== index));
+    };
+    // Validate all fields
+    const validate = () => {
+        const errors = {};
+        let isValid = true;
+        if (showQuestionField && (!question || question.trim() === '')) {
+            errors.question = 'Vui lòng nhập tên/câu hỏi';
+            isValid = false;
+        }
+        if (showAnswerField && (!correctAnswer || correctAnswer.trim() === '')) {
+            errors.correctAnswer = 'Vui lòng nhập đáp án';
+            isValid = false;
+        }
+        setValidationErrors(errors);
+        return isValid;
+    };
+    // Handle save
+    const handleSave = () => {
+        if (!validate())
+            return;
+        const payload = {
+            question,
+            imageUrl,
+            correctAnswer,
+            points: points || 1,
+            groupNumber: currentGroupNumber,
+            isExample,
+            askerName,
+            answererName,
+            options,
+            groupImageUrl,
+            groupTitle,
+            explanation,
+            groups,
+        };
+        savedStateRef.current = getCurrentStateString();
+        setHasUnsavedChanges(false);
+        onSave?.(payload);
+    };
+    // Client mode preview
+    if (isClientMode) {
+        const questionData = {
+            question,
+            imageUrl: displayPreviewUrl || imageUrl,
+            correctAnswer,
+            points,
+            groupNumber: currentGroupNumber,
+            isExample,
+            options,
+        };
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Match by Writing Answer (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(MatchByWritingAnswerClient, { questionData: questionData, isReviewMode: true, autoFillCorrectAnswers: true, explanation: explanation })] }));
+    }
+    // Creator UI
+    return (_jsxs("div", { className: "space-y-4", children: [groups && groups.length > 0 && (_jsx(MatchAnswerGroupCard, { currentGroupNumber: currentGroupNumber, groupTitle: groupTitle, groupImageUrl: groupImageUrl, groupImagePreviewUrl: groupImagePreviewUrl, options: options, groupConfig: groupConfig, showGroupTitle: showGroupTitle, showGroupImageUrl: showGroupImageUrl, onGroupTitleChange: setGroupTitle, onGroupImageChange: setGroupImageUrl, onGroupImagePreviewUrlChange: setGroupImagePreviewUrl, onUpdateOption: updateOption, onRemoveOption: removeOption, onAddOption: addOption })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 shadow-sm", children: _jsx(Grid3X3, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "Gh\u00E9p \u0111\u00E1p \u00E1n b\u1EB1ng c\u00E1ch vi\u1EBFt" }), _jsx("p", { className: "text-xs text-gray-500", children: "Nh\u00ECn h\u00ECnh v\u00E0 vi\u1EBFt \u0111\u00E1p \u00E1n t\u01B0\u01A1ng \u1EE9ng" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !question, className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsx(PointsInput, { value: points || 1, onChange: (e) => setPoints(parseFloat(e.target.value) || 1) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "isExample", checked: isExample || false, onCheckedChange: (checked) => setIsExample(!!checked) }), _jsx(Label, { htmlFor: "isExample", className: "flex items-center gap-1.5 cursor-pointer text-sm font-medium text-gray-700", children: "\u0110\u00E1nh d\u1EA5u l\u00E0 c\u00E2u h\u1ECFi Example" })] })] }), 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: [_jsx(Label, { htmlFor: "askerName", className: "text-sm font-medium text-gray-600", children: "T\u00EAn ng\u01B0\u1EDDi h\u1ECFi" }), _jsx(Input, { id: "askerName", value: askerName, onChange: (e) => setAskerName(e.target.value), placeholder: "VD: John, Mary, Teacher...", className: "border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "answererName", className: "text-sm font-medium text-gray-600", children: "T\u00EAn ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi" }), _jsx(Input, { id: "answererName", value: answererName, onChange: (e) => setAnswererName(e.target.value), placeholder: "VD: Tom, Anna, Student...", className: "border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200" })] })] })] })), showQuestionField && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-teal-500" }), "T\u00EAn / C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(t\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: "question", value: question, onChange: (e) => {
+                                            setQuestion(e.target.value);
+                                            if (validationErrors.question) {
+                                                setValidationErrors((prev) => ({ ...prev, question: undefined }));
+                                            }
+                                        }, placeholder: "Nh\u1EADp t\u00EAn ho\u1EB7c c\u00E2u h\u1ECFi... (vd: Mum, Dad, Julia)", className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${validationErrors.question ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), validationErrors.question && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.question }))] })), showImageUrlField && (_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-teal-500" }), "H\u00ECnh \u1EA3nh c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(t\u00F9y ch\u1ECDn)" })] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: imageUrl || '', onChange: (url) => {
+                                            setImageUrl(url);
+                                            if (validationErrors.imageUrl) {
+                                                setValidationErrors((prev) => ({ ...prev, imageUrl: undefined }));
+                                            }
+                                        }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), showAnswerField && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "correctAnswer", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(HelpCircle, { className: "h-4 w-4 text-green-500" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("select", { id: "correctAnswer", value: correctAnswer, onChange: (e) => {
+                                            setCorrectAnswer(e.target.value);
+                                            if (validationErrors.correctAnswer) {
+                                                setValidationErrors((prev) => ({ ...prev, correctAnswer: undefined }));
+                                            }
+                                        }, className: `flex h-10 w-full rounded-md border px-3 py-2 text-sm bg-white transition-all focus:outline-none focus:ring-2 focus:ring-offset-0 ${validationErrors.correctAnswer ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : 'border-gray-200 focus:border-green-300 focus:ring-green-200'}`, children: [_jsx("option", { value: "", children: "-- Ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng --" }), options
+                                                .filter((opt) => opt.answer && opt.answer.trim() !== '')
+                                                .map((opt, idx) => (_jsx("option", { value: opt.answer, children: opt.answer }, idx)))] }), validationErrors.correctAnswer && (_jsx("p", { className: "text-sm text-red-600", children: validationErrors.correctAnswer }))] })), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+}
+export function MatchByWritingAnswerCreator(props) {
+    return _jsx(MatchByWritingAnswerContent, { ...props });
+}

package/dist/components/questions/types/match-by-writing-answer/index.js

@@ -1 +1,3 @@
-export{MatchByWritingAnswerCreator}from"./MatchByWritingAnswerCreator";export{MatchByWritingAnswerClient}from"./MatchByWritingAnswerClient";export{matchByWritingAnswerRegistration}from"./register";
+export { MatchByWritingAnswerCreator } from './MatchByWritingAnswerCreator';
+export { MatchByWritingAnswerClient } from './MatchByWritingAnswerClient';
+export { matchByWritingAnswerRegistration } from './register';