@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/types/speaking-conversation/register.js

@@ -1 +1,110 @@
-import{SpeakingConversationCreator as e}from"./SpeakingConversationCreator";export const speakingConversationRegistration={component:e,transformInitialData:e=>{const t=e?.content,r=e?.answer||e?.correctAnswer||e?.correct_answer,n=e?.questionGroup?.payload||e?.groupPayload||{},a=e?.total_points?parseFloat(e.total_points):e?.points??t?.points??r?.points??5,o=e?.explanation||t?.explanation||r?.explanation||"",i=(()=>{const e=r?.expectedAnswers;return Array.isArray(e)&&e.length>0?e:[""]})();return{responder:t?.responder??"STUDENT",interlocutorAudioUrl:t?.interlocutorAudioUrl??"",partnerAudioUrl:t?.partnerAudioUrl??"",questionText:t?.questionText??"",isBackup:t?.isBackup??!1,expectedAnswers:i,explanation:o,points:a,partnerName:n?.partnerName??"",partnerAvatarUrl:n?.partnerAvatarUrl??"",images:n?.images?.length>0?n.images:r?.images??[]}},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef,groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId}),wrapOnSave:(e,t)=>{const r="PARTNER"===e.responder,n=(e.expectedAnswers||[]).filter(e=>e&&""!==e.trim());return{type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},responder:e.responder,interlocutorAudioUrl:e.interlocutorAudioUrl||void 0,partnerAudioUrl:e.partnerAudioUrl||void 0,questionText:e.questionText||void 0,isBackup:e.isBackup||!1},is_example:!!r,points:r?0:e.points??t.state.points??5,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:n,partnerName:e.partnerName||void 0,partnerAvatarUrl:e.partnerAvatarUrl||void 0,images:(e.images||[]).filter(e=>e.url&&""!==e.url.trim()),groupNumber:e.groupNumber},explanation:e.explanation||""}},wrapOnChange:(e,t)=>{const r="PARTNER"===e.responder,n=e.expectedAnswers||[""];return{type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},responder:e.responder,interlocutorAudioUrl:e.interlocutorAudioUrl||void 0,partnerAudioUrl:e.partnerAudioUrl||void 0,questionText:e.questionText||void 0,isBackup:e.isBackup||!1},is_example:!!r,points:r?0:e.points??t.state.points??5,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:n,partnerName:e.partnerName||void 0,partnerAvatarUrl:e.partnerAvatarUrl||void 0,images:(e.images||[]).filter(e=>e.url&&""!==e.url.trim()),groupNumber:e.groupNumber},explanation:e.explanation||""}}};
+import { SpeakingConversationCreator } from './SpeakingConversationCreator';
+export const speakingConversationRegistration = {
+    component: SpeakingConversationCreator,
+    transformInitialData: (initialData) => {
+        const content = initialData?.content;
+        const answer = initialData?.answer || initialData?.correctAnswer || initialData?.correct_answer;
+        const groupPayload = initialData?.questionGroup?.payload || initialData?.groupPayload || {};
+        const points = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : initialData?.points ?? content?.points ?? answer?.points ?? 5;
+        const explanation = initialData?.explanation || content?.explanation || answer?.explanation || '';
+        const expectedAnswers = (() => {
+            const arr = answer?.expectedAnswers;
+            if (Array.isArray(arr) && arr.length > 0)
+                return arr;
+            return [''];
+        })();
+        return {
+            // Per-question content
+            responder: content?.responder ?? 'STUDENT',
+            interlocutorAudioUrl: content?.interlocutorAudioUrl ?? '',
+            partnerAudioUrl: content?.partnerAudioUrl ?? '',
+            questionText: content?.questionText ?? '',
+            isBackup: content?.isBackup ?? false,
+            // Expected answers
+            expectedAnswers,
+            // Explanation & points
+            explanation,
+            points,
+            // Group payload (shared across questions in group).
+            // Prefer groupPayload.images when non-empty; fall back to answer.images which is
+            // always written by wrapOnChange/wrapOnSave. This covers the case where the store
+            // retains a stale questionGroup.payload.images=[] from the initial API load before
+            // an image was first saved (Fix for phase image not persisting after save).
+            partnerName: groupPayload?.partnerName ?? '',
+            partnerAvatarUrl: groupPayload?.partnerAvatarUrl ?? '',
+            images: groupPayload?.images?.length > 0 ? groupPayload.images : (answer?.images ?? []),
+        };
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+    }),
+    wrapOnSave: (data, ctx) => {
+        const isPartner = data.responder === 'PARTNER';
+        // Filter empty expected answers
+        const expectedAnswers = (data.expectedAnswers || []).filter((s) => s && s.trim() !== '');
+        return {
+            type: ctx.questionType,
+            content: {
+                ...(typeof ctx.state.content === 'object' && ctx.state.content !== null
+                    ? ctx.state.content
+                    : {}),
+                responder: data.responder,
+                interlocutorAudioUrl: data.interlocutorAudioUrl || undefined,
+                partnerAudioUrl: data.partnerAudioUrl || undefined,
+                questionText: data.questionText || undefined,
+                isBackup: data.isBackup || false,
+            },
+            // CRITICAL: auto-set is_example and points for PARTNER questions
+            is_example: isPartner ? true : false,
+            points: isPartner ? 0 : (data.points ?? ctx.state.points ?? 5),
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: {
+                expectedAnswers,
+                // Group data stored in answer so transform handler can access it
+                partnerName: data.partnerName || undefined,
+                partnerAvatarUrl: data.partnerAvatarUrl || undefined,
+                images: (data.images || []).filter((img) => img.url && img.url.trim() !== ''),
+                groupNumber: data.groupNumber,
+            },
+            explanation: data.explanation || '',
+        };
+    },
+    wrapOnChange: (data, ctx) => {
+        const isPartner = data.responder === 'PARTNER';
+        const expectedAnswers = data.expectedAnswers || [''];
+        return {
+            type: ctx.questionType,
+            content: {
+                ...(typeof ctx.state.content === 'object' && ctx.state.content !== null
+                    ? ctx.state.content
+                    : {}),
+                responder: data.responder,
+                interlocutorAudioUrl: data.interlocutorAudioUrl || undefined,
+                partnerAudioUrl: data.partnerAudioUrl || undefined,
+                questionText: data.questionText || undefined,
+                isBackup: data.isBackup || false,
+            },
+            is_example: isPartner ? true : false,
+            points: isPartner ? 0 : (data.points ?? ctx.state.points ?? 5),
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: {
+                expectedAnswers,
+                partnerName: data.partnerName || undefined,
+                partnerAvatarUrl: data.partnerAvatarUrl || undefined,
+                images: (data.images || []).filter((img) => img.url && img.url.trim() !== ''),
+                groupNumber: data.groupNumber,
+            },
+            explanation: data.explanation || '',
+        };
+    },
+};

package/dist/components/questions/types/speaking-conversation/transform.js

@@ -1 +1,34 @@
-export const transformSpeakingConversation=r=>{const e=r.content,t=r.answer,n={responder:e?.responder||"STUDENT",...e?.interlocutorAudioUrl&&{interlocutorAudioUrl:e.interlocutorAudioUrl},...e?.partnerAudioUrl&&{partnerAudioUrl:e.partnerAudioUrl},...e?.questionText&&{questionText:e.questionText},isBackup:e?.isBackup||!1},o={expectedAnswers:(()=>{const r=t?.expectedAnswers;return Array.isArray(r)?r.filter(r=>r&&""!==r.trim()):[]})()},a="PARTNER"===e?.responder;return{apiContent:n,apiCorrectAnswer:o,isExample:a,...a&&{totalPoints:0},groupNumber:t?.groupNumber||1,conversationGroupData:{partnerName:t?.partnerName,partnerAvatarUrl:t?.partnerAvatarUrl,images:t?.images||[]}}};
+export const transformSpeakingConversation = (question) => {
+    const contentData = question.content;
+    const answerData = question.answer;
+    const apiContent = {
+        responder: contentData?.responder || 'STUDENT',
+        ...(contentData?.interlocutorAudioUrl && { interlocutorAudioUrl: contentData.interlocutorAudioUrl }),
+        ...(contentData?.partnerAudioUrl && { partnerAudioUrl: contentData.partnerAudioUrl }),
+        ...(contentData?.questionText && { questionText: contentData.questionText }),
+        isBackup: contentData?.isBackup || false,
+    };
+    const expectedAnswers = (() => {
+        const arr = answerData?.expectedAnswers;
+        if (Array.isArray(arr))
+            return arr.filter((s) => s && s.trim() !== '');
+        return [];
+    })();
+    const apiCorrectAnswer = {
+        expectedAnswers,
+    };
+    const isPartner = contentData?.responder === 'PARTNER';
+    return {
+        apiContent,
+        apiCorrectAnswer,
+        isExample: isPartner,
+        ...(isPartner && { totalPoints: 0 }),
+        groupNumber: answerData?.groupNumber || 1,
+        // Always emit group data — SPEAKING_CONVERSATION questions are always grouped
+        conversationGroupData: {
+            partnerName: answerData?.partnerName,
+            partnerAvatarUrl: answerData?.partnerAvatarUrl,
+            images: answerData?.images || [],
+        },
+    };
+};

package/dist/components/questions/types/speaking-cue-card/SpeakingCueCardCreator.js

@@ -1 +1,74 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t,useEffect as s,useRef as a,useCallback as i}from"react";import{Card as n,CardContent as l,CardHeader as c,CardTitle as o}from"../../../../components/ui/card";import{Input as d}from"../../../../components/ui/input";import{Label as m}from"../../../../components/ui/label";import{CueCardEditor as u}from"../../../../components/CueCardEditor";import{CreatorGuide as p}from"../../components/CreatorGuide";import{CreditCard as h}from"lucide-react";export function SpeakingCueCardCreator({initialData:g,onChange:f,onUnsavedChangesChange:b,externalErrors:N,validationRef:C}){const[x,v]=t(g?.cueCardHtml||""),[y,w]=t(g?.points??5),S=a(!0),T=a(g),j=a(null),E=a(f);s(()=>{E.current=f},[f]),s(()=>{const e=setTimeout(()=>{S.current=!1},150);return()=>clearTimeout(e)},[]),s(()=>{JSON.stringify(T.current)!==JSON.stringify(g)&&(T.current=g,S.current=!0,v(g?.cueCardHtml||""),w(g?.points??5),setTimeout(()=>{S.current=!1},150))},[g]);const H=i(()=>({cueCardHtml:x,points:y}),[x,y]);return s(()=>{if(S.current)return;const e=H(),r=JSON.stringify(e);j.current!==r&&(j.current=r,E.current?.(e),b?.(!0))},[H,b]),s(()=>{C&&(C.current={triggerValidation:async()=>!(!x||""===x.trim()),getFormData:()=>H()})},[C,x,y,H]),r("div",{className:"space-y-6",children:[e(p,{colorScheme:"purple",steps:[{text:"Nhập nội dung Cue Card bao gồm chủ đề và các gợi ý (bullet points)",highlight:!0}],tips:["Cue Card nên có 1 chủ đề chính và 3-4 gợi ý (bullet points) theo format IELTS Part 2."]}),r(n,{className:"overflow-hidden border border-slate-200 bg-white shadow-sm",children:[e(c,{className:"border-b border-slate-100 bg-slate-50/50 pb-4",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-purple-100 text-purple-700",children:e(h,{className:"h-4 w-4"})}),e(o,{className:"text-lg font-semibold text-slate-800",children:"Câu hỏi Thẻ gợi ý (Cue Card)"})]})}),r(l,{className:"p-0",children:[r("div",{className:"p-6 space-y-8",children:[r("div",{className:"w-full xl:w-1/3 space-y-1.5 animate-in fade-in zoom-in-95 duration-200",children:[r(m,{htmlFor:"points",className:"text-sm font-semibold text-slate-700",children:["Điểm số ",e("span",{className:"text-red-500",children:"*"})]}),e(d,{id:"points",type:"number",step:"1",min:"1",value:y,onChange:e=>w(parseInt(e.target.value)||0),className:"w-24 border-slate-200 focus:border-blue-400 focus:ring-blue-100"})]}),e("hr",{className:"border-slate-100"}),e("div",{className:"space-y-3",children:e(u,{value:x,onChange:v,label:r(m,{className:"text-sm font-semibold text-slate-700",children:["Nội dung Cue Card ",e("span",{className:"text-red-500",children:"*"})]})})})]}),N&&N.length>0&&e("div",{className:"border-t border-red-100 bg-red-50 p-6",children:e("div",{className:"flex items-start gap-3",children:r("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Cần phải sửa các lỗi sau:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:N.map((r,t)=>e("li",{children:r},t))})]})})})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Input } from '../../../../components/ui/input';
+import { Label } from '../../../../components/ui/label';
+import { CueCardEditor } from '../../../../components/CueCardEditor';
+import { CreatorGuide } from '../../components/CreatorGuide';
+import { CreditCard } from 'lucide-react';
+export function SpeakingCueCardCreator({ initialData, onChange, onUnsavedChangesChange, externalErrors, validationRef, }) {
+    const [htmlContent, setHtmlContent] = useState(initialData?.cueCardHtml || '');
+    const [points, setPoints] = useState(initialData?.points ?? 5);
+    const isInitializingRef = useRef(true);
+    const previousInitialDataRef = useRef(initialData);
+    const previousPayloadRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Set initializing to false after first mount
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            isInitializingRef.current = false;
+        }, 150);
+        return () => clearTimeout(timer);
+    }, []);
+    // Reset form when initialData changes externally
+    useEffect(() => {
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged)
+            return;
+        previousInitialDataRef.current = initialData;
+        isInitializingRef.current = true;
+        setHtmlContent(initialData?.cueCardHtml || '');
+        setPoints(initialData?.points ?? 5);
+        setTimeout(() => {
+            isInitializingRef.current = false;
+        }, 150);
+    }, [initialData]);
+    const buildPayload = useCallback(() => ({
+        cueCardHtml: htmlContent,
+        points,
+    }), [htmlContent, points]);
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        const payload = buildPayload();
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            onChangeRef.current?.(payload);
+            onUnsavedChangesChange?.(true);
+        }
+    }, [buildPayload, onUnsavedChangesChange]);
+    // Handle validation from parent
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    if (!htmlContent || htmlContent.trim() === '') {
+                        return false;
+                    }
+                    return true;
+                },
+                getFormData: () => buildPayload(),
+            };
+        }
+    }, [validationRef, htmlContent, points, buildPayload]);
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "purple", steps: [
+                    { text: 'Nhập nội dung Cue Card bao gồm chủ đề và các gợi ý (bullet points)', highlight: true },
+                ], tips: [
+                    'Cue Card nên có 1 chủ đề chính và 3-4 gợi ý (bullet points) theo format IELTS Part 2.',
+                ] }), _jsxs(Card, { className: "overflow-hidden border border-slate-200 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "border-b border-slate-100 bg-slate-50/50 pb-4", 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-purple-100 text-purple-700", children: _jsx(CreditCard, { className: "h-4 w-4" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-slate-800", children: "C\u00E2u h\u1ECFi Th\u1EBB g\u1EE3i \u00FD (Cue Card)" })] }) }), _jsxs(CardContent, { className: "p-0", children: [_jsxs("div", { className: "p-6 space-y-8", children: [_jsxs("div", { className: "w-full xl:w-1/3 space-y-1.5 animate-in fade-in zoom-in-95 duration-200", children: [_jsxs(Label, { htmlFor: "points", className: "text-sm font-semibold text-slate-700", children: ["\u0110i\u1EC3m s\u1ED1 ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "points", type: "number", step: "1", min: "1", value: points, onChange: (e) => setPoints(parseInt(e.target.value) || 0), className: "w-24 border-slate-200 focus:border-blue-400 focus:ring-blue-100" })] }), _jsx("hr", { className: "border-slate-100" }), _jsx("div", { className: "space-y-3", children: _jsx(CueCardEditor, { value: htmlContent, onChange: setHtmlContent, label: _jsxs(Label, { className: "text-sm font-semibold text-slate-700", children: ["N\u1ED9i dung Cue Card ", _jsx("span", { className: "text-red-500", children: "*" })] }) }) })] }), externalErrors && externalErrors.length > 0 && (_jsx("div", { className: "border-t border-red-100 bg-red-50 p-6", children: _jsx("div", { className: "flex items-start gap-3", children: _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "C\u1EA7n ph\u1EA3i s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] }) }) }))] })] })] }));
+}

package/dist/components/questions/types/speaking-cue-card/register.js

@@ -1 +1,52 @@
-import{SpeakingCueCardCreator as t}from"./SpeakingCueCardCreator";export const speakingCueCardRegistration={component:t,transformInitialData:t=>{const e=t?.answer||{},n=t?.content,a=t?.total_points?parseFloat(t.total_points):t?.points||n?.points||e?.points||5;return{...e,cueCardHtml:n?.cueCardHtml||"",points:a}},getExtraProps:t=>({validationRef:t.validationRef,onUnsavedChangesChange:t.onUnsavedChangesChange}),wrapOnSave:(t,e)=>{const n="object"==typeof e.state.content&&null!==e.state.content?e.state.content:{};return{type:e.questionType,content:{...n,cueCardHtml:t.cueCardHtml},points:t.points??e.state.points??5,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:{},explanation:""}},wrapOnChange:(t,e)=>{const n="object"==typeof e.state.content&&null!==e.state.content?e.state.content:{};return{type:e.questionType,content:{...n,cueCardHtml:t.cueCardHtml},points:t.points??e.state.points??5,level:e.state.level,difficulty:e.state.difficulty,skill:e.state.skill,answer:{},explanation:""}}};
+import { SpeakingCueCardCreator } from './SpeakingCueCardCreator';
+export const speakingCueCardRegistration = {
+    component: SpeakingCueCardCreator,
+    transformInitialData: (initialData) => {
+        const creatorData = initialData?.answer || {};
+        const content = initialData?.content;
+        const points = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (initialData?.points || content?.points || creatorData?.points || 5);
+        return {
+            ...creatorData,
+            cueCardHtml: content?.cueCardHtml || '',
+            points,
+        };
+    },
+    getExtraProps: (ctx) => ({
+        validationRef: ctx.validationRef,
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+    }),
+    wrapOnSave: (data, ctx) => {
+        const existingContent = typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {};
+        return {
+            type: ctx.questionType,
+            content: {
+                ...existingContent,
+                cueCardHtml: data.cueCardHtml,
+            },
+            points: data.points ?? ctx.state.points ?? 5,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: {},
+            explanation: '',
+        };
+    },
+    wrapOnChange: (data, ctx) => {
+        const existingContent = typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {};
+        return {
+            type: ctx.questionType,
+            content: {
+                ...existingContent,
+                cueCardHtml: data.cueCardHtml,
+            },
+            points: data.points ?? ctx.state.points ?? 5,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: {},
+            explanation: '',
+        };
+    },
+};

package/dist/components/questions/types/speaking-cue-card/transform.js

@@ -1 +1,12 @@
-export const transformSpeakingCueCard=t=>{const r=t.content;return{apiContent:{cueCardHtml:r?.cueCardHtml||""},apiCorrectAnswer:{}}};
+export const transformSpeakingCueCard = (question) => {
+    const contentData = question.content;
+    const apiContent = {
+        cueCardHtml: contentData?.cueCardHtml || '',
+    };
+    // SPEAKING_CUE_CARD has no correct answer — it's evaluated by examiner
+    const apiCorrectAnswer = {};
+    return {
+        apiContent,
+        apiCorrectAnswer,
+    };
+};

package/dist/components/questions/types/speaking-describe-image/SpeakingDescribeImageClient.js

@@ -1 +1,10 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Mic as s,CheckCircle2 as a,Info as t,ImageIcon as n,FileQuestion as i}from"lucide-react";import{usePresignedFileUrl as d}from"../../../../shared/lib/hooks";export function SpeakingDescribeImageClient({questionData:l,isReviewMode:c=!1}){const{previewUrl:m}=d(l.imageUrl||"");return r("div",{className:"space-y-4",children:[l.isBackup&&r("div",{className:"inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm",children:[e("span",{children:"🔄"})," Câu hỏi dự phòng"]}),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[e("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 px-5 py-3",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-white shadow-sm",children:e(s,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Mô tả hình ảnh (Speaking)"})]})}),r("div",{className:"p-5 space-y-5",children:[l.question&&r("div",{className:"flex gap-3",children:[e(i,{className:"h-5 w-5 text-indigo-500 shrink-0 mt-0.5"}),e("div",{className:"text-base font-semibold text-gray-800",children:l.question})]}),m?e("div",{className:"w-full max-w-3xl mx-auto rounded-xl overflow-hidden shadow-sm border border-gray-200 bg-gray-50 flex justify-center",children:e("img",{src:m,alt:"Scene",className:"w-[80%] max-h-[400px] object-contain flex-shrink-0"})}):r("div",{className:"flex flex-col items-center justify-center py-10 rounded-xl border border-dashed border-gray-300 bg-gray-50",children:[e(n,{className:"h-8 w-8 text-gray-400 mb-2"}),e("span",{className:"text-sm text-gray-500",children:"Chưa tải hình ảnh mô tả"})]}),r("div",{className:"flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50",children:e(s,{className:"w-4 h-4 text-indigo-400"})}),e("p",{className:"text-xs text-gray-400",children:c&&l.audioUrl?"Audio ghi âm của học sinh (đã lưu)":"Học sinh sẽ nhìn hình ảnh và nhấn nút micro để mô tả"})]}),c&&l.expectedAnswers&&l.expectedAnswers.length>0&&r("div",{className:"rounded-xl border border-green-200 bg-green-50/80 p-4 mt-6",children:[r("div",{className:"flex items-center gap-2 mb-3",children:[e(a,{className:"h-4 w-4 text-green-600"}),e("h4",{className:"text-sm font-semibold text-green-800",children:"Các đáp án tự động (Tham chiếu AI)"})]}),e("div",{className:"space-y-2",children:l.expectedAnswers.map((s,a)=>r("div",{className:"flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2",children:[e("span",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold",children:a+1}),e("span",{className:"text-sm text-green-800",children:s})]},a))})]}),c&&l.explanation&&r("div",{className:"rounded-xl border border-amber-200 bg-amber-50 p-4 mt-2",children:[r("div",{className:"flex items-center gap-2 mb-2",children:[e(t,{className:"h-4 w-4 text-amber-600"}),e("p",{className:"text-sm font-semibold text-amber-800",children:"Giải thích giáo viên"})]}),e("p",{className:"text-sm text-amber-700 leading-relaxed whitespace-pre-wrap",children:l.explanation})]})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mic, CheckCircle2, Info, ImageIcon, FileQuestion } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+export function SpeakingDescribeImageClient({ questionData, isReviewMode = false, }) {
+    const { previewUrl: imageUrl } = usePresignedFileUrl(questionData.imageUrl || '');
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex self-center items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 px-5 py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-white shadow-sm", children: _jsx(Mic, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "M\u00F4 t\u1EA3 h\u00ECnh \u1EA3nh (Speaking)" })] }) }), _jsxs("div", { className: "p-5 space-y-5", children: [questionData.question && (_jsxs("div", { className: "flex gap-3", children: [_jsx(FileQuestion, { className: "h-5 w-5 text-indigo-500 shrink-0 mt-0.5" }), _jsx("div", { className: "text-base font-semibold text-gray-800", children: questionData.question })] })), imageUrl ? (_jsx("div", { className: "w-full max-w-3xl mx-auto rounded-xl overflow-hidden shadow-sm border border-gray-200 bg-gray-50 flex justify-center", children: _jsx("img", { src: imageUrl, alt: "Scene", className: "w-[80%] max-h-[400px] object-contain flex-shrink-0" }) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-10 rounded-xl border border-dashed border-gray-300 bg-gray-50", children: [_jsx(ImageIcon, { className: "h-8 w-8 text-gray-400 mb-2" }), _jsx("span", { className: "text-sm text-gray-500", children: "Ch\u01B0a t\u1EA3i h\u00ECnh \u1EA3nh m\u00F4 t\u1EA3" })] })), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-indigo-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: isReviewMode && questionData.audioUrl
+                                            ? "Audio ghi âm của học sinh (đã lưu)"
+                                            : "Học sinh sẽ nhìn hình ảnh và nhấn nút micro để mô tả" })] }), isReviewMode && questionData.expectedAnswers && questionData.expectedAnswers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4 mt-6", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "C\u00E1c \u0111\u00E1p \u00E1n t\u1EF1 \u0111\u1ED9ng (Tham chi\u1EBFu AI)" })] }), _jsx("div", { className: "space-y-2", children: questionData.expectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, index))) })] })), isReviewMode && questionData.explanation && (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-4 mt-2", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Info, { className: "h-4 w-4 text-amber-600" }), _jsx("p", { className: "text-sm font-semibold text-amber-800", children: "Gi\u1EA3i th\u00EDch gi\u00E1o vi\u00EAn" })] }), _jsx("p", { className: "text-sm text-amber-700 leading-relaxed whitespace-pre-wrap", children: questionData.explanation })] }))] })] })] }));
+}

package/dist/components/questions/types/speaking-describe-image/SpeakingDescribeImageCreator.js

@@ -1 +1,161 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useEffect as s}from"react";import{Button as n}from"../../../../components/ui/button";import{Label as a}from"../../../../components/ui/label";import{Input as i}from"../../../../components/ui/input";import{Textarea as c}from"../../../../components/ui/textarea";import{PointsInput as l}from"../../../../components/ui/points-input";import{Card as o,CardContent as d,CardHeader as m,CardTitle as h}from"../../../../components/ui/card";import{useDebouncedCallback as p,usePresignedFileUrl as g}from"../../../../shared/lib/hooks";import{useReactHookForm as x}from"../../../../shared/lib/hooks/useReactHookForm";import{Plus as u,Trash2 as f,ImageIcon as b,MessageSquareText as N,BookOpen as w}from"lucide-react";import{FileUpload as v}from"../../../../components/ui/file-upload";import{CreatorGuide as y}from"../../components/CreatorGuide";import{speakingDescribeImageFormSchema as A}from"../../../../shared/lib/validation/speaking-describe-image.validation";export function SpeakingDescribeImageCreator({initialData:U,onSave:S,onChange:V,externalErrors:k,validationRef:q}){const j=U,C=x({defaultValues:{question:j?.question||j?.content?.question||"",imageUrl:j?.imageUrl||j?.content?.imageUrl||"",expectedAnswers:(j?.expectedAnswers||j?.correctAnswer?.expectedAnswers)?.length>0?j?.expectedAnswers||j?.correctAnswer?.expectedAnswers:[""],explanation:j?.explanation||"",points:j?.points??5},zodSchema:A,mode:"onBlur"}),J=r(U),O=r(!1),D=r(V),z=r("");s(()=>{D.current=V},[V]);const E=p(e=>{D.current?.(e)},300),F=C.watch("question"),T=C.watch("imageUrl"),G=C.watch("expectedAnswers"),H=C.watch("explanation"),I=C.watch("points"),{previewUrl:K}=g(T||"");s(()=>{q&&(q.current={triggerValidation:async()=>await C.trigger(),getFormData:()=>({question:F,imageUrl:T,expectedAnswers:G,explanation:H,points:I})})},[q,C,F,T,G,H,I]),s(()=>{const e=U,t={question:e?.question||e?.content?.question||"",imageUrl:e?.imageUrl||e?.content?.imageUrl||"",expectedAnswers:(e?.expectedAnswers||e?.correctAnswer?.expectedAnswers)?.length>0?e?.expectedAnswers||e?.correctAnswer?.expectedAnswers:[""],explanation:e?.explanation||"",points:e?.points??5};if(!(JSON.stringify(J.current)!==JSON.stringify(U)))return;J.current=U;const r={question:F,imageUrl:T,expectedAnswers:G,explanation:H,points:I},s=r.points===t.points&&r.explanation===t.explanation&&r.question===t.question&&r.imageUrl===t.imageUrl&&JSON.stringify(r.expectedAnswers)===JSON.stringify(t.expectedAnswers);if(s&&!0===U?.isCompleted)return;!s&&(O.current=!0,C.reset(t),setTimeout(()=>{O.current=!1},150))},[U,C,F,T,G,H,I]);const R=JSON.stringify(G);s(()=>{if(O.current){const e=JSON.stringify({question:F,imageUrl:T,expectedAnswers:G,explanation:H,points:I});return void(z.current=e)}const e={question:F,imageUrl:T,expectedAnswers:G,explanation:H,points:I},t=JSON.stringify(e);z.current!==t&&(z.current=t,E(e))},[F,T,R,H,I,E]);C.handleSubmit(e=>{S?.({...e})});return t("div",{className:"space-y-4",children:[e(y,{colorScheme:"blue",steps:[{text:"Nhập câu hỏi yêu cầu mô tả (VD: Mô tả những hành động đang diễn ra trong hình)"},{text:"Upload hình ảnh học sinh cần mô tả",highlight:!0},{text:"Nhập các ý, đáp án, hoặc keyword kỳ vọng học sinh sẽ nói để hệ thống AI dựa vào đó chấm điểm"},{text:"Thêm giải thích (tùy chọn)"}],tips:["Hãy nhập các expected answers càng chi tiết càng tốt để AI có thể bắt text và đối chiếu trơn tru!"]}),t(o,{className:"overflow-hidden border-0 bg-white",children:[e(m,{className:"px-4 py-3",children:e("div",{className:"flex items-center justify-between",children:t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100",children:e(b,{className:"h-4 w-4 text-gray-600"})}),t("div",{children:[e(h,{className:"text-base font-bold text-gray-900",children:"Nội dung câu hỏi"}),e("p",{className:"text-xs text-gray-500",children:"Nhập câu hỏi và upload hình ảnh cần mô tả"})]})]})})}),t(d,{className:"space-y-3 px-4 pb-4",children:[e("div",{className:"flex items-center gap-6",children:e(l,{...C.register("points",{valueAsNumber:!0}),error:C.hasError("points")?C.getFieldError("points"):void 0})}),t("div",{className:"space-y-2",children:[t(a,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(N,{className:"h-4 w-4 text-blue-500"}),"Câu hỏi",e("span",{className:"text-xs font-normal text-gray-400",children:"(Không bắt buộc)"})]}),e(i,{value:F||"",onChange:e=>C.setValue("question",e.target.value,{shouldValidate:!0}),placeholder:"VD: What is this?",className:"border-gray-200 bg-white transition-all focus:border-blue-300 focus:ring-blue-200"})]}),t("div",{className:"space-y-2",children:[t(a,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(b,{className:"h-4 w-4 text-indigo-500"}),"Hình ảnh cần mô tả"]}),e(v,{id:"imageUrl",label:"",accept:"image/*",value:T,onChange:e=>{C.setValue("imageUrl",e,{shouldValidate:!0})},maxSize:10,placeholder:"Upload hình ảnh",autoUpload:!0,prefix:"speaking/describe-image"}),C.hasError("imageUrl")&&e("p",{className:"text-sm text-red-600",children:C.getFieldError("imageUrl")})]}),K&&e("div",{className:"mt-2 rounded-lg overflow-hidden border border-gray-200 flex justify-center bg-gray-100",children:e("img",{src:K,alt:"Preview",className:"max-h-[300px] object-contain"})}),k&&k.length>0&&t("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:"❌"})}),t("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:k.map((t,r)=>e("li",{children:t},r))})]})]})]})]}),t(o,{className:"overflow-hidden border-0 bg-white",children:[e(m,{className:"px-4 py-3",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100",children:e(N,{className:"h-4 w-4 text-gray-600"})}),t("div",{children:[t(h,{className:"text-base font-bold text-gray-900",children:["Đáp án / Keywords expected ",t("span",{className:"text-xs font-normal text-gray-500",children:["(",G.filter(e=>e.trim()).length," đáp án)"]})]}),e("p",{className:"text-xs text-gray-500",children:"Nhập các ý hoặc từ khóa mà học sinh cần nói"})]})]}),t(n,{variant:"outline",size:"sm",onClick:()=>{const e=C.getValues("expectedAnswers");C.setValue("expectedAnswers",[...e,""])},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",children:[e(u,{className:"h-4 w-4"}),"Thêm dòng"]})]})}),e(d,{className:"space-y-3 px-4 pb-4",children:t("div",{className:"space-y-3",children:[G.map((r,s)=>t("div",{className:"flex items-start gap-3 group/answer",children:[e("div",{className:"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 font-semibold shadow-sm text-sm",children:s+1}),t("div",{className:"flex-1",children:[e(i,{value:r||"",onChange:e=>{const t=[...G];t[s]=e.target.value,C.setValue("expectedAnswers",t,{shouldValidate:!0})},placeholder:"Ví dụ: The boy is kicking a football.",className:"border-gray-200 bg-white transition-all focus:border-green-300 focus:ring-green-200"}),C.formState.errors?.expectedAnswers?.[s]?.message&&e("p",{className:"mt-1 text-sm text-red-500",children:C.formState.errors.expectedAnswers[s]?.message})]}),G.length>1&&e(n,{variant:"ghost",size:"sm",onClick:()=>{const e=G.filter((e,t)=>t!==s);C.setValue("expectedAnswers",e,{shouldValidate:!0})},className:"text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity",children:e(f,{className:"h-4 w-4"})})]},s)),C.formState.errors?.expectedAnswers&&!Array.isArray(C.formState.errors.expectedAnswers)&&e("p",{className:"text-sm text-red-500",children:C.formState.errors.expectedAnswers.message})]})})]}),t(o,{className:"overflow-hidden border-0 bg-white",children:[e(m,{className:"px-4 py-3",children:t("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"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e(h,{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 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 thêm về bức ảnh để giúp học sinh hiểu rõ hơn khi review kết quả."})]})]})}),e(d,{className:"px-4 pb-4",children:e(c,{value:H,onChange:e=>C.setValue("explanation",e.target.value,{shouldValidate:!0}),placeholder:"VD: Câu này học sinh cần phải nhận biết được hành động...",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { Plus, Trash2, ImageIcon, MessageSquareText, BookOpen } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { CreatorGuide } from '../../components/CreatorGuide';
+import { speakingDescribeImageFormSchema, } from '../../../../shared/lib/validation/speaking-describe-image.validation';
+export function SpeakingDescribeImageCreator({ initialData, onSave, onChange, externalErrors, validationRef, }) {
+    const apiData = initialData;
+    const form = useReactHookForm({
+        defaultValues: {
+            question: apiData?.question || apiData?.content?.question || '',
+            imageUrl: apiData?.imageUrl || apiData?.content?.imageUrl || '',
+            expectedAnswers: (apiData?.expectedAnswers || apiData?.correctAnswer?.expectedAnswers)?.length > 0
+                ? (apiData?.expectedAnswers || apiData?.correctAnswer?.expectedAnswers)
+                : [''],
+            explanation: apiData?.explanation || '',
+            points: apiData?.points ?? 5,
+        },
+        zodSchema: speakingDescribeImageFormSchema,
+        mode: 'onBlur',
+    });
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    const watchedQuestion = form.watch('question');
+    const watchedImageUrl = form.watch('imageUrl');
+    const watchedExpectedAnswers = form.watch('expectedAnswers');
+    const watchedExplanation = form.watch('explanation');
+    const watchedPoints = form.watch('points');
+    // Preview uploaded image
+    const { previewUrl: imagePreviewUrl } = usePresignedFileUrl(watchedImageUrl || '');
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return await form.trigger();
+                },
+                getFormData: () => ({
+                    question: watchedQuestion,
+                    imageUrl: watchedImageUrl,
+                    expectedAnswers: watchedExpectedAnswers,
+                    explanation: watchedExplanation,
+                    points: watchedPoints,
+                }),
+            };
+        }
+    }, [validationRef, form, watchedQuestion, watchedImageUrl, watchedExpectedAnswers, watchedExplanation, watchedPoints]);
+    useEffect(() => {
+        const apiD = initialData;
+        const normalizedInitialData = {
+            question: apiD?.question || apiD?.content?.question || '',
+            imageUrl: apiD?.imageUrl || apiD?.content?.imageUrl || '',
+            expectedAnswers: (apiD?.expectedAnswers || apiD?.correctAnswer?.expectedAnswers)?.length > 0
+                ? (apiD?.expectedAnswers || apiD?.correctAnswer?.expectedAnswers)
+                : [''],
+            explanation: apiD?.explanation || '',
+            points: apiD?.points ?? 5,
+        };
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged) {
+            return;
+        }
+        previousInitialDataRef.current = initialData;
+        const currentFormData = {
+            question: watchedQuestion,
+            imageUrl: watchedImageUrl,
+            expectedAnswers: watchedExpectedAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+        };
+        const isEchoFromOnChange = currentFormData.points === normalizedInitialData.points &&
+            currentFormData.explanation === normalizedInitialData.explanation &&
+            currentFormData.question === normalizedInitialData.question &&
+            currentFormData.imageUrl === normalizedInitialData.imageUrl &&
+            JSON.stringify(currentFormData.expectedAnswers) === JSON.stringify(normalizedInitialData.expectedAnswers);
+        const wasJustSaved = initialData?.isCompleted === true;
+        if (isEchoFromOnChange && wasJustSaved) {
+            return;
+        }
+        const shouldReset = !isEchoFromOnChange;
+        if (shouldReset) {
+            isInitializingRef.current = true;
+            form.reset(normalizedInitialData);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [initialData, form, watchedQuestion, watchedImageUrl, watchedExpectedAnswers, watchedExplanation, watchedPoints]);
+    const watchedExpectedAnswersString = JSON.stringify(watchedExpectedAnswers);
+    useEffect(() => {
+        if (isInitializingRef.current) {
+            const currentPayload = JSON.stringify({
+                question: watchedQuestion,
+                imageUrl: watchedImageUrl,
+                expectedAnswers: watchedExpectedAnswers,
+                explanation: watchedExplanation,
+                points: watchedPoints,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        const payload = {
+            question: watchedQuestion,
+            imageUrl: watchedImageUrl,
+            expectedAnswers: watchedExpectedAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+        };
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedQuestion,
+        watchedImageUrl,
+        watchedExpectedAnswersString,
+        watchedExplanation,
+        watchedPoints,
+        debouncedOnChange,
+    ]);
+    const handleSave = form.handleSubmit((data) => {
+        onSave?.({
+            ...data,
+        });
+    });
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(CreatorGuide, { colorScheme: "blue", steps: [
+                    { text: 'Nhập câu hỏi yêu cầu mô tả (VD: Mô tả những hành động đang diễn ra trong hình)' },
+                    { text: 'Upload hình ảnh học sinh cần mô tả', highlight: true },
+                    { text: 'Nhập các ý, đáp án, hoặc keyword kỳ vọng học sinh sẽ nói để hệ thống AI dựa vào đó chấm điểm' },
+                    { text: 'Thêm giải thích (tùy chọn)' },
+                ], tips: ['Hãy nhập các expected answers càng chi tiết càng tốt để AI có thể bắt text và đối chiếu trơn tru!'] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsx("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-gray-100", children: _jsx(ImageIcon, { className: "h-4 w-4 text-gray-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "N\u1ED9i dung c\u00E2u h\u1ECFi" }), _jsx("p", { className: "text-xs text-gray-500", children: "Nh\u1EADp c\u00E2u h\u1ECFi v\u00E0 upload h\u00ECnh \u1EA3nh c\u1EA7n m\u00F4 t\u1EA3" })] })] }) }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsx("div", { className: "flex items-center gap-6", children: _jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.hasError('points') ? form.getFieldError('points') : undefined }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquareText, { className: "h-4 w-4 text-blue-500" }), "C\u00E2u h\u1ECFi", _jsx("span", { className: "text-xs font-normal text-gray-400", children: "(Kh\u00F4ng b\u1EAFt bu\u1ED9c)" })] }), _jsx(Input, { value: watchedQuestion || '', onChange: (e) => form.setValue('question', e.target.value, { shouldValidate: true }), placeholder: "VD: What is this?", className: "border-gray-200 bg-white transition-all focus:border-blue-300 focus:ring-blue-200" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh c\u1EA7n m\u00F4 t\u1EA3"] }), _jsx(FileUpload, { id: "imageUrl", label: "", accept: "image/*", value: watchedImageUrl, onChange: (url) => {
+                                            form.setValue('imageUrl', url, { shouldValidate: true });
+                                        }, maxSize: 10, placeholder: "Upload h\u00ECnh \u1EA3nh", autoUpload: true, prefix: "speaking/describe-image" }), form.hasError('imageUrl') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('imageUrl') }))] }), imagePreviewUrl && (_jsx("div", { className: "mt-2 rounded-lg overflow-hidden border border-gray-200 flex justify-center bg-gray-100", children: _jsx("img", { src: imagePreviewUrl, alt: "Preview", className: "max-h-[300px] object-contain" }) })), 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", 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-gray-100", children: _jsx(MessageSquareText, { className: "h-4 w-4 text-gray-600" }) }), _jsxs("div", { children: [_jsxs(CardTitle, { className: "text-base font-bold text-gray-900", children: ["\u0110\u00E1p \u00E1n / Keywords expected ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", watchedExpectedAnswers.filter((a) => a.trim()).length, " \u0111\u00E1p \u00E1n)"] })] }), _jsx("p", { className: "text-xs text-gray-500", children: "Nh\u1EADp c\u00E1c \u00FD ho\u1EB7c t\u1EEB kh\u00F3a m\u00E0 h\u1ECDc sinh c\u1EA7n n\u00F3i" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                                        const currentAnswers = form.getValues('expectedAnswers');
+                                        form.setValue('expectedAnswers', [...currentAnswers, '']);
+                                    }, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm d\u00F2ng"] })] }) }), _jsx(CardContent, { className: "space-y-3 px-4 pb-4", children: _jsxs("div", { className: "space-y-3", children: [watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-3 group/answer", children: [_jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 font-semibold shadow-sm text-sm", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsx(Input, { value: answer || '', onChange: (e) => {
+                                                        const newAnswers = [...watchedExpectedAnswers];
+                                                        newAnswers[index] = e.target.value;
+                                                        form.setValue('expectedAnswers', newAnswers, { shouldValidate: true });
+                                                    }, placeholder: `Ví dụ: The boy is kicking a football.`, className: "border-gray-200 bg-white transition-all focus:border-green-300 focus:ring-green-200" }), form.formState.errors?.expectedAnswers?.[index]?.message && (_jsx("p", { className: "mt-1 text-sm text-red-500", children: form.formState.errors.expectedAnswers[index]?.message }))] }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                const newAnswers = watchedExpectedAnswers.filter((_, i) => i !== index);
+                                                form.setValue('expectedAnswers', newAnswers, { shouldValidate: true });
+                                            }, className: "text-red-400 hover:text-red-600 hover:bg-red-50 opacity-0 group-hover/answer:opacity-100 transition-opacity", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index))), form.formState.errors?.expectedAnswers && !Array.isArray(form.formState.errors.expectedAnswers) && (_jsx("p", { className: "text-sm text-red-500", children: form.formState.errors.expectedAnswers.message }))] }) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch th\u00EAm v\u1EC1 b\u1EE9c \u1EA3nh \u0111\u1EC3 gi\u00FAp h\u1ECDc sinh hi\u1EC3u r\u00F5 h\u01A1n khi review k\u1EBFt qu\u1EA3." })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { value: watchedExplanation, onChange: (e) => form.setValue('explanation', e.target.value, { shouldValidate: true }), placeholder: "VD: C\u00E2u n\u00E0y h\u1ECDc sinh c\u1EA7n ph\u1EA3i nh\u1EADn bi\u1EBFt \u0111\u01B0\u1EE3c h\u00E0nh \u0111\u1ED9ng...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+}

package/dist/components/questions/types/speaking-describe-image/index.js

@@ -1 +1,2 @@
-export*from"./SpeakingDescribeImageCreator";export*from"./SpeakingDescribeImageClient";
+export * from './SpeakingDescribeImageCreator';
+export * from './SpeakingDescribeImageClient';

package/dist/components/questions/types/speaking-describe-image/register.js

@@ -1 +1,69 @@
-import{SpeakingDescribeImageCreator as e}from"./SpeakingDescribeImageCreator";export const speakingDescribeImageRegistration={component:e,transformInitialData:e=>{let t=e?.answer;const n=e?.content,s=e?.answer||e?.correctAnswer||e?.correct_answer,a=e?.total_points?parseFloat(e.total_points):e?.points||n?.points||s?.points||1,o=e?.explanation||n?.explanation||s?.explanation||"";if(n&&"object"==typeof n&&void 0!==n.imageUrl){const e=s?.expectedAnswers||[];t={question:n.question||"",imageUrl:n.imageUrl||"",expectedAnswers:e,explanation:o,points:a}}else s&&"object"==typeof s&&void 0!==s.expectedAnswers&&(t={...s,question:s.question||n?.question||"",imageUrl:s.imageUrl||n?.imageUrl||"",explanation:o,points:a});return t},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef}),wrapOnSave:(e,t)=>({type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},question:e.question,imageUrl:e.imageUrl},points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:e.expectedAnswers},explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:{..."object"==typeof t.state.content&&null!==t.state.content?t.state.content:{},question:e.question,imageUrl:e.imageUrl},points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:{expectedAnswers:e.expectedAnswers},explanation:e?.explanation||""})};
+import { SpeakingDescribeImageCreator } from './SpeakingDescribeImageCreator';
+export const speakingDescribeImageRegistration = {
+    component: SpeakingDescribeImageCreator,
+    transformInitialData: (initialData) => {
+        let creatorData = initialData?.answer;
+        const content = initialData?.content;
+        const answer = initialData?.answer || initialData?.correctAnswer || initialData?.correct_answer;
+        const points = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (initialData?.points || content?.points || answer?.points || 1);
+        const explanation = initialData?.explanation || content?.explanation || answer?.explanation || '';
+        if (content && typeof content === 'object' && content.imageUrl !== undefined) {
+            const expectedAnswers = answer?.expectedAnswers || [];
+            creatorData = {
+                question: content.question || '',
+                imageUrl: content.imageUrl || '',
+                expectedAnswers: expectedAnswers,
+                explanation,
+                points,
+            };
+        }
+        else if (answer && typeof answer === 'object' && answer.expectedAnswers !== undefined) {
+            creatorData = {
+                ...answer,
+                question: answer.question || content?.question || '',
+                imageUrl: answer.imageUrl || content?.imageUrl || '',
+                explanation,
+                points,
+            };
+        }
+        return creatorData;
+    },
+    getExtraProps: (ctx) => ({
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+        validationRef: ctx.validationRef,
+    }),
+    wrapOnSave: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            question: data.question,
+            imageUrl: data.imageUrl,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: {
+            expectedAnswers: data.expectedAnswers,
+        },
+        explanation: data?.explanation || '',
+    }),
+    wrapOnChange: (data, ctx) => ({
+        type: ctx.questionType,
+        content: {
+            ...(typeof ctx.state.content === 'object' && ctx.state.content !== null ? ctx.state.content : {}),
+            question: data.question,
+            imageUrl: data.imageUrl,
+        },
+        points: data?.points ?? ctx.state.points ?? 1,
+        level: ctx.state.level,
+        difficulty: ctx.state.difficulty,
+        skill: ctx.state.skill,
+        answer: {
+            expectedAnswers: data.expectedAnswers,
+        },
+        explanation: data?.explanation || '',
+    }),
+};