@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/types/write-sentences/register.js

@@ -1 +1,58 @@
-import{WriteSentencesCreator as t}from"./WriteSentencesCreator";export const writeSentencesRegistration={component:t,transformInitialData:t=>{const n=t?.answer||{},e=t?.explanation||n?.explanation||"",o=t?.total_points?parseFloat(t.total_points):t?.points||1,a=t?.questionGroup||{},i=a?.payload||{},s=i?.title||n?.title||"",r=i?.content||n?.groupContent||"",p=i?.imageUrl||n?.imageUrl||"",l=a?.groupNumber||n?.groupNumber||1,u=t?.content||{},c=n?.instruction||u?.instruction||"",g=n?.sentenceCount||u?.sentenceCount||void 0;return{points:n?.points||o,explanation:e,instruction:c,sentenceCount:g,title:s,groupContent:r,imageUrl:p,groupNumber:l,groups:n?.groups||t?.groups}},getExtraProps:t=>({groups:t.groups,questionIndexInPart:t.questionIndexInPart,partId:t.partId,validationRef:t.validationRef,onUnsavedChangesChange:t.onUnsavedChangesChange}),wrapOnSave:(t,n)=>({type:n.questionType,content:n.state.content,points:t?.points??n.state.points??1,level:n.state.level,difficulty:n.state.difficulty,skill:n.state.skill,answer:t,explanation:t?.explanation||""}),wrapOnChange:(t,n)=>({type:n.questionType,content:n.state.content,points:t?.points??n.state.points??1,level:n.state.level,difficulty:n.state.difficulty,skill:n.state.skill,answer:t,explanation:t?.explanation||""})};
+import { WriteSentencesCreator } from './WriteSentencesCreator';
+export const writeSentencesRegistration = {
+    component: WriteSentencesCreator,
+    transformInitialData: (initialData) => {
+        const answer = initialData?.answer || {};
+        const explanation = initialData?.explanation || answer?.explanation || '';
+        const apiPoints = initialData?.total_points
+            ? parseFloat(initialData.total_points)
+            : (initialData?.points || 1);
+        const questionGroup = initialData?.questionGroup || {};
+        const groupPayload = questionGroup?.payload || {};
+        const groupTitle = groupPayload?.title || answer?.title || '';
+        const groupContent = groupPayload?.content || answer?.groupContent || '';
+        const groupImageUrl = groupPayload?.imageUrl || answer?.imageUrl || '';
+        const groupNumber = questionGroup?.groupNumber || answer?.groupNumber || 1;
+        const content = initialData?.content || {};
+        const instruction = answer?.instruction || content?.instruction || '';
+        const sentenceCount = answer?.sentenceCount || content?.sentenceCount || undefined;
+        return {
+            points: answer?.points || apiPoints,
+            explanation,
+            instruction,
+            sentenceCount,
+            title: groupTitle,
+            groupContent,
+            imageUrl: groupImageUrl,
+            groupNumber,
+            groups: answer?.groups || initialData?.groups,
+        };
+    },
+    getExtraProps: (ctx) => ({
+        groups: ctx.groups,
+        questionIndexInPart: ctx.questionIndexInPart,
+        partId: ctx.partId,
+        validationRef: ctx.validationRef,
+        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+    }),
+    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/write-sentences/transform.js

@@ -1 +1,28 @@
-export const transformWriteSentences=t=>{const n=t.answer,e=!!(n?.title||n?.subtitle||n?.groupContent||n?.imageUrl)?{title:n.title||"",subtitle:n.subtitle||"",content:n.groupContent||"",imageUrl:n.imageUrl||""}:void 0,o=n?.groupNumber||1,i={};return n?.instruction&&(i.instruction=n.instruction),n?.sentenceCount&&(i.sentenceCount=n.sentenceCount),{apiContent:i,apiCorrectAnswer:{},totalPoints:n?.points||t.points||1,explanation:n?.explanation||t.explanation||"",basicGroupData:e,groupNumber:o}};
+export const transformWriteSentences = (question) => {
+    const answerData = question.answer;
+    const hasGroupData = !!(answerData?.title || answerData?.subtitle || answerData?.groupContent || answerData?.imageUrl);
+    const basicGroupData = hasGroupData
+        ? {
+            title: answerData.title || '',
+            subtitle: answerData.subtitle || '',
+            content: answerData.groupContent || '',
+            imageUrl: answerData.imageUrl || '',
+        }
+        : undefined;
+    const groupNumber = answerData?.groupNumber || 1;
+    const apiContent = {};
+    if (answerData?.instruction) {
+        apiContent.instruction = answerData.instruction;
+    }
+    if (answerData?.sentenceCount) {
+        apiContent.sentenceCount = answerData.sentenceCount;
+    }
+    return {
+        apiContent,
+        apiCorrectAnswer: {},
+        totalPoints: answerData?.points || question.points || 1,
+        explanation: answerData?.explanation || question.explanation || '',
+        basicGroupData,
+        groupNumber,
+    };
+};

package/dist/components/questions/types/write-short-paragraph/WriteShortParagraphClient.js

@@ -1 +1,96 @@
-"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as i,useEffect as s,useMemo as a}from"react";import{Card as l,CardContent as n,CardHeader as c,CardTitle as d}from"../../../../components/ui/card";import{Textarea as o}from"../../../../components/ui/textarea";import{Label as m}from"../../../../components/ui/label";import{Image as h,Music as u,FileText as p,AlertCircle as x}from"lucide-react";import{usePresignedFileUrl as g}from"../../../../shared/lib/hooks";export function WriteShortParagraphClient({questionData:h,onSubmit:u,isReviewMode:p=!1,userAnswer:g}){const{contexts:f,minWords:v,maxWords:b,instruction:w}=h,[y,j]=i(g||"");s(()=>{void 0!==g&&j(g)},[g]);const C=a(()=>y.trim()?y.trim().split(/\s+/).filter(e=>e.length>0).length:0,[y]),F=a(()=>!(C<v)&&!(b&&C>b),[C,v,b]);return r("div",{className:"space-y-6",children:[w&&e(l,{children:e(c,{children:e(d,{className:"text-lg",children:w})})}),f.length>0&&r(l,{children:[e(c,{children:e(d,{children:"Contexts"})}),e(n,{children:e("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",children:f.map((r,t)=>e(N,{context:r,index:t},r.id))})})]}),r(l,{children:[e(c,{children:r("div",{className:"flex items-center justify-between",children:[e(d,{children:"Viết bài"}),e("div",{className:"flex items-center gap-2",children:r("span",{className:"text-sm font-semibold "+(F?"text-green-600":"text-red-600"),children:[C," / ",v,b?` - ${b}`:"+"," từ"]})})]})}),r(n,{className:"space-y-4",children:[r("div",{children:[e(m,{htmlFor:"writing-answer",children:"Nội dung bài viết"}),e(o,{id:"writing-answer",value:y,onChange:e=>{return r=e.target.value,void(p||(j(r),u?.(r)));var r},placeholder:"Nhập nội dung bài viết của bạn...",className:"mt-2 min-h-[200px]",rows:10,disabled:p})]}),!p&&e("div",{className:"flex items-start gap-2 rounded-lg border p-3",children:r(t,F?{children:[e("div",{className:"mt-0.5 h-5 w-5 rounded-full bg-green-500"}),r("div",{className:"flex-1",children:[e("p",{className:"text-sm font-medium text-green-700",children:"Đã đủ số từ yêu cầu"}),r("p",{className:"text-xs text-green-600",children:["Bạn đã viết ",C," từ. Yêu cầu: ",v,b?` - ${b}`:"+"," từ."]})]})]}:{children:[e(x,{className:"h-5 w-5 text-amber-500"}),r("div",{className:"flex-1",children:[e("p",{className:"text-sm font-medium text-amber-700",children:"Chưa đủ số từ yêu cầu"}),r("p",{className:"text-xs text-amber-600",children:["Bạn đã viết ",C," từ. Cần ít nhất ",v," từ.",b&&C>b&&r("span",{children:[" Tối đa ",b," từ."]})]})]})]})})]})]})]})}function N({context:t,index:i}){const{previewUrl:s}=g("text"!==t.type&&t.url||"");return r("div",{className:"rounded-lg border bg-white p-4 shadow-sm",children:[r("div",{className:"mb-2 flex items-center gap-2",children:[(()=>{switch(t.type){case"image":return e(h,{className:"h-5 w-5"});case"audio":return e(u,{className:"h-5 w-5"});case"text":return e(p,{className:"h-5 w-5"})}})(),r("span",{className:"text-sm font-semibold text-gray-700",children:[(()=>{switch(t.type){case"image":return"Ảnh";case"audio":return"Audio";case"text":return"Text"}})()," ",i+1]})]}),"image"===t.type&&e("div",{className:"relative h-48 w-full overflow-hidden rounded border bg-gray-50",children:s?e("img",{src:s,alt:`Context ${i+1}`,className:"h-full w-full object-contain",onError:()=>{console.error("Failed to load image:",t.url)}}):e("div",{className:"flex h-full items-center justify-center text-gray-400",children:e(h,{className:"h-12 w-12"})})}),"audio"===t.type&&e("div",{className:"space-y-2",children:e("div",{className:"rounded border bg-gray-50 p-3",children:e("audio",{controls:!0,className:"w-full",src:s||t.url||"",onError:()=>{console.error("Failed to load audio:",t.url)},children:"Your browser does not support the audio element."})})}),"text"===t.type&&e("div",{className:"rounded border bg-gray-50 p-3",children:e("p",{className:"text-sm whitespace-pre-wrap text-gray-700",children:t.text})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Label } from '../../../../components/ui/label';
+import { Image, Music, FileText, AlertCircle } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+export function WriteShortParagraphClient({ questionData, onSubmit, isReviewMode = false, userAnswer, }) {
+    const { contexts, minWords, maxWords, instruction } = questionData;
+    // Initialize answer state
+    const [answer, setAnswer] = useState(userAnswer || '');
+    // Sync userAnswer when it changes (e.g., when loading from server in review mode)
+    useEffect(() => {
+        if (userAnswer !== undefined) {
+            setAnswer(userAnswer);
+        }
+    }, [userAnswer]);
+    // Count words
+    const wordCount = useMemo(() => {
+        if (!answer.trim())
+            return 0;
+        return answer
+            .trim()
+            .split(/\s+/)
+            .filter((word) => word.length > 0).length;
+    }, [answer]);
+    // Check if word count is valid
+    const isValidWordCount = useMemo(() => {
+        if (wordCount < minWords)
+            return false;
+        if (maxWords && wordCount > maxWords)
+            return false;
+        return true;
+    }, [wordCount, minWords, maxWords]);
+    // Handle answer change
+    const handleAnswerChange = (value) => {
+        if (isReviewMode)
+            return;
+        setAnswer(value);
+        onSubmit?.(value);
+    };
+    // Get icon for context type
+    const getContextIcon = (type) => {
+        switch (type) {
+            case 'image':
+                return _jsx(Image, { className: "h-5 w-5" });
+            case 'audio':
+                return _jsx(Music, { className: "h-5 w-5" });
+            case 'text':
+                return _jsx(FileText, { className: "h-5 w-5" });
+        }
+    };
+    // Get label for context type
+    const getContextLabel = (type) => {
+        switch (type) {
+            case 'image':
+                return 'Ảnh';
+            case 'audio':
+                return 'Audio';
+            case 'text':
+                return 'Text';
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [instruction && (_jsx(Card, { children: _jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: instruction }) }) })), contexts.length > 0 && (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Contexts" }) }), _jsx(CardContent, { children: _jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children: contexts.map((ctx, index) => (_jsx(ContextDisplay, { context: ctx, index: index }, ctx.id))) }) })] })), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: "Vi\u1EBFt b\u00E0i" }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("span", { className: `text-sm font-semibold ${isValidWordCount ? 'text-green-600' : 'text-red-600'}`, children: [wordCount, " / ", minWords, maxWords ? ` - ${maxWords}` : '+', " t\u1EEB"] }) })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "writing-answer", children: "N\u1ED9i dung b\u00E0i vi\u1EBFt" }), _jsx(Textarea, { id: "writing-answer", value: answer, onChange: (e) => handleAnswerChange(e.target.value), placeholder: "Nh\u1EADp n\u1ED9i dung b\u00E0i vi\u1EBFt c\u1EE7a b\u1EA1n...", className: "mt-2 min-h-[200px]", rows: 10, disabled: isReviewMode })] }), !isReviewMode && (_jsx("div", { className: "flex items-start gap-2 rounded-lg border p-3", children: isValidWordCount ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-0.5 h-5 w-5 rounded-full bg-green-500" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-medium text-green-700", children: "\u0110\u00E3 \u0111\u1EE7 s\u1ED1 t\u1EEB y\u00EAu c\u1EA7u" }), _jsxs("p", { className: "text-xs text-green-600", children: ["B\u1EA1n \u0111\u00E3 vi\u1EBFt ", wordCount, " t\u1EEB. Y\u00EAu c\u1EA7u: ", minWords, maxWords ? ` - ${maxWords}` : '+', " t\u1EEB."] })] })] })) : (_jsxs(_Fragment, { children: [_jsx(AlertCircle, { className: "h-5 w-5 text-amber-500" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-medium text-amber-700", children: "Ch\u01B0a \u0111\u1EE7 s\u1ED1 t\u1EEB y\u00EAu c\u1EA7u" }), _jsxs("p", { className: "text-xs text-amber-600", children: ["B\u1EA1n \u0111\u00E3 vi\u1EBFt ", wordCount, " t\u1EEB. C\u1EA7n \u00EDt nh\u1EA5t ", minWords, " t\u1EEB.", maxWords && wordCount > maxWords && _jsxs("span", { children: [" T\u1ED1i \u0111a ", maxWords, " t\u1EEB."] })] })] })] })) }))] })] })] }));
+}
+function ContextDisplay({ context, index }) {
+    const { previewUrl } = usePresignedFileUrl(context.type !== 'text' ? context.url || '' : '');
+    const getIcon = () => {
+        switch (context.type) {
+            case 'image':
+                return _jsx(Image, { className: "h-5 w-5" });
+            case 'audio':
+                return _jsx(Music, { className: "h-5 w-5" });
+            case 'text':
+                return _jsx(FileText, { className: "h-5 w-5" });
+        }
+    };
+    const getLabel = () => {
+        switch (context.type) {
+            case 'image':
+                return 'Ảnh';
+            case 'audio':
+                return 'Audio';
+            case 'text':
+                return 'Text';
+        }
+    };
+    return (_jsxs("div", { className: "rounded-lg border bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [getIcon(), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: [getLabel(), " ", index + 1] })] }), context.type === 'image' && (_jsx("div", { className: "relative h-48 w-full overflow-hidden rounded border bg-gray-50", children: previewUrl ? (
+                /* eslint-disable-next-line @next/next/no-img-element */
+                _jsx("img", { src: previewUrl, alt: `Context ${index + 1}`, className: "h-full w-full object-contain", onError: () => {
+                        console.error('Failed to load image:', context.url);
+                    } })) : (_jsx("div", { className: "flex h-full items-center justify-center text-gray-400", children: _jsx(Image, { className: "h-12 w-12" }) })) })), context.type === 'audio' && (_jsx("div", { className: "space-y-2", children: _jsx("div", { className: "rounded border bg-gray-50 p-3", children: _jsx("audio", { controls: true, className: "w-full", src: previewUrl || context.url || '', onError: () => {
+                            console.error('Failed to load audio:', context.url);
+                        }, children: "Your browser does not support the audio element." }) }) })), context.type === 'text' && (_jsx("div", { className: "rounded border bg-gray-50 p-3", children: _jsx("p", { className: "text-sm whitespace-pre-wrap text-gray-700", children: context.text }) }))] }));
+}

package/dist/components/questions/types/write-short-paragraph/WriteShortParagraphCreator.js

@@ -1 +1,161 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as r,useEffect as a}from"react";import{Button as n}from"../../../../components/ui/button";import{Label as s}from"../../../../components/ui/label";import{Input as o}from"../../../../components/ui/input";import{Textarea as l}from"../../../../components/ui/textarea";import{Card as c,CardContent as d,CardHeader as m,CardTitle as h}from"../../../../components/ui/card";import{Pencil as u,Eye as g,X as x,Image as p,Music as v,FileText as b}from"lucide-react";import{FileUpload as f}from"../../../../components/ui/file-upload";import{WriteShortParagraphClient as N}from"./WriteShortParagraphClient";import{usePresignedFileUrl as y}from"../../../../shared/lib/hooks";function w({initialData:x,onSave:f,onCancel:y,onChange:w}){const[W,k]=i(x?.contexts||[]),[S,j]=i(x?.minWords||20),[z,T]=i(x?.maxWords||void 0),[U,P]=i(x?.instruction||""),D=r(x),L=r(!1),R=r(!1);a(()=>{JSON.stringify(D.current)!==JSON.stringify(x)&&(L.current=!0,D.current=x,x?(void 0!==x.contexts&&k(x.contexts),void 0!==x.minWords&&j(x.minWords),void 0!==x.maxWords&&T(x.maxWords),void 0!==x.instruction&&P(x.instruction),R.current=!0):R.current&&(k([]),j(20),T(void 0),P("")),setTimeout(()=>{L.current=!1},100))},[x]);const F=r(void 0),J=r(w);a(()=>{J.current=w},[w]),a(()=>{if(L.current)return;const e={contexts:W,minWords:S,maxWords:z,instruction:U};if(JSON.stringify(F.current)!==JSON.stringify(e)){F.current=e;W.some(e=>"text"===e.type?e.text&&e.text.trim().length>0:e.url&&e.url.trim().length>0)&&J.current?.(e)}},[W,S,z,U]);const[O,$]=i(!1),M=e=>{const t={id:`context-${Date.now()}-${Math.random()}`,type:e,url:"text"!==e?"":void 0,text:"text"===e?"":void 0};k([...W,t])},q=e=>{k(W.filter(t=>t.id!==e))},E=(e,t,i)=>{k(W.map(r=>r.id===e?{...r,[t]:i}:r))};if(O){const i={contexts:W,minWords:S,maxWords:z,instruction:U};return t("div",{className:"space-y-6",children:[t(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"}),e(m,{children:t("div",{className:"flex items-center justify-between",children:[t("div",{children:[e(h,{className:"text-xl font-bold tracking-tight text-gray-900",children:"Write Short Paragraph (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước"})]}),t(n,{variant:"outline",size:"sm",onClick:()=>$(!1),children:[e(u,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})]}),e(N,{questionData:i,onSubmit:()=>{}})]})}return t("div",{className:"space-y-6",children:[t(c,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"}),e(m,{children:t("div",{className:"flex items-center justify-between",children:[t("div",{children:[e(h,{className:"text-xl font-bold tracking-tight text-gray-900",children:"Write Short Paragraph"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Tạo bài tập viết đoạn văn với nhiều content (ảnh, audio, text)"})]}),t(n,{variant:"outline",size:"sm",onClick:()=>$(!0),disabled:0===W.length||S<1,children:[e(g,{className:"mr-2 h-4 w-4"}),"Client Mode"]})]})}),t(d,{className:"space-y-4",children:[t("div",{className:"space-y-1.5",children:[e(s,{htmlFor:"instruction",className:"text-sm font-semibold text-gray-700",children:"Hướng dẫn"}),e(l,{id:"instruction",value:U,onChange:e=>P(e.target.value),placeholder:"Ví dụ: Look at the three pictures. Write about this story.",className:"mt-1",rows:2})]}),t("div",{className:"grid grid-cols-2 gap-4",children:[t("div",{className:"space-y-1.5",children:[e(s,{htmlFor:"minWords",className:"text-sm font-semibold text-gray-700",children:"Số từ tối thiểu *"}),e(o,{id:"minWords",type:"number",min:"1",value:S,onChange:e=>j(parseInt(e.target.value)||1),placeholder:"20",className:"mt-1"})]}),t("div",{className:"space-y-1.5",children:[e(s,{htmlFor:"maxWords",className:"text-sm font-semibold text-gray-700",children:"Số từ tối đa (tùy chọn)"}),e(o,{id:"maxWords",type:"number",min:S,value:z||"",onChange:e=>T(e.target.value?parseInt(e.target.value):void 0),placeholder:"Không giới hạn",className:"mt-1"})]})]})]})]}),t(c,{className:"overflow-hidden border-0 bg-white shadow-xl shadow-blue-100/40 ring-1 ring-gray-100",children:[e(m,{className:"bg-gradient-to-br from-indigo-50/50 via-white to-blue-50/30 pb-4",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 shadow-md",children:e(b,{className:"h-5 w-5 text-white"})}),t("div",{children:[e(h,{className:"text-lg font-bold text-gray-900",children:"Contexts"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Thêm các context (ảnh, audio, hoặc text) để học sinh xem khi viết"})]})]}),t("div",{className:"flex gap-2",children:[t(n,{variant:"outline",size:"sm",onClick:()=>M("image"),className:"flex items-center gap-2 border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 hover:text-indigo-800",children:[e(p,{className:"h-4 w-4"}),"Thêm ảnh"]}),t(n,{variant:"outline",size:"sm",onClick:()=>M("audio"),className:"flex items-center gap-2 border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100 hover:text-purple-800",children:[e(v,{className:"h-4 w-4"}),"Thêm audio"]}),t(n,{variant:"outline",size:"sm",onClick:()=>M("text"),className:"flex items-center gap-2 border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 hover:text-blue-800",children:[e(b,{className:"h-4 w-4"}),"Thêm text"]})]})]})}),e(d,{className:"space-y-4 pt-6",children:W.length>0?W.map((t,i)=>e(C,{context:t,index:i,onUpdate:E,onRemove:q},t.id)):t("div",{className:"flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-12",children:[e("div",{className:"mb-4 rounded-full bg-gray-200 p-4",children:e(p,{className:"h-8 w-8 text-gray-400"})}),e("p",{className:"mb-2 text-sm font-medium text-gray-700",children:"Chưa có context nào"}),e("p",{className:"mb-4 text-xs text-gray-500",children:"Nhấn các nút bên trên để thêm context"})]})})]})]})}function C({context:i,index:r,onUpdate:a,onRemove:o}){const{previewUrl:c}=y("text"!==i.type&&i.url||"");return e("div",{className:"rounded-lg border bg-white p-4 shadow-sm transition-shadow hover:shadow-md",children:t("div",{className:"flex items-start gap-4",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white shadow-md",children:e("span",{className:"text-sm font-bold",children:r+1})}),t("div",{className:"flex-1 space-y-3",children:[t("div",{className:"flex items-center gap-2",children:[(()=>{switch(i.type){case"image":return e(p,{className:"h-5 w-5"});case"audio":return e(v,{className:"h-5 w-5"});case"text":return e(b,{className:"h-5 w-5"})}})(),t(s,{className:"text-sm font-semibold text-gray-700",children:["Context ",r+1," - ",(()=>{switch(i.type){case"image":return"Ảnh";case"audio":return"Audio";case"text":return"Text"}})()]})]}),"text"===i.type?t("div",{children:[e(s,{className:"text-sm font-semibold text-gray-700",children:"Nội dung text *"}),e(l,{value:i.text||"",onChange:e=>a(i.id,"text",e.target.value),placeholder:"Nhập nội dung text...",className:"mt-1",rows:3})]}):e("div",{children:e(f,{id:`context-${i.id}`,label:"image"===i.type?"URL ảnh *":"URL audio *",accept:"image"===i.type?"image/*":"audio/*",value:i.url||"",onChange:e=>a(i.id,"url",e),maxSize:"image"===i.type?5:10,placeholder:"Paste URL hoặc upload file",autoUpload:!0,prefix:"questions"})}),"image"===i.type&&c&&e("div",{className:"relative h-48 w-full overflow-hidden rounded border",children:e("img",{src:c,alt:`Context ${r+1} preview`,className:"h-full w-full object-contain",onError:()=>{console.error("Failed to load image:",i.url)}})}),"audio"===i.type&&i.url&&e("div",{className:"rounded border bg-gray-50 p-3",children:e("audio",{controls:!0,className:"w-full",src:c||i.url,children:"Your browser does not support the audio element."})})]}),e(n,{type:"button",variant:"ghost",size:"icon",onClick:()=>o(i.id),className:"flex-shrink-0 text-gray-400 hover:text-red-500",children:e(x,{className:"h-5 w-5"})})]})})}export function WriteShortParagraphCreator({initialData:i,onSave:r,onCancel:a,onChange:s}){const o=()=>{i?.contexts&&0!==i.contexts.length&&(!i.minWords||i.minWords<1||r?.(i))};return t("div",{className:"space-y-6",children:[e(w,{initialData:i,onSave:o,onCancel:a,onChange:s}),t("div",{className:"flex justify-end gap-3",children:[e(n,{variant:"outline",onClick:a,children:"Hủy"}),e(n,{onClick:o,className:"bg-blue-500 hover:bg-blue-600",disabled:!i?.contexts||0===i.contexts.length||!i.minWords||i.minWords<1,children:"Lưu câu hỏi"})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Pencil, Eye, X, Image, Music, FileText } from 'lucide-react';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { WriteShortParagraphClient } from './WriteShortParagraphClient';
+import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+function WriteShortParagraphCreatorContent({ initialData, onSave, // eslint-disable-line @typescript-eslint/no-unused-vars
+onCancel, // eslint-disable-line @typescript-eslint/no-unused-vars
+onChange, }) {
+    // State
+    const [contexts, setContexts] = useState(initialData?.contexts || []);
+    const [minWords, setMinWords] = useState(initialData?.minWords || 20);
+    const [maxWords, setMaxWords] = useState(initialData?.maxWords || undefined);
+    const [instruction, setInstruction] = useState(initialData?.instruction || '');
+    // Track previous initialData to detect changes
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const hasInitializedRef = useRef(false);
+    // Sync state from initialData when it changes
+    useEffect(() => {
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (initialDataChanged) {
+            isInitializingRef.current = true;
+            previousInitialDataRef.current = initialData;
+            if (initialData) {
+                if (initialData.contexts !== undefined)
+                    setContexts(initialData.contexts);
+                if (initialData.minWords !== undefined)
+                    setMinWords(initialData.minWords);
+                if (initialData.maxWords !== undefined)
+                    setMaxWords(initialData.maxWords);
+                if (initialData.instruction !== undefined)
+                    setInstruction(initialData.instruction);
+                hasInitializedRef.current = true;
+            }
+            else {
+                // Only reset if not the first mount
+                if (hasInitializedRef.current) {
+                    setContexts([]);
+                    setMinWords(20);
+                    setMaxWords(undefined);
+                    setInstruction('');
+                }
+            }
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 100);
+        }
+    }, [initialData]);
+    // Track previous data to avoid unnecessary onChange calls
+    const previousDataRef = useRef(undefined);
+    const onChangeRef = useRef(onChange);
+    // Keep onChange ref up to date
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    useEffect(() => {
+        if (isInitializingRef.current)
+            return;
+        const currentData = {
+            contexts,
+            minWords,
+            maxWords,
+            instruction,
+        };
+        // Only call onChange if data actually changed
+        const dataChanged = JSON.stringify(previousDataRef.current) !== JSON.stringify(currentData);
+        if (dataChanged) {
+            previousDataRef.current = currentData;
+            // Only call onChange if there's meaningful data (at least 1 context with valid data)
+            const hasValidContext = contexts.some((ctx) => {
+                if (ctx.type === 'text') {
+                    return ctx.text && ctx.text.trim().length > 0;
+                }
+                return ctx.url && ctx.url.trim().length > 0;
+            });
+            if (hasValidContext) {
+                onChangeRef.current?.(currentData);
+            }
+        }
+    }, [contexts, minWords, maxWords, instruction]);
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    // Add new context
+    const addContext = (type) => {
+        const newContext = {
+            id: `context-${Date.now()}-${Math.random()}`,
+            type,
+            url: type !== 'text' ? '' : undefined,
+            text: type === 'text' ? '' : undefined,
+        };
+        setContexts([...contexts, newContext]);
+    };
+    // Remove context
+    const removeContext = (id) => {
+        setContexts(contexts.filter((ctx) => ctx.id !== id));
+    };
+    // Update context
+    const updateContext = (id, field, value) => {
+        setContexts(contexts.map((ctx) => (ctx.id === id ? { ...ctx, [field]: value } : ctx)));
+    };
+    // If in client mode, render the Client component
+    if (isClientMode) {
+        const questionData = {
+            contexts,
+            minWords,
+            maxWords,
+            instruction,
+        };
+        return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500" }), _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold tracking-tight text-gray-900", children: "Write Short Paragraph (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc" })] }), _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(WriteShortParagraphClient, { questionData: questionData, onSubmit: () => { } })] }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500" }), _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold tracking-tight text-gray-900", children: "Write Short Paragraph" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "T\u1EA1o b\u00E0i t\u1EADp vi\u1EBFt \u0111o\u1EA1n v\u0103n v\u1EDBi nhi\u1EC1u content (\u1EA3nh, audio, text)" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: contexts.length === 0 || minWords < 1, children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), "Client Mode"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "instruction", className: "text-sm font-semibold text-gray-700", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Textarea, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "V\u00ED d\u1EE5: Look at the three pictures. Write about this story.", className: "mt-1", rows: 2 })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "minWords", className: "text-sm font-semibold text-gray-700", children: "S\u1ED1 t\u1EEB t\u1ED1i thi\u1EC3u *" }), _jsx(Input, { id: "minWords", type: "number", min: "1", value: minWords, onChange: (e) => setMinWords(parseInt(e.target.value) || 1), placeholder: "20", className: "mt-1" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "maxWords", className: "text-sm font-semibold text-gray-700", children: "S\u1ED1 t\u1EEB t\u1ED1i \u0111a (t\u00F9y ch\u1ECDn)" }), _jsx(Input, { id: "maxWords", type: "number", min: minWords, value: maxWords || '', onChange: (e) => setMaxWords(e.target.value ? parseInt(e.target.value) : undefined), placeholder: "Kh\u00F4ng gi\u1EDBi h\u1EA1n", className: "mt-1" })] })] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-xl shadow-blue-100/40 ring-1 ring-gray-100", children: [_jsx(CardHeader, { className: "bg-gradient-to-br from-indigo-50/50 via-white to-blue-50/30 pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 shadow-md", children: _jsx(FileText, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "Contexts" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Th\u00EAm c\u00E1c context (\u1EA3nh, audio, ho\u1EB7c text) \u0111\u1EC3 h\u1ECDc sinh xem khi vi\u1EBFt" })] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => addContext('image'), className: "flex items-center gap-2 border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 hover:text-indigo-800", children: [_jsx(Image, { className: "h-4 w-4" }), "Th\u00EAm \u1EA3nh"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => addContext('audio'), className: "flex items-center gap-2 border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100 hover:text-purple-800", children: [_jsx(Music, { className: "h-4 w-4" }), "Th\u00EAm audio"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => addContext('text'), className: "flex items-center gap-2 border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 hover:text-blue-800", children: [_jsx(FileText, { className: "h-4 w-4" }), "Th\u00EAm text"] })] })] }) }), _jsx(CardContent, { className: "space-y-4 pt-6", children: contexts.length > 0 ? (contexts.map((ctx, index) => (_jsx(ContextItem, { context: ctx, index: index, onUpdate: updateContext, onRemove: removeContext }, ctx.id)))) : (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-12", children: [_jsx("div", { className: "mb-4 rounded-full bg-gray-200 p-4", children: _jsx(Image, { className: "h-8 w-8 text-gray-400" }) }), _jsx("p", { className: "mb-2 text-sm font-medium text-gray-700", children: "Ch\u01B0a c\u00F3 context n\u00E0o" }), _jsx("p", { className: "mb-4 text-xs text-gray-500", children: "Nh\u1EA5n c\u00E1c n\u00FAt b\u00EAn tr\u00EAn \u0111\u1EC3 th\u00EAm context" })] })) })] })] }));
+}
+function ContextItem({ context, index, onUpdate, onRemove }) {
+    const { previewUrl } = usePresignedFileUrl(context.type !== 'text' ? context.url || '' : '');
+    const getIcon = () => {
+        switch (context.type) {
+            case 'image':
+                return _jsx(Image, { className: "h-5 w-5" });
+            case 'audio':
+                return _jsx(Music, { className: "h-5 w-5" });
+            case 'text':
+                return _jsx(FileText, { className: "h-5 w-5" });
+        }
+    };
+    const getLabel = () => {
+        switch (context.type) {
+            case 'image':
+                return 'Ảnh';
+            case 'audio':
+                return 'Audio';
+            case 'text':
+                return 'Text';
+        }
+    };
+    return (_jsx("div", { className: "rounded-lg border bg-white p-4 shadow-sm transition-shadow hover:shadow-md", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white shadow-md", children: _jsx("span", { className: "text-sm font-bold", children: index + 1 }) }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [getIcon(), _jsxs(Label, { className: "text-sm font-semibold text-gray-700", children: ["Context ", index + 1, " - ", getLabel()] })] }), context.type === 'text' ? (_jsxs("div", { children: [_jsx(Label, { className: "text-sm font-semibold text-gray-700", children: "N\u1ED9i dung text *" }), _jsx(Textarea, { value: context.text || '', onChange: (e) => onUpdate(context.id, 'text', e.target.value), placeholder: "Nh\u1EADp n\u1ED9i dung text...", className: "mt-1", rows: 3 })] })) : (_jsx("div", { children: _jsx(FileUpload, { id: `context-${context.id}`, label: context.type === 'image' ? 'URL ảnh *' : 'URL audio *', accept: context.type === 'image' ? 'image/*' : 'audio/*', value: context.url || '', onChange: (url) => onUpdate(context.id, 'url', url), maxSize: context.type === 'image' ? 5 : 10, placeholder: "Paste URL ho\u1EB7c upload file", autoUpload: true, prefix: "questions" }) })), context.type === 'image' && previewUrl && (_jsx("div", { className: "relative h-48 w-full overflow-hidden rounded border", children: _jsx("img", { src: previewUrl, alt: `Context ${index + 1} preview`, className: "h-full w-full object-contain", onError: () => {
+                                    console.error('Failed to load image:', context.url);
+                                } }) })), context.type === 'audio' && context.url && (_jsx("div", { className: "rounded border bg-gray-50 p-3", children: _jsx("audio", { controls: true, className: "w-full", src: previewUrl || context.url, children: "Your browser does not support the audio element." }) }))] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => onRemove(context.id), className: "flex-shrink-0 text-gray-400 hover:text-red-500", children: _jsx(X, { className: "h-5 w-5" }) })] }) }));
+}
+export function WriteShortParagraphCreator({ initialData, onSave, onCancel, onChange, }) {
+    const handleSave = () => {
+        // Validation
+        if (!initialData?.contexts || initialData.contexts.length === 0) {
+            return;
+        }
+        if (!initialData.minWords || initialData.minWords < 1) {
+            return;
+        }
+        onSave?.(initialData);
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(WriteShortParagraphCreatorContent, { initialData: initialData, onSave: handleSave, onCancel: onCancel, onChange: onChange }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { variant: "outline", onClick: onCancel, children: "H\u1EE7y" }), _jsx(Button, { onClick: handleSave, className: "bg-blue-500 hover:bg-blue-600", disabled: !initialData?.contexts ||
+                            initialData.contexts.length === 0 ||
+                            !initialData.minWords ||
+                            initialData.minWords < 1, children: "L\u01B0u c\u00E2u h\u1ECFi" })] })] }));
+}

package/dist/components/questions/types/write-short-paragraph/index.js

@@ -1 +1,2 @@
-export*from"./WriteShortParagraphCreator";export*from"./WriteShortParagraphClient";
+export * from './WriteShortParagraphCreator';
+export * from './WriteShortParagraphClient';

package/dist/components/questions/types/write-short-paragraph/register.js

@@ -1 +1,4 @@
-import{WriteShortParagraphCreator as r}from"./WriteShortParagraphCreator";export const writeShortParagraphRegistration={component:r};
+import { WriteShortParagraphCreator } from './WriteShortParagraphCreator';
+export const writeShortParagraphRegistration = {
+    component: WriteShortParagraphCreator,
+};

package/dist/components/questions/types/write-short-paragraph/transform.js

@@ -1 +1,21 @@
-export const transformWriteShortParagraph=t=>{const r=t.answer;return{apiContent:{contexts:(r?.contexts||[]).map(t=>"text"===t.type?{type:t.type,text:t.text||""}:{type:t.type,url:t.url||""}),minWords:r?.minWords||0,maxWords:r?.maxWords,instruction:r?.instruction},apiCorrectAnswer:{minWords:r?.minWords||0,maxWords:r?.maxWords||100}}};
+export const transformWriteShortParagraph = (question) => {
+    const answerData = question.answer;
+    const contexts = (answerData?.contexts || []).map((ctx) => {
+        if (ctx.type === 'text') {
+            return { type: ctx.type, text: ctx.text || '' };
+        }
+        return { type: ctx.type, url: ctx.url || '' };
+    });
+    return {
+        apiContent: {
+            contexts,
+            minWords: answerData?.minWords || 0,
+            maxWords: answerData?.maxWords,
+            instruction: answerData?.instruction,
+        },
+        apiCorrectAnswer: {
+            minWords: answerData?.minWords || 0,
+            maxWords: answerData?.maxWords || 100,
+        },
+    };
+};

package/dist/components/questions/viewer/ChooseTheCorrectAnswerGroupViewer.js

@@ -1 +1,11 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{ChooseTheCorrectAnswerGroupClient as r}from"../types/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupClient";import{mapQuestionToChooseAnswerGroupData as o}from"../types/choose-the-correct-answer-group/map-choose-the-correct-answer-group-data";export function ChooseTheCorrectAnswerGroupViewer({question:s,isReviewMode:t=!1,userAnswer:c}){const n=o(s),i=t&&!c?n.items.map(e=>e.correctAnswer):c;return e(r,{questionData:n,isReviewMode:t,userAnswers:i})}
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChooseTheCorrectAnswerGroupClient } from '../types/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupClient';
+import { mapQuestionToChooseAnswerGroupData } from '../types/choose-the-correct-answer-group/map-choose-the-correct-answer-group-data';
+export function ChooseTheCorrectAnswerGroupViewer({ question, isReviewMode = false, userAnswer, }) {
+    const questionData = mapQuestionToChooseAnswerGroupData(question);
+    const reviewAnswers = isReviewMode && !userAnswer
+        ? questionData.items.map((item) => item.correctAnswer)
+        : userAnswer;
+    return (_jsx(ChooseTheCorrectAnswerGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: reviewAnswers }));
+}

package/dist/components/questions/viewer/CrossOutWordGroupViewer.js

@@ -1 +1,8 @@
-"use client";import{jsx as o}from"react/jsx-runtime";import{CrossOutWordGroupClient as r}from"../types/cross-out-word-group/CrossOutWordGroupClient";import{mapQuestionToCrossOutWordGroupData as s}from"../types/cross-out-word-group/map-cross-out-word-group-data";export function CrossOutWordGroupViewer({question:e,isReviewMode:t=!1}){const u=s(e);return o(r,{questionData:u,isReviewMode:t,userAnswers:t?u.items.map(o=>o.correctAnswer):[]})}
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CrossOutWordGroupClient } from '../types/cross-out-word-group/CrossOutWordGroupClient';
+import { mapQuestionToCrossOutWordGroupData } from '../types/cross-out-word-group/map-cross-out-word-group-data';
+export function CrossOutWordGroupViewer({ question, isReviewMode = false, }) {
+    const questionData = mapQuestionToCrossOutWordGroupData(question);
+    return (_jsx(CrossOutWordGroupClient, { questionData: questionData, isReviewMode: isReviewMode, userAnswers: isReviewMode ? questionData.items.map((item) => item.correctAnswer) : [] }));
+}

package/dist/components/questions/viewer/QuestionGroupViewer.js

@@ -1 +1,36 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import a from"next/image";import{Badge as l}from"../../../components/ui/badge";import{Card as s,CardContent as i,CardDescription as r,CardHeader as n,CardTitle as c}from"../../../components/ui/card";import{FileText as d,Music as o,Video as m,Image as h,Volume2 as p,Play as u}from"lucide-react";export function QuestionGroupViewer({group:g,showQuestions:x=!0,compact:N=!1}){const b=()=>{switch(g.type){case"READING_PASSAGE":return e(d,{className:"h-5 w-5 text-blue-600"});case"LISTENING_AUDIO":return e(o,{className:"h-5 w-5 text-purple-600"});case"LISTENING_VIDEO":return e(m,{className:"h-5 w-5 text-red-600"});case"IMAGE_BASED":return e(h,{className:"h-5 w-5 text-green-600"});default:return e(d,{className:"h-5 w-5 text-gray-600"})}},v=()=>({READING_PASSAGE:"Đọc hiểu - Đoạn văn",LISTENING_AUDIO:"Nghe - Audio/Hội thoại",LISTENING_VIDEO:"Nghe - Video",IMAGE_BASED:"Dựa vào hình ảnh",MIXED:"Kết hợp nhiều loại"}[g.type]||g.type);return t("div",N?{className:"rounded-lg border border-gray-200 p-4 hover:bg-gray-50",children:[t("div",{className:"flex items-start justify-between",children:[t("div",{className:"flex items-start gap-3",children:[b(),t("div",{children:[e("h3",{className:"font-semibold",children:g.name}),e("p",{className:"text-sm text-gray-500",children:v()})]})]}),t("div",{className:"flex flex-col items-end gap-1",children:[t(l,{className:"bg-blue-100 text-blue-700",children:[g.questionCount," câu hỏi"]}),t(l,{className:"bg-green-100 text-green-700",children:[g.totalPoints," điểm"]})]})]}),g.description&&e("p",{className:"mt-2 text-sm text-gray-600",children:g.description}),t("div",{className:"mt-3 flex flex-wrap gap-2",children:[e(l,{variant:"outline",children:g.level}),e(l,{variant:"outline",children:g.skill}),g.category&&e(l,{variant:"secondary",children:g.category}),g.tags?.map(t=>e(l,{variant:"secondary",className:"bg-gray-100",children:t},t))]})]}:{className:"space-y-6",children:[t(s,{children:[e(n,{children:t("div",{className:"flex items-start justify-between",children:[t("div",{className:"flex items-start gap-3",children:[b(),t("div",{children:[e(c,{children:g.name}),e(r,{className:"mt-1",children:v()})]})]}),t("div",{className:"flex flex-col items-end gap-2",children:[t(l,{className:"bg-blue-100 text-blue-700",children:[g.questionCount," câu hỏi"]}),t(l,{className:"bg-green-100 text-green-700",children:["Tổng ",g.totalPoints," điểm"]})]})]})}),t(i,{className:"space-y-4",children:[g.description&&e("p",{className:"text-gray-700",children:g.description}),t("div",{className:"flex flex-wrap gap-2",children:[e(l,{variant:"outline",children:g.level}),e(l,{variant:"outline",children:g.skill}),g.category&&e(l,{variant:"secondary",children:g.category}),g.tags?.map(t=>e(l,{variant:"secondary",className:"bg-gray-100",children:t},t))]}),g.allowShuffle&&e("div",{className:"rounded-lg border border-yellow-200 bg-yellow-50 p-3",children:e("p",{className:"text-sm text-yellow-800",children:"ℹ️ Câu hỏi trong nhóm này có thể được xáo trộn thứ tự"})})]})]}),t(s,{children:[t(n,{children:[e(c,{children:"Nội dung chung"}),e(r,{children:"Context mà tất cả câu hỏi trong nhóm sẽ sử dụng"})]}),t(i,{className:"space-y-4",children:[g.context.instructions&&t("div",{className:"rounded-lg border border-blue-200 bg-blue-50 p-4",children:[e("p",{className:"font-medium text-blue-900",children:"Hướng dẫn:"}),e("p",{className:"mt-1 text-blue-800",children:g.context.instructions})]}),g.context.passage&&t("div",{className:"rounded-lg border p-4",children:[g.context.passageTitle&&e("h4",{className:"mb-2 text-lg font-semibold",children:g.context.passageTitle}),e("div",{className:"prose max-w-none",children:e("p",{className:"whitespace-pre-wrap text-gray-700",children:g.context.passage})})]}),g.context.audioUrl&&t("div",{className:"rounded-lg border p-4",children:[t("div",{className:"mb-2 flex items-center gap-2",children:[e(p,{className:"h-5 w-5 text-purple-600"}),e("h4",{className:"font-semibold",children:"Audio"})]}),e("audio",{controls:!0,className:"w-full",src:g.context.audioUrl,children:"Your browser does not support the audio element."}),g.context.audioScript&&t("div",{className:"mt-3",children:[e("p",{className:"text-sm font-medium text-gray-600",children:"Transcript:"}),e("p",{className:"mt-1 text-sm whitespace-pre-wrap text-gray-700",children:g.context.audioScript})]})]}),g.context.videoUrl&&t("div",{className:"rounded-lg border p-4",children:[t("div",{className:"mb-2 flex items-center gap-2",children:[e(u,{className:"h-5 w-5 text-red-600"}),e("h4",{className:"font-semibold",children:"Video"})]}),e("video",{controls:!0,className:"w-full rounded",src:g.context.videoUrl,children:"Your browser does not support the video element."}),g.context.videoScript&&t("div",{className:"mt-3",children:[e("p",{className:"text-sm font-medium text-gray-600",children:"Transcript:"}),e("p",{className:"mt-1 text-sm whitespace-pre-wrap text-gray-700",children:g.context.videoScript})]})]}),g.context.imageUrl&&t("div",{className:"rounded-lg border p-4",children:[t("div",{className:"mb-2 flex items-center gap-2",children:[e(h,{className:"h-5 w-5 text-green-600"}),e("h4",{className:"font-semibold",children:"Hình ảnh"})]}),e("div",{className:"relative h-auto w-full",children:e(a,{src:g.context.imageUrl,alt:g.context.imageCaption||"Group image",width:800,height:600,className:"max-w-full rounded",style:{width:"100%",height:"auto"}})}),g.context.imageCaption&&e("p",{className:"mt-2 text-sm text-gray-600",children:g.context.imageCaption})]})]})]}),x&&g.questions&&g.questions.length>0&&t(s,{children:[t(n,{children:[t(c,{children:["Câu hỏi trong nhóm (",g.questions.length,")"]}),e(r,{children:"Các câu hỏi sẽ sử dụng context chung bên trên"})]}),e(i,{children:e("div",{className:"space-y-3",children:g.questions.map((a,s)=>e("div",{className:"rounded-lg border bg-white p-4",children:e("div",{className:"flex items-start justify-between",children:t("div",{className:"flex items-start gap-3",children:[e("span",{className:"flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-sm font-semibold text-blue-700",children:s+1}),t("div",{className:"flex-1",children:[t("div",{className:"mb-2 flex flex-wrap gap-2",children:[e(l,{variant:"outline",children:a.type}),e(l,{variant:"outline",children:a.difficulty}),t(l,{className:"bg-green-100 text-green-700",children:[a.points," điểm"]})]}),e("p",{className:"text-gray-800",children:a.content}),a.explanation&&t("p",{className:"mt-2 text-sm text-gray-500",children:["💡 ",a.explanation]})]})]})})},a.id))})})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { Badge } from '../../../components/ui/badge';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../components/ui/card';
+import { FileText, Music, Video, Image as ImageIcon, Volume2, Play } from 'lucide-react';
+export function QuestionGroupViewer({ group, showQuestions = true, compact = false, }) {
+    const getGroupTypeIcon = () => {
+        switch (group.type) {
+            case 'READING_PASSAGE':
+                return _jsx(FileText, { className: "h-5 w-5 text-blue-600" });
+            case 'LISTENING_AUDIO':
+                return _jsx(Music, { className: "h-5 w-5 text-purple-600" });
+            case 'LISTENING_VIDEO':
+                return _jsx(Video, { className: "h-5 w-5 text-red-600" });
+            case 'IMAGE_BASED':
+                return _jsx(ImageIcon, { className: "h-5 w-5 text-green-600" });
+            default:
+                return _jsx(FileText, { className: "h-5 w-5 text-gray-600" });
+        }
+    };
+    const getGroupTypeLabel = () => {
+        const labels = {
+            READING_PASSAGE: 'Đọc hiểu - Đoạn văn',
+            LISTENING_AUDIO: 'Nghe - Audio/Hội thoại',
+            LISTENING_VIDEO: 'Nghe - Video',
+            IMAGE_BASED: 'Dựa vào hình ảnh',
+            MIXED: 'Kết hợp nhiều loại',
+        };
+        return labels[group.type] || group.type;
+    };
+    if (compact) {
+        return (_jsxs("div", { className: "rounded-lg border border-gray-200 p-4 hover:bg-gray-50", children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex items-start gap-3", children: [getGroupTypeIcon(), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold", children: group.name }), _jsx("p", { className: "text-sm text-gray-500", children: getGroupTypeLabel() })] })] }), _jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsxs(Badge, { className: "bg-blue-100 text-blue-700", children: [group.questionCount, " c\u00E2u h\u1ECFi"] }), _jsxs(Badge, { className: "bg-green-100 text-green-700", children: [group.totalPoints, " \u0111i\u1EC3m"] })] })] }), group.description && _jsx("p", { className: "mt-2 text-sm text-gray-600", children: group.description }), _jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [_jsx(Badge, { variant: "outline", children: group.level }), _jsx(Badge, { variant: "outline", children: group.skill }), group.category && _jsx(Badge, { variant: "secondary", children: group.category }), group.tags?.map((tag) => (_jsx(Badge, { variant: "secondary", className: "bg-gray-100", children: tag }, tag)))] })] }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex items-start gap-3", children: [getGroupTypeIcon(), _jsxs("div", { children: [_jsx(CardTitle, { children: group.name }), _jsx(CardDescription, { className: "mt-1", children: getGroupTypeLabel() })] })] }), _jsxs("div", { className: "flex flex-col items-end gap-2", children: [_jsxs(Badge, { className: "bg-blue-100 text-blue-700", children: [group.questionCount, " c\u00E2u h\u1ECFi"] }), _jsxs(Badge, { className: "bg-green-100 text-green-700", children: ["T\u1ED5ng ", group.totalPoints, " \u0111i\u1EC3m"] })] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [group.description && _jsx("p", { className: "text-gray-700", children: group.description }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { variant: "outline", children: group.level }), _jsx(Badge, { variant: "outline", children: group.skill }), group.category && _jsx(Badge, { variant: "secondary", children: group.category }), group.tags?.map((tag) => (_jsx(Badge, { variant: "secondary", className: "bg-gray-100", children: tag }, tag)))] }), group.allowShuffle && (_jsx("div", { className: "rounded-lg border border-yellow-200 bg-yellow-50 p-3", children: _jsx("p", { className: "text-sm text-yellow-800", children: "\u2139\uFE0F C\u00E2u h\u1ECFi trong nh\u00F3m n\u00E0y c\u00F3 th\u1EC3 \u0111\u01B0\u1EE3c x\u00E1o tr\u1ED9n th\u1EE9 t\u1EF1" }) }))] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "N\u1ED9i dung chung" }), _jsx(CardDescription, { children: "Context m\u00E0 t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi trong nh\u00F3m s\u1EBD s\u1EED d\u1EE5ng" })] }), _jsxs(CardContent, { className: "space-y-4", children: [group.context.instructions && (_jsxs("div", { className: "rounded-lg border border-blue-200 bg-blue-50 p-4", children: [_jsx("p", { className: "font-medium text-blue-900", children: "H\u01B0\u1EDBng d\u1EABn:" }), _jsx("p", { className: "mt-1 text-blue-800", children: group.context.instructions })] })), group.context.passage && (_jsxs("div", { className: "rounded-lg border p-4", children: [group.context.passageTitle && (_jsx("h4", { className: "mb-2 text-lg font-semibold", children: group.context.passageTitle })), _jsx("div", { className: "prose max-w-none", children: _jsx("p", { className: "whitespace-pre-wrap text-gray-700", children: group.context.passage }) })] })), group.context.audioUrl && (_jsxs("div", { className: "rounded-lg border p-4", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Volume2, { className: "h-5 w-5 text-purple-600" }), _jsx("h4", { className: "font-semibold", children: "Audio" })] }), _jsx("audio", { controls: true, className: "w-full", src: group.context.audioUrl, children: "Your browser does not support the audio element." }), group.context.audioScript && (_jsxs("div", { className: "mt-3", children: [_jsx("p", { className: "text-sm font-medium text-gray-600", children: "Transcript:" }), _jsx("p", { className: "mt-1 text-sm whitespace-pre-wrap text-gray-700", children: group.context.audioScript })] }))] })), group.context.videoUrl && (_jsxs("div", { className: "rounded-lg border p-4", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Play, { className: "h-5 w-5 text-red-600" }), _jsx("h4", { className: "font-semibold", children: "Video" })] }), _jsx("video", { controls: true, className: "w-full rounded", src: group.context.videoUrl, children: "Your browser does not support the video element." }), group.context.videoScript && (_jsxs("div", { className: "mt-3", children: [_jsx("p", { className: "text-sm font-medium text-gray-600", children: "Transcript:" }), _jsx("p", { className: "mt-1 text-sm whitespace-pre-wrap text-gray-700", children: group.context.videoScript })] }))] })), group.context.imageUrl && (_jsxs("div", { className: "rounded-lg border p-4", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-5 w-5 text-green-600" }), _jsx("h4", { className: "font-semibold", children: "H\u00ECnh \u1EA3nh" })] }), _jsx("div", { className: "relative h-auto w-full", children: _jsx(Image, { src: group.context.imageUrl, alt: group.context.imageCaption || 'Group image', width: 800, height: 600, className: "max-w-full rounded", style: { width: '100%', height: 'auto' } }) }), group.context.imageCaption && (_jsx("p", { className: "mt-2 text-sm text-gray-600", children: group.context.imageCaption }))] }))] })] }), showQuestions && group.questions && group.questions.length > 0 && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { children: ["C\u00E2u h\u1ECFi trong nh\u00F3m (", group.questions.length, ")"] }), _jsx(CardDescription, { children: "C\u00E1c c\u00E2u h\u1ECFi s\u1EBD s\u1EED d\u1EE5ng context chung b\u00EAn tr\u00EAn" })] }), _jsx(CardContent, { children: _jsx("div", { className: "space-y-3", children: group.questions.map((question, index) => (_jsx("div", { className: "rounded-lg border bg-white p-4", children: _jsx("div", { className: "flex items-start justify-between", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-sm font-semibold text-blue-700", children: index + 1 }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "mb-2 flex flex-wrap gap-2", children: [_jsx(Badge, { variant: "outline", children: question.type }), _jsx(Badge, { variant: "outline", children: question.difficulty }), _jsxs(Badge, { className: "bg-green-100 text-green-700", children: [question.points, " \u0111i\u1EC3m"] })] }), _jsx("p", { className: "text-gray-800", children: question.content }), question.explanation && (_jsxs("p", { className: "mt-2 text-sm text-gray-500", children: ["\uD83D\uDCA1 ", question.explanation] }))] })] }) }) }, question.id))) }) })] }))] }));
+}