@tinyweb_dev/oe-exam-sdk 0.1.1 → 0.1.2

package/dist/components/questions/types/word-fill-paragraph/WordFillParagraphWrapper.js

@@ -1,28 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { WordFillParagraphCreator } from './WordFillParagraphCreator';
-/**
- * Detects whether saved data uses per-blank options (WITH_OPTIONS) or a shared
- * word bank (WITH_WORD_BANK) and forwards the correct `viewMode` to the unified
- * `WordFillParagraphCreator`.
- */
-export function WordFillParagraphWrapper(props) {
-    let mode = props.viewMode;
-    // Auto-detect viewMode from initialData if not explicitly provided.
-    // After transformInitialData, the data is flat (wordBank at top level),
-    // so we also check anyData.wordBank in addition to nested paths.
-    if (!mode && props.initialData) {
-        const anyData = props.initialData;
-        const wordBank = anyData.content?.wordBank || anyData.answer?.wordBank || anyData.wordBank;
-        if (wordBank &&
-            Array.isArray(wordBank) &&
-            wordBank.length > 0) {
-            if (Array.isArray(wordBank[0]?.options)) {
-                mode = 'WITH_OPTIONS';
-            }
-            else if (wordBank[0]?.word !== undefined) {
-                mode = 'WITH_WORD_BANK';
-            }
-        }
-    }
-    return _jsx(WordFillParagraphCreator, { ...props, viewMode: mode });
-}
+import{jsx as r}from"react/jsx-runtime";import{WordFillParagraphCreator as a}from"./WordFillParagraphCreator";export function WordFillParagraphWrapper(o){let i=o.viewMode;if(!i&&o.initialData){const r=o.initialData,a=r.content?.wordBank||r.answer?.wordBank||r.wordBank;a&&Array.isArray(a)&&a.length>0&&(Array.isArray(a[0]?.options)?i="WITH_OPTIONS":void 0!==a[0]?.word&&(i="WITH_WORD_BANK"))}return r(a,{...o,viewMode:i})}

package/dist/components/questions/types/word-fill-paragraph/index.js

@@ -1,2 +1 @@
-export * from './WordFillParagraphCreator';
-export * from './WordFillParagraphClient';
+export*from"./WordFillParagraphCreator";export*from"./WordFillParagraphClient";

package/dist/components/questions/types/word-fill-paragraph/register.js

@@ -1,136 +1 @@
-import { WordFillParagraphWrapper } from './WordFillParagraphWrapper';
-import { WordFillParagraphCreator } from './WordFillParagraphCreator';
-export const wordFillParagraphRegistration = {
-    component: WordFillParagraphWrapper,
-    transformInitialData: (initialData) => {
-        const content = initialData?.content || {};
-        const answer = initialData?.answer || {};
-        const correctAnswer = initialData?.correctAnswer || answer?.correctAnswer || {};
-        const points = initialData?.total_points
-            ? parseFloat(initialData.total_points)
-            : (answer?.points || initialData?.points || 1);
-        const explanation = initialData?.explanation || answer?.explanation || '';
-        // Group data from questionGroup payload
-        const groupPayload = initialData?.questionGroup?.payload;
-        return {
-            title: content?.title || answer?.title || '',
-            imageUrl: content?.imageUrl || answer?.imageUrl || '',
-            paragraph: content?.paragraph || answer?.paragraph || '',
-            wordBank: content?.wordBank || answer?.wordBank || [],
-            answers: correctAnswer?.answers || answer?.answers || [],
-            exampleAnswer: (() => {
-                const sources = [
-                    correctAnswer?.example,
-                    answer?.example,
-                    answer?.exampleAnswer,
-                    content?.exampleAnswer,
-                ];
-                for (const src of sources) {
-                    if (Array.isArray(src) && src.length > 0)
-                        return src;
-                    if (typeof src === 'string' && src)
-                        return [src];
-                }
-                return [];
-            })(),
-            isExample: initialData?.isExample || answer?.isExample || false,
-            caseSensitive: correctAnswer?.caseSensitive ?? answer?.caseSensitive ?? false,
-            emailFrom: content?.emailFrom || answer?.emailFrom || '',
-            emailTo: content?.emailTo || answer?.emailTo || '',
-            explanation,
-            points,
-            // Group shared fields
-            groupTitle: groupPayload?.title || answer?.groupTitle || '',
-            groupSubtitle: groupPayload?.subtitle || answer?.groupSubtitle || '',
-            groupContent: groupPayload?.content || answer?.groupContent || '',
-            groupImageUrl: groupPayload?.imageUrl || answer?.groupImageUrl || '',
-        };
-    },
-    getExtraProps: (ctx) => ({
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        validationRef: ctx.validationRef,
-        // Narrow to the modes the wrapper/creator understands; legacy values become null.
-        viewMode: ctx.viewMode === 'WITH_WORD_BANK' || ctx.viewMode === 'WITH_OPTIONS' || ctx.viewMode === 'DEFAULT' || ctx.viewMode === 'EMAIL'
-            ? ctx.viewMode
-            : null,
-        groupConfig: ctx.groupConfig,
-        groups: ctx.groups,
-        questionIndexInPart: ctx.questionIndexInPart,
-        partId: ctx.partId,
-    }),
-    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 || '',
-    }),
-};
-/**
- * Registration for WITH_OPTIONS mode — uses the same unified creator/wrapper
- * as the standard word-fill-paragraph, but the component is the options-mode
- * creator directly (no viewMode detection needed since it's always WITH_OPTIONS).
- */
-export const wordFillParagraphWithOptionsRegistration = {
-    component: WordFillParagraphCreator,
-    transformInitialData: (initialData) => {
-        const content = initialData?.content || {};
-        const answer = initialData?.answer || {};
-        const correctAnswer = initialData?.correctAnswer || answer?.correctAnswer || {};
-        const points = initialData?.total_points
-            ? parseFloat(initialData.total_points)
-            : (answer?.points || initialData?.points || 1);
-        const explanation = initialData?.explanation || answer?.explanation || '';
-        return {
-            title: content?.title || answer?.title || '',
-            imageUrl: content?.imageUrl || answer?.imageUrl || '',
-            paragraph: content?.paragraph || answer?.paragraph || '',
-            wordBank: content?.wordBank || answer?.wordBank || [],
-            answers: correctAnswer?.answers || answer?.answers || [],
-            caseSensitive: correctAnswer?.caseSensitive ?? answer?.caseSensitive ?? false,
-            explanation,
-            points,
-        };
-    },
-    getExtraProps: (ctx) => ({
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        validationRef: ctx.validationRef,
-        groupConfig: ctx.groupConfig,
-        groups: ctx.groups,
-        questionIndexInPart: ctx.questionIndexInPart,
-        partId: ctx.partId,
-    }),
-    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 || '',
-    }),
-};
+import{WordFillParagraphWrapper as e}from"./WordFillParagraphWrapper";import{WordFillParagraphCreator as t}from"./WordFillParagraphCreator";export const wordFillParagraphRegistration={component:e,transformInitialData:e=>{const t=e?.content||{},a=e?.answer||{},n=e?.correctAnswer||a?.correctAnswer||{},i=e?.total_points?parseFloat(e.total_points):a?.points||e?.points||1,o=e?.explanation||a?.explanation||"",r=e?.questionGroup?.payload;return{title:t?.title||a?.title||"",imageUrl:t?.imageUrl||a?.imageUrl||"",paragraph:t?.paragraph||a?.paragraph||"",wordBank:t?.wordBank||a?.wordBank||[],answers:n?.answers||a?.answers||[],exampleAnswer:(()=>{const e=[n?.example,a?.example,a?.exampleAnswer,t?.exampleAnswer];for(const t of e){if(Array.isArray(t)&&t.length>0)return t;if("string"==typeof t&&t)return[t]}return[]})(),isExample:e?.isExample||a?.isExample||!1,caseSensitive:n?.caseSensitive??a?.caseSensitive??!1,emailFrom:t?.emailFrom||a?.emailFrom||"",emailTo:t?.emailTo||a?.emailTo||"",explanation:o,points:i,groupTitle:r?.title||a?.groupTitle||"",groupSubtitle:r?.subtitle||a?.groupSubtitle||"",groupContent:r?.content||a?.groupContent||"",groupImageUrl:r?.imageUrl||a?.groupImageUrl||""}},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef,viewMode:"WITH_WORD_BANK"===e.viewMode||"WITH_OPTIONS"===e.viewMode||"DEFAULT"===e.viewMode||"EMAIL"===e.viewMode?e.viewMode:null,groupConfig:e.groupConfig,groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId}),wrapOnSave:(e,t)=>({type:t.questionType,content:t.state.content,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:e,explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:t.state.content,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:e,explanation:e?.explanation||""})};export const wordFillParagraphWithOptionsRegistration={component:t,transformInitialData:e=>{const t=e?.content||{},a=e?.answer||{},n=e?.correctAnswer||a?.correctAnswer||{},i=e?.total_points?parseFloat(e.total_points):a?.points||e?.points||1,o=e?.explanation||a?.explanation||"";return{title:t?.title||a?.title||"",imageUrl:t?.imageUrl||a?.imageUrl||"",paragraph:t?.paragraph||a?.paragraph||"",wordBank:t?.wordBank||a?.wordBank||[],answers:n?.answers||a?.answers||[],caseSensitive:n?.caseSensitive??a?.caseSensitive??!1,explanation:o,points:i}},getExtraProps:e=>({onUnsavedChangesChange:e.onUnsavedChangesChange,validationRef:e.validationRef,groupConfig:e.groupConfig,groups:e.groups,questionIndexInPart:e.questionIndexInPart,partId:e.partId}),wrapOnSave:(e,t)=>({type:t.questionType,content:t.state.content,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:e,explanation:e?.explanation||""}),wrapOnChange:(e,t)=>({type:t.questionType,content:t.state.content,points:e?.points??t.state.points??1,level:t.state.level,difficulty:t.state.difficulty,skill:t.state.skill,answer:e,explanation:e?.explanation||""})};

package/dist/components/questions/types/word-fill-paragraph/transform.js

@@ -1,56 +1 @@
-/**
- * Transform WORD_FILL_PARAGRAPH_WITH_WORD_BANK creator data → API format
- * Creator: { title, paragraph, wordBank, answers, exampleAnswer, imageUrl }
- * API: content: { title, paragraph, wordBank, imageUrl }, correctAnswer: { example, answers }
- */
-export const transformWordFillParagraph = (question) => {
-    const answerData = question.answer;
-    if (!answerData?.paragraph || !answerData?.answers) {
-        return { apiContent: {}, apiCorrectAnswer: {} };
-    }
-    const hasGroupData = !!(answerData.groupTitle ||
-        answerData.groupSubtitle ||
-        answerData.groupContent ||
-        answerData.groupImageUrl);
-    const apiContent = {
-        paragraph: answerData.paragraph,
-        wordBank: answerData.wordBank || [],
-    };
-    if (!hasGroupData && answerData.title) {
-        apiContent.title = answerData.title;
-    }
-    if (answerData.exampleAnswer?.length > 0) {
-        apiContent.exampleAnswer = answerData.exampleAnswer;
-    }
-    if (!hasGroupData && answerData.imageUrl) {
-        apiContent.imageUrl = answerData.imageUrl;
-    }
-    if (answerData.emailFrom) {
-        apiContent.emailFrom = answerData.emailFrom;
-    }
-    if (answerData.emailTo) {
-        apiContent.emailTo = answerData.emailTo;
-    }
-    const apiCorrectAnswer = {
-        answers: answerData.answers,
-        caseSensitive: answerData.caseSensitive || false,
-    };
-    if (answerData.exampleAnswer !== undefined) {
-        apiCorrectAnswer.example = answerData.exampleAnswer || [];
-    }
-    const basicGroupData = hasGroupData
-        ? {
-            title: answerData.groupTitle || '',
-            subtitle: answerData.groupSubtitle || '',
-            content: answerData.groupContent || '',
-            imageUrl: answerData.groupImageUrl || '',
-        }
-        : undefined;
-    return {
-        apiContent,
-        apiCorrectAnswer,
-        isExample: answerData.isExample || false,
-        basicGroupData,
-        groupNumber: answerData.groupNumber || 1,
-    };
-};
+export const transformWordFillParagraph=e=>{const r=e.answer;if(!r?.paragraph||!r?.answers)return{apiContent:{},apiCorrectAnswer:{}};const a=!!(r.groupTitle||r.groupSubtitle||r.groupContent||r.groupImageUrl),t={paragraph:r.paragraph,wordBank:r.wordBank||[]};!a&&r.title&&(t.title=r.title),r.exampleAnswer?.length>0&&(t.exampleAnswer=r.exampleAnswer),!a&&r.imageUrl&&(t.imageUrl=r.imageUrl),r.emailFrom&&(t.emailFrom=r.emailFrom),r.emailTo&&(t.emailTo=r.emailTo);const o={answers:r.answers,caseSensitive:r.caseSensitive||!1};void 0!==r.exampleAnswer&&(o.example=r.exampleAnswer||[]);const i=a?{title:r.groupTitle||"",subtitle:r.groupSubtitle||"",content:r.groupContent||"",imageUrl:r.groupImageUrl||""}:void 0;return{apiContent:t,apiCorrectAnswer:o,isExample:r.isExample||!1,basicGroupData:i,groupNumber:r.groupNumber||1}};

package/dist/components/questions/types/word-fill-structured-form/WordFillStructuredFormClient.js

@@ -1,138 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { Check, X, FileText } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { cn } from '../../../../shared/lib/utils';
-function parseStyleAttribute(styleValue) {
-    return styleValue
-        .split(';')
-        .map((rule) => rule.trim())
-        .filter(Boolean)
-        .reduce((styles, rule) => {
-        const [property, value] = rule.split(':').map((part) => part.trim());
-        if (!property || !value)
-            return styles;
-        const reactProperty = property.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
-        styles[reactProperty] = value;
-        return styles;
-    }, {});
-}
-export function WordFillStructuredFormClient({ questionData, isReviewMode = false, userAnswer, onAnswerChange, autoFillCorrectAnswers = false, explanation, }) {
-    const { title = '', imageUrl, content = '', answers = {}, caseSensitive = false, } = questionData;
-    const [filledAnswers, setFilledAnswers] = useState(() => {
-        if (userAnswer)
-            return { ...userAnswer };
-        if (autoFillCorrectAnswers)
-            return { ...answers };
-        return {};
-    });
-    useEffect(() => {
-        if (userAnswer) {
-            setFilledAnswers({ ...userAnswer });
-        }
-    }, [userAnswer]);
-    const { previewUrl: imagePreviewUrl, isLoading: imageLoading } = usePresignedFileUrl(imageUrl || '');
-    const expectedBlankKeys = useMemo(() => {
-        const keys = new Set();
-        const regex = /\{([\w\d]+)\}/g;
-        let match;
-        while ((match = regex.exec(content)) !== null) {
-            keys.add(match[1]);
-        }
-        return Array.from(keys).sort((a, b) => {
-            const numA = parseInt(a);
-            const numB = parseInt(b);
-            if (!isNaN(numA) && !isNaN(numB))
-                return numA - numB;
-            return a.localeCompare(b);
-        });
-    }, [content]);
-    const allFilled = expectedBlankKeys.every(k => filledAnswers[k]?.trim());
-    const isAllCorrect = isReviewMode && expectedBlankKeys.every(k => {
-        const userVal = (filledAnswers[k] || '').trim();
-        const correctVal = (answers[k] || '').trim();
-        return caseSensitive ? userVal === correctVal : userVal.toLowerCase() === correctVal.toLowerCase();
-    });
-    const displayExplanation = explanation || questionData.explanation;
-    const handleInputChange = useCallback((key, value) => {
-        if (isReviewMode)
-            return;
-        setFilledAnswers(prev => ({ ...prev, [key]: value }));
-        onAnswerChange?.(key, value);
-    }, [isReviewMode, onAnswerChange]);
-    const renderBlank = useCallback((key, reactKey) => {
-        const filled = filledAnswers[key] || '';
-        const correctAnswer = answers[key] || '';
-        const normalizedFilled = caseSensitive ? filled.trim() : filled.trim().toLowerCase();
-        const normalizedCorrect = caseSensitive ? correctAnswer.trim() : correctAnswer.trim().toLowerCase();
-        const isCorrectFill = isReviewMode && normalizedFilled === normalizedCorrect;
-        const isWrongFill = isReviewMode && !!filled && normalizedFilled !== normalizedCorrect;
-        return (_jsxs("span", { className: "relative mx-1 inline-flex items-center align-baseline", children: [_jsx("span", { className: "absolute -top-4 left-1 text-[10px] font-semibold text-gray-400", children: key }), _jsx("input", { type: "text", value: filled, onChange: (e) => handleInputChange(key, e.target.value), disabled: isReviewMode, placeholder: "______", className: cn('inline-block min-w-[90px] max-w-[160px] border-b-2 bg-transparent px-1 py-0.5 text-center text-sm font-semibold outline-none transition-all', isReviewMode
-                        ? isCorrectFill
-                            ? 'border-green-400 text-green-700'
-                            : isWrongFill
-                                ? 'border-red-400 text-red-700'
-                                : 'border-gray-300 text-gray-400'
-                        : 'border-gray-300 text-gray-800 focus:border-teal-500 focus:ring-0') }), isReviewMode && filled && (isCorrectFill
-                    ? _jsx(Check, { className: "ml-0.5 h-3.5 w-3.5 text-green-600" })
-                    : _jsx(X, { className: "ml-0.5 h-3.5 w-3.5 text-red-600" }))] }, reactKey));
-    }, [answers, caseSensitive, filledAnswers, handleInputChange, isReviewMode]);
-    const renderedContent = useMemo(() => {
-        if (typeof window === 'undefined') {
-            return content;
-        }
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(content || '<p></p>', 'text/html');
-        const placeholderRegex = /\{([\w\d]+)\}/g;
-        const renderNode = (node, path) => {
-            if (node.nodeType === Node.TEXT_NODE) {
-                const text = node.textContent || '';
-                const parts = [];
-                let lastIndex = 0;
-                let match;
-                placeholderRegex.lastIndex = 0;
-                while ((match = placeholderRegex.exec(text)) !== null) {
-                    if (match.index > lastIndex) {
-                        parts.push(text.slice(lastIndex, match.index));
-                    }
-                    parts.push(renderBlank(match[1], `${path}-blank-${match.index}`));
-                    lastIndex = match.index + match[0].length;
-                }
-                if (lastIndex < text.length) {
-                    parts.push(text.slice(lastIndex));
-                }
-                if (parts.length === 0)
-                    return null;
-                if (parts.length === 1)
-                    return parts[0];
-                return _jsx(React.Fragment, { children: parts }, path);
-            }
-            if (node.nodeType !== Node.ELEMENT_NODE) {
-                return null;
-            }
-            const element = node;
-            const tagName = element.tagName.toLowerCase();
-            const props = { key: path };
-            Array.from(element.attributes).forEach((attr) => {
-                if (attr.name === 'class') {
-                    props.className = attr.value;
-                    return;
-                }
-                if (attr.name === 'style') {
-                    props.style = parseStyleAttribute(attr.value);
-                    return;
-                }
-                props[attr.name] = attr.value;
-            });
-            const children = Array.from(element.childNodes)
-                .map((child, index) => renderNode(child, `${path}-${index}`))
-                .filter((child) => child !== null);
-            return React.createElement(tagName, props, ...children);
-        };
-        return Array.from(doc.body.childNodes)
-            .map((node, index) => renderNode(node, `root-${index}`))
-            .filter((node) => node !== null);
-    }, [content, renderBlank]);
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white 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-teal-500 to-cyan-600 text-white shadow-sm", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o bi\u1EC3u m\u1EABu c\u00F3 c\u1EA5u tr\u00FAc" })] }), isReviewMode && allFilled && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAllCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isAllCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAllCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-5 p-5", children: [title && (_jsx("h2", { className: "text-center text-xl font-bold text-gray-900", children: title })), (imagePreviewUrl || imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: imageLoading ? (_jsx("div", { className: "flex h-48 w-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-teal-500" }) })) : (_jsx("img", { src: imagePreviewUrl || imageUrl, alt: title, className: "max-h-56 w-auto object-contain p-2" })) }) })), _jsx("div", { className: "structured-form-content space-y-2 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5 text-base leading-loose text-gray-800", children: renderedContent }), isReviewMode && !isAllCorrect && (_jsxs("div", { className: "rounded-lg border border-green-200 bg-green-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-green-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: expectedBlankKeys.map((key) => (_jsxs("span", { className: "rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800", children: [`{${key}}`, ": ", answers[key]] }, key))) })] })), isReviewMode && displayExplanation && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wider text-blue-600", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-blue-800", children: displayExplanation })] }))] })] }) }));
-}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t,{useState as a,useEffect as n,useMemo as s,useCallback as l}from"react";import{Check as o,X as i,FileText as d}from"lucide-react";import{usePresignedFileUrl as c}from"../../../../shared/lib/hooks";import{cn as m}from"../../../../shared/lib/utils";export function WordFillStructuredFormClient({questionData:g,isReviewMode:u=!1,userAnswer:p,onAnswerChange:x,autoFillCorrectAnswers:b=!1,explanation:h}){const{title:f="",imageUrl:y,content:N="",answers:w={},caseSensitive:v=!1}=g,[C,j]=a(()=>p?{...p}:b?{...w}:{});n(()=>{p&&j({...p})},[p]);const{previewUrl:E,isLoading:_}=c(y||""),A=s(()=>{const e=new Set,r=/\{([\w\d]+)\}/g;let t;for(;null!==(t=r.exec(N));)e.add(t[1]);return Array.from(e).sort((e,r)=>{const t=parseInt(e),a=parseInt(r);return isNaN(t)||isNaN(a)?e.localeCompare(r):t-a})},[N]),L=A.every(e=>C[e]?.trim()),k=u&&A.every(e=>{const r=(C[e]||"").trim(),t=(w[e]||"").trim();return v?r===t:r.toLowerCase()===t.toLowerCase()}),$=h||g.explanation,F=l((e,r)=>{u||(j(t=>({...t,[e]:r})),x?.(e,r))},[u,x]),S=l((t,a)=>{const n=C[t]||"",s=w[t]||"",l=v?n.trim():n.trim().toLowerCase(),d=v?s.trim():s.trim().toLowerCase(),c=u&&l===d,g=u&&!!n&&l!==d;return r("span",{className:"relative mx-1 inline-flex items-center align-baseline",children:[e("span",{className:"absolute -top-4 left-1 text-[10px] font-semibold text-gray-400",children:t}),e("input",{type:"text",value:n,onChange:e=>F(t,e.target.value),disabled:u,placeholder:"______",className:m("inline-block min-w-[90px] max-w-[160px] border-b-2 bg-transparent px-1 py-0.5 text-center text-sm font-semibold outline-none transition-all",u?c?"border-green-400 text-green-700":g?"border-red-400 text-red-700":"border-gray-300 text-gray-400":"border-gray-300 text-gray-800 focus:border-teal-500 focus:ring-0")}),u&&n&&(c?e(o,{className:"ml-0.5 h-3.5 w-3.5 text-green-600"}):e(i,{className:"ml-0.5 h-3.5 w-3.5 text-red-600"}))]},a)},[w,v,C,F,u]),T=s(()=>{if("undefined"==typeof window)return N;const r=(new DOMParser).parseFromString(N||"<p></p>","text/html"),a=/\{([\w\d]+)\}/g,n=(r,s)=>{if(r.nodeType===Node.TEXT_NODE){const n=r.textContent||"",l=[];let o,i=0;for(a.lastIndex=0;null!==(o=a.exec(n));)o.index>i&&l.push(n.slice(i,o.index)),l.push(S(o[1],`${s}-blank-${o.index}`)),i=o.index+o[0].length;return i<n.length&&l.push(n.slice(i)),0===l.length?null:1===l.length?l[0]:e(t.Fragment,{children:l},s)}if(r.nodeType!==Node.ELEMENT_NODE)return null;const l=r,o=l.tagName.toLowerCase(),i={key:s};Array.from(l.attributes).forEach(e=>{"class"!==e.name?"style"!==e.name?i[e.name]=e.value:i.style=e.value.split(";").map(e=>e.trim()).filter(Boolean).reduce((e,r)=>{const[t,a]=r.split(":").map(e=>e.trim());return t&&a?(e[t.replace(/-([a-z])/g,(e,r)=>r.toUpperCase())]=a,e):e},{}):i.className=e.value});const d=Array.from(l.childNodes).map((e,r)=>n(e,`${s}-${r}`)).filter(e=>null!==e);return t.createElement(o,i,...d)};return Array.from(r.body.childNodes).map((e,r)=>n(e,`root-${r}`)).filter(e=>null!==e)},[N,S]);return e("div",{className:"space-y-4",children:r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white 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-teal-500 to-cyan-600 text-white shadow-sm",children:e(d,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Điền từ vào biểu mẫu có cấu trúc"})]}),u&&L&&r("div",{className:m("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",k?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(k?o:i,{className:"h-3.5 w-3.5"}),k?"Đúng":"Sai"]})]}),r("div",{className:"space-y-5 p-5",children:[f&&e("h2",{className:"text-center text-xl font-bold text-gray-900",children:f}),(E||y)&&e("div",{className:"flex justify-center",children:e("div",{className:"overflow-hidden rounded-lg border border-gray-200 bg-gray-50",children:_?e("div",{className:"flex h-48 w-48 items-center justify-center",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-teal-500"})}):e("img",{src:E||y,alt:f,className:"max-h-56 w-auto object-contain p-2"})})}),e("div",{className:"structured-form-content space-y-2 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-5 text-base leading-loose text-gray-800",children:T}),u&&!k&&r("div",{className:"rounded-lg border border-green-200 bg-green-50 p-3",children:[e("span",{className:"text-xs font-medium uppercase tracking-wider text-green-600",children:"Đáp án đúng"}),e("div",{className:"mt-2 flex flex-wrap gap-2",children:A.map(e=>r("span",{className:"rounded-lg border border-green-300 bg-green-100 px-3 py-1.5 text-sm font-semibold text-green-800",children:[`{${e}}`,": ",w[e]]},e))})]}),u&&$&&r("div",{className:"rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-3",children:[e("span",{className:"text-xs font-medium uppercase tracking-wider text-blue-600",children:"Giải thích"}),e("p",{className:"mt-1 text-sm text-blue-800",children:$})]})]})]})})}