@tinyweb_dev/oe-exam-sdk 1.0.12 → 1.0.13

package/dist/components/questions/_shared/components/compact/KidPassage.d.ts

@@ -0,0 +1,4 @@
+export declare function KidPassage({ html, className, }: {
+    html: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/questions/_shared/components/compact/KidPassage.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { BookOpen } from 'lucide-react';
+import { useT } from '../../../../../shared/lib/i18n';
+import { cn } from '../../../../../shared/lib/utils';
+const COLLAPSE_CHAR_THRESHOLD = 480;
+function plainTextLength(html) {
+    return html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim().length;
+}
+export function KidPassage({ html, className, }) {
+    const t = useT();
+    const isLong = plainTextLength(html) > COLLAPSE_CHAR_THRESHOLD;
+    const [expanded, setExpanded] = useState(!isLong);
+    if (!html) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn('rounded-xl border border-gray-200 bg-white p-5 shadow-xs', expanded && isLong && 'md:sticky md:top-24 md:z-10', className), children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: t('question.viewer.readingPassage') })] }), _jsx("div", { className: cn('prose prose-sm max-w-none leading-relaxed text-gray-800', !expanded && 'max-h-40 overflow-hidden'), dangerouslySetInnerHTML: { __html: html } }), isLong ? (_jsx("button", { type: "button", onClick: () => setExpanded((value) => !value), className: "mt-3 text-sm font-semibold text-indigo-600 hover:text-indigo-800", children: expanded
+                    ? t('question.viewer.collapsePassage')
+                    : t('question.viewer.expandPassage') })) : null] }));
+}

package/dist/components/questions/_shared/components/compact/KidQuestionCard.js

@@ -1,7 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, CircleHelp, Star, X } from 'lucide-react';
+import { useT } from '../../../../../shared/lib/i18n';
 import { cn } from '../../../../../shared/lib/utils';
 export function KidQuestionCard({ icon, hideIcon = false, title, titleClassName, points, isExample = false, review, headerExtra, children, className, contentClassName, }) {
-    return (_jsxs("div", { className: cn('overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm', className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [!hideIcon && (_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: icon ?? _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) })), _jsx("span", { className: cn('text-sm font-medium text-gray-700', titleClassName ?? 'truncate'), children: title }), isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "C\u00E2u v\u00ED d\u1EE5"] }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [headerExtra, typeof points === 'number' && (_jsxs("span", { className: "text-xs text-gray-500", children: [points, " \u0111i\u1EC3m"] })), review === 'correct' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-700", children: [_jsx(Check, { className: "h-3 w-3" }), "\u0110\u00FAng"] })), review === 'wrong' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700", children: [_jsx(X, { className: "h-3 w-3" }), "Sai"] }))] })] }), _jsx("div", { className: cn('space-y-3 p-3', contentClassName), children: children })] }));
+    const t = useT();
+    return (_jsxs("div", { className: cn('overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm', className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [!hideIcon && (_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: icon ?? _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) })), _jsx("span", { className: cn('text-sm font-medium text-gray-700', titleClassName ?? 'truncate'), children: title }), isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), t('question.viewer.example')] }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [headerExtra, typeof points === 'number' && (_jsx("span", { className: "text-xs text-gray-500", children: t('question.viewer.points', { count: points }) })), review === 'correct' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-700", children: [_jsx(Check, { className: "h-3 w-3" }), t('question.viewer.correct')] })), review === 'wrong' && (_jsxs("div", { className: "flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700", children: [_jsx(X, { className: "h-3 w-3" }), t('question.viewer.wrong')] }))] })] }), _jsx("div", { className: cn('space-y-3 p-3', contentClassName), children: children })] }));
 }

package/dist/components/questions/_shared/components/compact/SpeakingReplyMic.d.ts

@@ -0,0 +1,7 @@
+export declare function SpeakingReplyMic({ flattenIndex, audioKey, disabled, uploading, onRecorded, }: {
+    flattenIndex: number;
+    audioKey?: string | null;
+    disabled?: boolean;
+    uploading?: boolean;
+    onRecorded?: (flattenIndex: number, blob: Blob) => void;
+}): import("react").JSX.Element;

package/dist/components/questions/_shared/components/compact/SpeakingReplyMic.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Mic, Square, Volume2 } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../../shared/lib/hooks';
+function QuestionAudio({ url }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(url);
+    const src = previewUrl ||
+        (url.startsWith('http') || url.startsWith('blob:') ? url : '');
+    if (!src && !isLoading) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 shrink-0 text-blue-500" }), isLoading ? (_jsx("div", { className: "h-8 flex-1 animate-pulse rounded-md bg-blue-100" })) : (_jsx("audio", { controls: true, src: src, className: "h-8 w-full", preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }));
+}
+export function SpeakingReplyMic({ flattenIndex, audioKey, disabled, uploading, onRecorded, }) {
+    const [status, setStatus] = useState('idle');
+    const [error, setError] = useState('');
+    const [blobUrl, setBlobUrl] = useState('');
+    const recorderRef = useRef(null);
+    const chunksRef = useRef([]);
+    const streamRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            recorderRef.current?.stop();
+            streamRef.current?.getTracks().forEach((track) => track.stop());
+            if (blobUrl) {
+                URL.revokeObjectURL(blobUrl);
+            }
+        };
+    }, [blobUrl]);
+    const stopStream = () => {
+        streamRef.current?.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+    };
+    const startRecording = async () => {
+        if (disabled || uploading || !onRecorded) {
+            return;
+        }
+        setError('');
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            streamRef.current = stream;
+            chunksRef.current = [];
+            const recorder = new MediaRecorder(stream);
+            recorderRef.current = recorder;
+            recorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    chunksRef.current.push(event.data);
+                }
+            };
+            recorder.onstop = () => {
+                const blob = new Blob(chunksRef.current, { type: recorder.mimeType || 'audio/webm' });
+                setBlobUrl((current) => {
+                    if (current) {
+                        URL.revokeObjectURL(current);
+                    }
+                    return URL.createObjectURL(blob);
+                });
+                setStatus('recorded');
+                stopStream();
+                onRecorded(flattenIndex, blob);
+            };
+            recorder.start();
+            setStatus('recording');
+        }
+        catch {
+            setError('Không thể mở microphone. Hãy cho phép quyền ghi âm.');
+            stopStream();
+        }
+    };
+    const stopRecording = () => {
+        if (recorderRef.current && recorderRef.current.state !== 'inactive') {
+            recorderRef.current.stop();
+        }
+    };
+    const canRecord = Boolean(onRecorded) && !disabled && !uploading;
+    return (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-lg border border-dashed border-indigo-200 bg-indigo-50/60 px-4 py-3", children: [canRecord ? (_jsx("button", { type: "button", onClick: status === 'recording' ? stopRecording : startRecording, title: status === 'recording' ? 'Dừng ghi âm' : 'Nhấn micro để trả lời', className: `inline-flex h-12 w-12 items-center justify-center rounded-full text-white shadow-sm transition-colors ${status === 'recording'
+                    ? 'animate-pulse bg-red-500 hover:bg-red-600'
+                    : 'bg-indigo-600 hover:bg-indigo-700'}`, children: status === 'recording' ? _jsx(Square, { className: "h-4 w-4 fill-current" }) : _jsx(Mic, { className: "h-5 w-5" }) })) : (_jsx("div", { className: "inline-flex h-12 w-12 items-center justify-center rounded-full bg-slate-300 text-white", children: _jsx(Mic, { className: "h-5 w-5" }) })), _jsx("p", { className: "text-center text-xs text-indigo-700", children: uploading
+                    ? 'Đang tải lên bản ghi...'
+                    : status === 'recording'
+                        ? 'Đang ghi âm... Nhấn để dừng'
+                        : audioKey || status === 'recorded'
+                            ? 'Đã ghi. Nhấn micro để ghi lại'
+                            : 'Nhấn micro để trả lời bằng giọng nói' }), error && _jsx("p", { className: "text-center text-xs text-red-600", children: error }), audioKey ? (_jsx("div", { className: "w-full max-w-sm", children: _jsx(QuestionAudio, { url: audioKey }) })) : status === 'recorded' && blobUrl ? (_jsx("audio", { controls: true, src: blobUrl, className: "h-8 w-full max-w-sm", preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })) : null] }));
+}

package/dist/components/questions/_shared/components/compact/index.d.ts

@@ -5,6 +5,8 @@ export { CompactCreatorHeader } from './CompactCreatorHeader';
 export { CompactFieldCard } from './CompactFieldCard';
 export { CompactExplanationToggle } from './CompactExplanationToggle';
 export { KidInstruction } from './KidInstruction';
+export { KidPassage } from './KidPassage';
 export { KidPrompt } from './KidPrompt';
 export { KidQuestionCard } from './KidQuestionCard';
 export { KidChoiceRow, optionLetter } from './KidChoiceRow';
+export { SpeakingReplyMic } from './SpeakingReplyMic';

package/dist/components/questions/_shared/components/compact/index.js

@@ -5,6 +5,8 @@ export { CompactCreatorHeader } from './CompactCreatorHeader';
 export { CompactFieldCard } from './CompactFieldCard';
 export { CompactExplanationToggle } from './CompactExplanationToggle';
 export { KidInstruction } from './KidInstruction';
+export { KidPassage } from './KidPassage';
 export { KidPrompt } from './KidPrompt';
 export { KidQuestionCard } from './KidQuestionCard';
 export { KidChoiceRow, optionLetter } from './KidChoiceRow';
+export { SpeakingReplyMic } from './SpeakingReplyMic';

package/dist/components/questions/types/answer-the-question-group/AnswerTheQuestionGroupClient.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BookOpen, CircleHelp, Lightbulb, Sparkles, Volume2 } from 'lucide-react';
+import { CircleHelp, Lightbulb, Sparkles, Volume2 } from 'lucide-react';
+import { useT } from '../../../../shared/lib/i18n';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { toAnswerTheQuestionGroupImageUrls } from '../../_shared/types/answer-the-question-group.type';
-import { KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
+import { KidInstruction, KidPassage, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 function isAbsoluteMediaUrl(value) {
     return (value.startsWith('http://')
         || value.startsWith('https://')
@@ -41,16 +42,24 @@ function MediaPreview({ src, kind = 'image', alt }) {
             } }) }));
 }
 export function AnswerTheQuestionGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
+    const t = useT();
     const items = questionData.items || [];
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: questionData.instruction }), questionData.audioUrl && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx(MediaPreview, { src: questionData.audioUrl, kind: "audio", alt: "Group audio" })] })), toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: `Hình ảnh (${imageIndex + 1})` }, `group-image-${imageIndex}`))) })), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none leading-relaxed text-gray-800", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
+    const instruction = questionData.instruction?.trim()
+        || t('question.viewer.atqgDefaultInstruction');
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(KidInstruction, { children: instruction }), questionData.audioUrl && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx(Volume2, { className: "h-4 w-4 text-slate-500" }), _jsx(MediaPreview, { src: questionData.audioUrl, kind: "audio", alt: "Group audio" })] })), toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: t('question.viewer.imageAlt', { n: imageIndex + 1 }) }, `group-image-${imageIndex}`))) })), questionData.passage ? _jsx(KidPassage, { html: questionData.passage }) : null, items.map((item, itemIndex) => {
                 const userValue = userAnswers[itemIndex] || '';
                 const expectedAnswers = Array.isArray(item.expectedAnswers)
                     ? item.expectedAnswers.filter((answer) => answer.trim() !== '')
                     : [];
-                return (_jsxs(KidQuestionCard, { icon: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }), title: `Câu ${item.questionNumber || itemIndex + 1}`, points: item.points || 0, isExample: item.isExample, headerExtra: _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] }), children: [toAnswerTheQuestionGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), _jsx(KidPrompt, { children: item.question || 'Câu hỏi chưa được nhập' }), isReviewMode || item.isExample || !onAnswerChange ? (userValue ? (_jsx("div", { className: "rounded-md border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-700", children: userValue })) : null) : (_jsx("textarea", { value: userValue, onChange: (event) => {
+                const questionNumber = item.questionNumber || itemIndex + 1;
+                const answerId = `atqg-answer-${questionNumber}`;
+                return (_jsxs(KidQuestionCard, { icon: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }), title: t('question.viewer.questionN', { n: questionNumber }), points: item.points || 0, isExample: item.isExample, headerExtra: _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-xs font-semibold text-violet-700", children: [_jsx(Sparkles, { className: "h-3 w-3" }), "AI"] }), children: [toAnswerTheQuestionGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toAnswerTheQuestionGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(MediaPreview, { src: url, alt: t('question.viewer.itemImageAlt', {
+                                    n: questionNumber,
+                                    m: imageIndex + 1,
+                                }) }, `${item.questionNumber}-${imageIndex}`))) })), _jsx(KidPrompt, { children: _jsx("label", { htmlFor: answerId, children: item.question || t('question.viewer.missingPrompt') }) }), isReviewMode || item.isExample || !onAnswerChange ? (userValue ? (_jsx("div", { className: "rounded-md border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-700", children: userValue })) : null) : (_jsx("textarea", { id: answerId, name: answerId, value: userValue, onChange: (event) => {
                                 const next = items.map((_, index) => userAnswers[index] || '');
                                 next[itemIndex] = event.target.value;
                                 onAnswerChange(next);
-                            }, placeholder: "Nh\u1EADp c\u00E2u tr\u1EA3 l\u1EDDi...", rows: 2, className: "w-full rounded-md border border-slate-200 px-3 py-1.5 text-sm text-slate-800 outline-none ring-blue-200 focus:border-blue-400 focus:ring-2" })), isReviewMode && expectedAnswers.length > 0 ? (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-gray-500", children: "\u0110\u00E1p \u00E1n" }), _jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm text-gray-700", children: expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] })) : isReviewMode && !userValue ? (_jsx("div", { className: "rounded-md border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-500", children: "Ch\u01B0a c\u00F3 \u0111\u00E1p \u00E1n" })) : null] }, `${item.questionNumber}-${itemIndex}`));
+                            }, placeholder: t('question.viewer.placeholder'), rows: 4, className: "w-full rounded-md border border-slate-200 px-3 py-1.5 text-sm text-slate-800 outline-none ring-blue-200 focus:border-blue-400 focus:ring-2" })), isReviewMode && expectedAnswers.length > 0 ? (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-gray-500", children: t('question.viewer.answerKey') }), _jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm text-gray-700", children: expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] })) : isReviewMode && !userValue ? (_jsx("div", { className: "rounded-md border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-500", children: t('question.viewer.noAnswer') })) : null] }, `${item.questionNumber}-${itemIndex}`));
             }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
 }

package/dist/components/questions/types/answer-the-question-group/map-answer-the-question-group-data.js

@@ -1,5 +1,5 @@
 import { fromAnswerTheQuestionGroupImageUrls, toAnswerTheQuestionGroupImageUrls, } from '../../_shared/types/answer-the-question-group.type';
-const DEFAULT_INSTRUCTION = 'Read the text again and answer the questions.';
+const DEFAULT_INSTRUCTION = '';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -70,7 +70,7 @@ export function mapQuestionToAnswerTheQuestionGroupData(question) {
         const audioUrl = asOptionalUrl(meta.audioUrl);
         const imageUrl = toAnswerTheQuestionGroupImageUrls(meta.imageUrl);
         return {
-            instruction: asString(meta.instruction) || DEFAULT_INSTRUCTION,
+            instruction: asString(meta.instruction),
             passage: asString(meta.passage),
             ...(audioUrl ? { audioUrl } : {}),
             ...(imageUrl.length ? { imageUrl } : {}),

package/dist/components/questions/types/choose-then-answer-group/ChooseThenAnswerGroupClient.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Lightbulb, X } from 'lucide-react';
+import { useT } from '../../../../shared/lib/i18n';
 import { cn } from '../../../../shared/lib/utils';
 import { KidInstruction, KidQuestionCard } from '../../_shared/components/compact';
 function emptyAnswer() {
@@ -10,33 +11,13 @@ function formatHalf(points) {
     const half = points * 0.5;
     return Number.isInteger(half) ? String(half) : half.toFixed(1);
 }
-function badgeClass(params) {
-    if (params.isExample) {
-        return 'bg-amber-500';
-    }
-    if (!params.isReviewMode || !params.hasAttempt) {
-        return 'bg-indigo-600';
-    }
-    if (params.partialScore != null) {
-        if (params.partialScore >= params.points - 1e-9) {
-            return 'bg-emerald-500';
-        }
-        if (params.partialScore > 0) {
-            return 'bg-amber-500';
-        }
-        return 'bg-red-500';
-    }
-    if (params.mappingCorrect || params.hasText) {
-        return 'bg-amber-500';
-    }
-    return 'bg-red-500';
-}
 export function ChooseThenAnswerGroupClient({ questionData, isReviewMode = false, userAnswers = [], itemResults, onAnswerChange, }) {
+    const t = useT();
     const canEdit = Boolean(onAnswerChange) && !isReviewMode;
     const items = questionData.items || [];
     const hasAttempt = Boolean(itemResults?.length) ||
         userAnswers.some((answer) => Boolean(answer?.optionId || answer?.text?.trim()));
-    return (_jsxs("div", { className: "space-y-2", children: [(questionData.title || questionData.instruction) && (_jsxs(KidInstruction, { children: [questionData.title ? (_jsx("p", { className: "mb-1 text-[11px] font-semibold text-indigo-500", children: questionData.title })) : null, questionData.instruction] })), items.map((item, itemIndex) => {
+    return (_jsxs("div", { className: "space-y-3", children: [(questionData.title || questionData.instruction) && (_jsxs(KidInstruction, { children: [questionData.title ? (_jsx("p", { className: "mb-1 text-[11px] font-semibold text-indigo-500", children: questionData.title })) : null, questionData.instruction] })), items.map((item, itemIndex) => {
                 const stored = userAnswers[itemIndex] || emptyAnswer();
                 const current = item.isExample
                     ? { optionId: item.optionId, text: stored.text }
@@ -62,38 +43,37 @@ export function ChooseThenAnswerGroupClient({ questionData, isReviewMode = false
                         text: next.text ?? current.text,
                     });
                 };
-                return (_jsx(KidQuestionCard, { title: `Câu ${item.questionNumber || itemIndex + 1}`, points: points, isExample: item.isExample, children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: cn('mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white', badgeClass({
-                                    isExample: item.isExample,
-                                    isReviewMode,
-                                    hasAttempt,
-                                    points,
-                                    partialScore: result?.partialScore,
-                                    mappingCorrect,
-                                    hasText: hasStudentText,
-                                })), children: item.questionNumber || itemIndex + 1 }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsxs("p", { className: "flex flex-wrap items-center gap-x-1.5 gap-y-1.5 text-sm font-semibold leading-7 text-slate-800", children: [_jsx("span", { children: parts[0] || '' }), _jsx("span", { className: "inline-flex items-center gap-1", children: item.options.map((option, optionIndex) => {
-                                                    const selected = current.optionId === option.id;
-                                                    const isKey = option.id === expectedId;
-                                                    const pickedCorrect = showGradedReview && selected && isKey;
-                                                    const pickedWrong = showGradedReview && selected && !isKey;
-                                                    const keyOnly = showGradedReview && !selected && isKey;
-                                                    const officialCorrect = showAnswerKey && isKey;
-                                                    return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [optionIndex > 0 && (_jsx("span", { className: "text-sm font-medium text-slate-300", children: "|" })), _jsxs("button", { type: "button", disabled: !canEdit || item.isExample, onClick: () => setAnswer({ optionId: option.id }), className: cn('inline-flex min-w-[3.5rem] items-center justify-center gap-1 rounded-full border px-2.5 py-1 text-sm font-semibold transition-colors', !showReview &&
-                                                                    selected &&
-                                                                    'border-blue-500 bg-blue-500 text-white shadow-sm ring-2 ring-blue-100', !showReview &&
-                                                                    !selected &&
-                                                                    'border-gray-200 bg-white text-slate-800 hover:border-blue-300 hover:bg-blue-50', showAnswerKey &&
-                                                                    !isKey &&
-                                                                    'border-slate-200 bg-white text-slate-800', officialCorrect &&
-                                                                    'border-2 border-emerald-500 bg-white text-slate-800', pickedCorrect && 'border-emerald-600 bg-emerald-600 text-white', pickedWrong && 'border-red-500 bg-red-500 text-white', keyOnly && 'border-emerald-500 bg-white text-emerald-800', showGradedReview &&
-                                                                    !selected &&
-                                                                    !isKey &&
-                                                                    'border-slate-200 bg-slate-50 text-slate-400', canEdit &&
-                                                                    !item.isExample &&
-                                                                    'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-200', (!canEdit || item.isExample) && 'cursor-default'), children: [option.text || option.id, pickedCorrect ? _jsx(Check, { className: "h-3 w-3" }) : null, pickedWrong ? _jsx(X, { className: "h-3 w-3" }) : null] })] }, option.id));
-                                                }) }), _jsx("span", { children: parts.slice(1).join('{0}') })] }), showReview && hasAttempt ? (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsxs("span", { className: cn('rounded-full px-2 py-0.5 text-[11px] font-semibold', mappingCorrect
-                                                    ? 'bg-emerald-50 text-emerald-700'
-                                                    : 'bg-red-50 text-red-700'), children: ["Ch\u1ECDn ", mappingCorrect ? halfLabel : '0'] }), result?.aiCorrect !== undefined ? (_jsxs("span", { className: cn('rounded-full px-2 py-0.5 text-[11px] font-semibold', result.aiCorrect
-                                                    ? 'bg-emerald-50 text-emerald-700'
-                                                    : 'bg-red-50 text-red-700'), children: ["Vi\u1EBFt ", result.aiCorrect ? halfLabel : '0'] })) : null] })) : null, canEdit || hasStudentText || (isReviewMode && hasAttempt) ? (_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: "text-xs font-medium text-slate-500", children: "C\u00E2u tr\u1EA3 l\u1EDDi c\u1EE7a b\u1EA1n" }), isReviewMode && !hasStudentText ? (_jsx("p", { className: "rounded-lg border border-dashed border-slate-200 bg-slate-50 px-3 py-2 text-sm italic text-slate-400", children: "Ch\u01B0a vi\u1EBFt" })) : (_jsx("textarea", { value: current.text, disabled: !canEdit || item.isExample, onChange: (event) => setAnswer({ text: event.target.value }), placeholder: "Vi\u1EBFt c\u00E2u tr\u1EA3 l\u1EDDi t\u1EA1i \u0111\u00E2y...", rows: 2, className: "min-h-0 w-full resize-none rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm leading-relaxed text-slate-800 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 disabled:bg-slate-50" }))] })) : null, isReviewMode && sampleAnswers.length > 0 ? (_jsxs("p", { className: "text-xs text-slate-500", children: [_jsx("span", { className: "font-semibold", children: "M\u1EABu:" }), " ", sampleAnswers.join(' · ')] })) : null] })] }) }, `${item.questionNumber}-${itemIndex}`));
+                return (_jsx(KidQuestionCard, { title: t('question.viewer.questionN', { n: item.questionNumber || itemIndex + 1 }), points: points, isExample: item.isExample, children: _jsx("div", { className: "space-y-3", children: _jsxs("div", { className: "min-w-0 space-y-2.5", children: [(parts[0] || parts.slice(1).join('{0}')) ? (_jsxs("p", { className: "text-sm font-semibold leading-7 text-slate-800", children: [_jsx("span", { children: parts[0] || '' }), _jsx("span", { className: "mx-1 inline-block min-w-[3rem] border-b-2 border-dashed border-slate-300 align-baseline" }), _jsx("span", { children: parts.slice(1).join('{0}') })] })) : null, _jsx("div", { className: "flex flex-wrap items-center gap-2.5", role: "group", "aria-label": t('question.viewer.questionN', {
+                                        n: item.questionNumber || itemIndex + 1,
+                                    }), children: item.options.map((option) => {
+                                        const selected = current.optionId === option.id;
+                                        const isKey = option.id === expectedId;
+                                        const pickedCorrect = showGradedReview && selected && isKey;
+                                        const pickedWrong = showGradedReview && selected && !isKey;
+                                        const keyOnly = showGradedReview && !selected && isKey;
+                                        const officialCorrect = showAnswerKey && isKey;
+                                        const optionId = `cta-${itemIndex}-opt-${option.id}`;
+                                        return (_jsxs("button", { id: optionId, name: `cta-${itemIndex}-option`, type: "button", disabled: !canEdit || item.isExample, onClick: () => setAnswer({ optionId: option.id }), className: cn('inline-flex min-w-[3.5rem] items-center justify-center gap-1 rounded-full border px-3 py-1.5 text-sm font-semibold transition-colors', !showReview &&
+                                                selected &&
+                                                'border-blue-500 bg-blue-500 text-white shadow-sm ring-2 ring-blue-100', !showReview &&
+                                                !selected &&
+                                                'border-gray-200 bg-white text-slate-800 hover:border-blue-300 hover:bg-blue-50', showAnswerKey &&
+                                                !isKey &&
+                                                'border-slate-200 bg-white text-slate-800', officialCorrect &&
+                                                'border-2 border-emerald-500 bg-white text-slate-800', pickedCorrect && 'border-emerald-600 bg-emerald-600 text-white', pickedWrong && 'border-red-500 bg-red-500 text-white', keyOnly && 'border-emerald-500 bg-white text-emerald-800', showGradedReview &&
+                                                !selected &&
+                                                !isKey &&
+                                                'border-slate-200 bg-slate-50 text-slate-400', canEdit &&
+                                                !item.isExample &&
+                                                'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-200', (!canEdit || item.isExample) && 'cursor-default'), children: [option.text || option.id, pickedCorrect ? _jsx(Check, { className: "h-3 w-3" }) : null, pickedWrong ? _jsx(X, { className: "h-3 w-3" }) : null] }, option.id));
+                                    }) }), showReview && hasAttempt ? (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx("span", { className: cn('rounded-full px-2 py-0.5 text-[11px] font-semibold', mappingCorrect
+                                                ? 'bg-emerald-50 text-emerald-700'
+                                                : 'bg-red-50 text-red-700'), children: t('question.viewer.chooseScore', {
+                                                score: mappingCorrect ? halfLabel : '0',
+                                            }) }), result?.aiCorrect !== undefined ? (_jsx("span", { className: cn('rounded-full px-2 py-0.5 text-[11px] font-semibold', result.aiCorrect
+                                                ? 'bg-emerald-50 text-emerald-700'
+                                                : 'bg-red-50 text-red-700'), children: t('question.viewer.writeScore', {
+                                                score: result.aiCorrect ? halfLabel : '0',
+                                            }) })) : null] })) : null, canEdit || hasStudentText || (isReviewMode && hasAttempt) ? (_jsxs("label", { className: "block space-y-1", htmlFor: `cta-${itemIndex}-text`, children: [_jsx("span", { className: "text-xs font-medium text-slate-500", children: t('question.viewer.yourAnswer') }), isReviewMode && !hasStudentText ? (_jsx("p", { className: "rounded-lg border border-dashed border-slate-200 bg-slate-50 px-3 py-2 text-sm italic text-slate-400", children: t('question.viewer.notWritten') })) : (_jsx("textarea", { id: `cta-${itemIndex}-text`, name: `cta-${itemIndex}-text`, value: current.text, disabled: !canEdit || item.isExample, onChange: (event) => setAnswer({ text: event.target.value }), placeholder: t('question.viewer.writePlaceholder'), rows: 2, className: "min-h-0 w-full resize-none rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm leading-relaxed text-slate-800 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 disabled:bg-slate-50" }))] })) : null, isReviewMode && sampleAnswers.length > 0 ? (_jsxs("p", { className: "text-xs text-slate-500", children: [_jsxs("span", { className: "font-semibold", children: [t('question.viewer.sample'), ":"] }), ' ', sampleAnswers.join(' · ')] })) : null] }) }) }, `${item.questionNumber}-${itemIndex}`));
             }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-amber-100 bg-amber-50 px-3 py-2 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
 }

package/dist/components/questions/types/speaking-cue-card/SpeakingCueCardClient.d.ts

@@ -6,6 +6,9 @@ export interface SpeakingCueCardClientProps {
         explanation?: string;
     };
     isReviewMode?: boolean;
+    audioKey?: string | null;
+    uploading?: boolean;
+    onRecorded?: (blob: Blob) => void;
 }
 export declare function mapQuestionToSpeakingCueCardData(question: Record<string, unknown> | null | undefined): SpeakingCueCardClientProps['questionData'];
-export declare function SpeakingCueCardClient({ questionData, isReviewMode, }: SpeakingCueCardClientProps): import("react").JSX.Element;
+export declare function SpeakingCueCardClient({ questionData, isReviewMode, audioKey, uploading, onRecorded, }: SpeakingCueCardClientProps): import("react").JSX.Element;

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

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Mic, CheckCircle2, Info, CreditCard } from 'lucide-react';
+import { CheckCircle2, Info, CreditCard } from 'lucide-react';
 import { RichTextHtml } from '../../../../components/shared/RichTextHtml';
-import { KidQuestionCard } from '../../_shared/components/compact';
+import { KidQuestionCard, SpeakingReplyMic } from '../../_shared/components/compact';
 function asRecord(value) {
     return value && typeof value === 'object' && !Array.isArray(value)
         ? value
@@ -22,7 +22,7 @@ export function mapQuestionToSpeakingCueCardData(question) {
         explanation: typeof source.explanation === 'string' ? source.explanation : '',
     };
 }
-export function SpeakingCueCardClient({ questionData, isReviewMode = false, }) {
+export function SpeakingCueCardClient({ questionData, isReviewMode = false, audioKey = null, uploading = false, onRecorded, }) {
     const answers = questionData.expectedAnswers || [];
-    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(KidQuestionCard, { title: "Th\u1EBB g\u1EE3i \u00FD (Cue Card)", icon: _jsx(CreditCard, { className: "h-3.5 w-3.5" }), children: [_jsx("div", { className: "rounded-xl border border-purple-100 bg-purple-50/40 px-5 py-4", children: _jsx(RichTextHtml, { html: questionData.cueCardHtml, className: "text-sm text-slate-800", fallback: _jsx("p", { className: "text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 n\u1ED9i dung cue card" }) }) }), _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-purple-50 ring-2 ring-purple-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-purple-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: "H\u1ECDc sinh \u0111\u1ECDc th\u1EBB g\u1EE3i \u00FD, chu\u1EA9n b\u1ECB, r\u1ED3i tr\u1EA3 l\u1EDDi b\u1EB1ng gi\u1ECDng n\u00F3i" })] }), isReviewMode && answers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", 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: "\u0110\u00E1p \u00E1n m\u1EABu" })] }), _jsx("div", { className: "space-y-2", children: answers.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 })] }, `${answer}-${index}`))) })] })), isReviewMode && questionData.explanation && (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-4", 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" })] }), _jsx("p", { className: "text-sm text-amber-700 leading-relaxed whitespace-pre-wrap", children: questionData.explanation })] }))] })] }));
+    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(KidQuestionCard, { title: "Th\u1EBB g\u1EE3i \u00FD (Cue Card)", icon: _jsx(CreditCard, { className: "h-3.5 w-3.5" }), children: [_jsx("div", { className: "rounded-xl border border-purple-100 bg-purple-50/40 px-5 py-4", children: _jsx(RichTextHtml, { html: questionData.cueCardHtml, className: "text-sm text-slate-800", fallback: _jsx("p", { className: "text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 n\u1ED9i dung cue card" }) }) }), isReviewMode && !onRecorded ? (audioKey ? (_jsx(SpeakingReplyMic, { flattenIndex: 0, audioKey: audioKey, disabled: true })) : (_jsx("p", { className: "text-xs text-gray-400", children: "Ch\u01B0a c\u00F3 b\u1EA3n ghi." }))) : (_jsx(SpeakingReplyMic, { flattenIndex: 0, audioKey: audioKey, uploading: uploading, onRecorded: onRecorded ? (_index, blob) => onRecorded(blob) : undefined })), isReviewMode && answers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", 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: "\u0110\u00E1p \u00E1n m\u1EABu" })] }), _jsx("div", { className: "space-y-2", children: answers.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 })] }, `${answer}-${index}`))) })] })), isReviewMode && questionData.explanation && (_jsxs("div", { className: "rounded-xl border border-amber-200 bg-amber-50 p-4", 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" })] }), _jsx("p", { className: "text-sm text-amber-700 leading-relaxed whitespace-pre-wrap", children: questionData.explanation })] }))] })] }));
 }

package/dist/components/questions/types/spontaneous-qa-group/SpontaneousQaGroupClient.js

@@ -1,9 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { Lightbulb, Mic, Square, Volume2 } from 'lucide-react';
+import { Lightbulb, Mic, Volume2 } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { KidInstruction, KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
+import { KidInstruction, KidPrompt, KidQuestionCard, SpeakingReplyMic, } from '../../_shared/components/compact';
 function QuestionAudio({ url }) {
     const { previewUrl, isLoading } = usePresignedFileUrl(url);
     const src = previewUrl ||
@@ -34,78 +33,6 @@ function findGradeDetail(details, flattenIndex) {
         item.itemId === `item-${flattenIndex}` ||
         item.itemId === `item-${flattenIndex + 1}`));
 }
-function SpeakingReplyMic({ flattenIndex, audioKey, disabled, uploading, onRecorded, }) {
-    const [status, setStatus] = useState('idle');
-    const [error, setError] = useState('');
-    const [blobUrl, setBlobUrl] = useState('');
-    const recorderRef = useRef(null);
-    const chunksRef = useRef([]);
-    const streamRef = useRef(null);
-    useEffect(() => {
-        return () => {
-            recorderRef.current?.stop();
-            streamRef.current?.getTracks().forEach((track) => track.stop());
-            if (blobUrl) {
-                URL.revokeObjectURL(blobUrl);
-            }
-        };
-    }, [blobUrl]);
-    const stopStream = () => {
-        streamRef.current?.getTracks().forEach((track) => track.stop());
-        streamRef.current = null;
-    };
-    const startRecording = async () => {
-        if (disabled || uploading || !onRecorded) {
-            return;
-        }
-        setError('');
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            streamRef.current = stream;
-            chunksRef.current = [];
-            const recorder = new MediaRecorder(stream);
-            recorderRef.current = recorder;
-            recorder.ondataavailable = (event) => {
-                if (event.data.size > 0) {
-                    chunksRef.current.push(event.data);
-                }
-            };
-            recorder.onstop = () => {
-                const blob = new Blob(chunksRef.current, { type: recorder.mimeType || 'audio/webm' });
-                setBlobUrl((current) => {
-                    if (current) {
-                        URL.revokeObjectURL(current);
-                    }
-                    return URL.createObjectURL(blob);
-                });
-                setStatus('recorded');
-                stopStream();
-                onRecorded(flattenIndex, blob);
-            };
-            recorder.start();
-            setStatus('recording');
-        }
-        catch {
-            setError('Không thể mở microphone. Hãy cho phép quyền ghi âm.');
-            stopStream();
-        }
-    };
-    const stopRecording = () => {
-        if (recorderRef.current && recorderRef.current.state !== 'inactive') {
-            recorderRef.current.stop();
-        }
-    };
-    const canRecord = Boolean(onRecorded) && !disabled && !uploading;
-    return (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-lg border border-dashed border-indigo-200 bg-indigo-50/60 px-4 py-3", children: [canRecord ? (_jsx("button", { type: "button", onClick: status === 'recording' ? stopRecording : startRecording, title: status === 'recording' ? 'Dừng ghi âm' : 'Nhấn micro để trả lời', className: `inline-flex h-12 w-12 items-center justify-center rounded-full text-white shadow-sm transition-colors ${status === 'recording'
-                    ? 'animate-pulse bg-red-500 hover:bg-red-600'
-                    : 'bg-indigo-600 hover:bg-indigo-700'}`, children: status === 'recording' ? _jsx(Square, { className: "h-4 w-4 fill-current" }) : _jsx(Mic, { className: "h-5 w-5" }) })) : (_jsx("div", { className: "inline-flex h-12 w-12 items-center justify-center rounded-full bg-slate-300 text-white", children: _jsx(Mic, { className: "h-5 w-5" }) })), _jsx("p", { className: "text-center text-xs text-indigo-700", children: uploading
-                    ? 'Đang tải lên bản ghi...'
-                    : status === 'recording'
-                        ? 'Đang ghi âm... Nhấn để dừng'
-                        : audioKey || status === 'recorded'
-                            ? 'Đã ghi. Nhấn micro để ghi lại'
-                            : 'Nhấn micro để trả lời bằng giọng nói' }), error && _jsx("p", { className: "text-center text-xs text-red-600", children: error }), audioKey ? (_jsx("div", { className: "w-full max-w-sm", children: _jsx(QuestionAudio, { url: audioKey }) })) : status === 'recorded' && blobUrl ? (_jsx("audio", { controls: true, src: blobUrl, className: "h-8 w-full max-w-sm", preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." })) : null] }));
-}
 export function SpontaneousQaGroupClient({ questionData, isReviewMode = false, userAnswer, onItemRecorded, uploadingIndex = null, gradeDetails, disabled = false, }) {
     const parts = questionData.parts || [];
     const audioKeys = Array.isArray(userAnswer?.audioKeys) ? userAnswer.audioKeys : [];

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

@@ -2,11 +2,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { Check, X, Library } from 'lucide-react';
+import { useT } from '../../../../shared/lib/i18n';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { toMediaUrlList } from '../../../../shared/lib/utils/media-urls';
 import { cn } from '../../../../shared/lib/utils';
 import { KidPrompt, KidQuestionCard } from '../../_shared/components/compact';
 import { detectWfsfBankMode, isOptionsWordEntry, normalizeSharedWordBank, } from './wfsf-word-bank.utils';
 import { expandWfsfCorrectAlts, formatWfsfCorrectLabel, isWfsfBlankCorrect, primaryWfsfAnswers, } from '../../../../shared/lib/utils/wfsf-blank-match';
+function wfsfFilledText(value) {
+    if (Array.isArray(value))
+        return String(value[0] ?? '');
+    return value == null ? '' : String(value);
+}
 function normalizeWfsfBlankStyle(raw) {
     const v = String(raw || '').toLowerCase();
     if (v === 'letter' || v === 'box')
@@ -61,28 +68,14 @@ function ClientAudioItem({ url }) {
         return null;
     return (_jsx("div", { className: "w-full max-w-md", children: _jsx("audio", { controls: true, src: src, className: "w-full h-10 rounded-md" }) }));
 }
-const DEFAULT_WFSF_HEADER = 'Điền từ vào biểu mẫu có cấu trúc';
 export function WordFillStructuredFormClient({ questionData, isReviewMode = false, userAnswer, onAnswerChange, autoFillCorrectAnswers = false, instruction, questionNumber, explanation, }) {
     const { title = '', content = '', answers = {}, caseSensitive = false, blankStyle: rawBlankStyle, viewMode, wordBank = [], instruction: dataInstruction, } = questionData;
+    const t = useT();
     const blankStyle = normalizeWfsfBlankStyle(rawBlankStyle);
     const isLetterBlank = blankStyle === 'letter';
     const isPhraseBlank = blankStyle === 'phrase' || blankStyle === 'translate';
-    const allImages = useMemo(() => {
-        if (Array.isArray(questionData.imageUrls) && questionData.imageUrls.length > 0) {
-            return questionData.imageUrls.filter(Boolean);
-        }
-        if (questionData.imageUrl)
-            return [questionData.imageUrl];
-        return [];
-    }, [questionData.imageUrls, questionData.imageUrl]);
-    const allAudios = useMemo(() => {
-        if (Array.isArray(questionData.audioUrls) && questionData.audioUrls.length > 0) {
-            return questionData.audioUrls.filter(Boolean);
-        }
-        if (questionData.audioUrl)
-            return [questionData.audioUrl];
-        return [];
-    }, [questionData.audioUrls, questionData.audioUrl]);
+    const allImages = useMemo(() => toMediaUrlList(questionData.imageUrls?.length ? questionData.imageUrls : questionData.imageUrl), [questionData.imageUrls, questionData.imageUrl]);
+    const allAudios = useMemo(() => toMediaUrlList(questionData.audioUrls?.length ? questionData.audioUrls : questionData.audioUrl), [questionData.audioUrls, questionData.audioUrl]);
     const [filledAnswers, setFilledAnswers] = useState(() => {
         if (userAnswer)
             return { ...userAnswer };
@@ -133,16 +126,16 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
             return a.localeCompare(b);
         });
     }, [content]);
-    const allFilled = expectedBlankKeys.every(k => filledAnswers[k]?.trim());
-    const isAllCorrect = isReviewMode && expectedBlankKeys.every((k) => isWfsfBlankCorrect(filledAnswers[k] || '', answers[k], caseSensitive));
+    const allFilled = expectedBlankKeys.every((k) => wfsfFilledText(filledAnswers[k]).trim());
+    const isAllCorrect = isReviewMode && expectedBlankKeys.every((k) => isWfsfBlankCorrect(wfsfFilledText(filledAnswers[k]), answers[k], caseSensitive));
     // Header = page rubric. Pearson preview maps draft.instruction → explanation.
     const rawExplanation = String(explanation || questionData.explanation || '').trim();
     const headerInstruction = String(instruction || dataInstruction || rawExplanation || '').trim();
     // Header reads "Bài x: rubric" — the question type name is never shown.
     const numberLabel = typeof questionNumber === 'number' && questionNumber > 0
-        ? `Bài ${questionNumber}`
+        ? t('question.viewer.partN', { n: questionNumber })
         : '';
-    const headerTitle = numberLabel ? (_jsxs(_Fragment, { children: [_jsxs("strong", { className: "font-bold", children: [numberLabel, headerInstruction ? ':' : ''] }), headerInstruction ? ` ${headerInstruction}` : ''] })) : (headerInstruction || DEFAULT_WFSF_HEADER);
+    const headerTitle = numberLabel ? (_jsxs(_Fragment, { children: [_jsxs("strong", { className: "font-bold", children: [numberLabel, headerInstruction ? ':' : ''] }), headerInstruction ? ` ${headerInstruction}` : ''] })) : (headerInstruction || t('question.viewer.wfsfDefaultTitle'));
     // Do not re-show the same rubric under "Giải thích".
     const displayExplanation = rawExplanation && rawExplanation !== headerInstruction ? rawExplanation : '';
     const handleInputChange = useCallback((key, value) => {
@@ -159,7 +152,7 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
         setExpandedBlank(null);
     }, [isReviewMode, onAnswerChange]);
     const renderBlank = useCallback((key, reactKey) => {
-        const filled = filledAnswers[key] || '';
+        const filled = wfsfFilledText(filledAnswers[key]);
         const isCorrectFill = isReviewMode && isWfsfBlankCorrect(filled, answers[key], caseSensitive);
         const isWrongFill = isReviewMode && !!filled && !isCorrectFill;
         const blankOptions = optionsByKey.get(key);

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

@@ -15,6 +15,7 @@ import { Textarea } from '../../../../components/ui/textarea';
 import { Switch } from '../../../../components/ui/switch';
 import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
+import { toMediaUrlList } from '../../../../shared/lib/utils/media-urls';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { ImagePreview } from '../../../../components/ui/image-preview';
 import { WordFillStructuredFormClient } from './WordFillStructuredFormClient';
@@ -141,14 +142,7 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [blankStyle, setBlankStyle] = useState(initialData?.blankStyle ?? 'word');
     // ── Multiple Images & Audios ────────────────────────────────────────────────
-    const [imageUrls, setImageUrls] = useState(() => {
-        if (Array.isArray(initialData?.imageUrls) && initialData.imageUrls.length > 0) {
-            return initialData.imageUrls.filter(Boolean);
-        }
-        if (initialData?.imageUrl)
-            return [initialData.imageUrl];
-        return [];
-    });
+    const [imageUrls, setImageUrls] = useState(() => toMediaUrlList(initialData?.imageUrls?.length ? initialData.imageUrls : initialData?.imageUrl));
     const [audioUrls, setAudioUrls] = useState(() => {
         if (Array.isArray(initialData?.audioUrls) && initialData.audioUrls.length > 0) {
             return initialData.audioUrls.filter(Boolean);

package/dist/components/questions/types/word-fill-structured-form/map-wfsf-question-data.js

@@ -1,3 +1,4 @@
+import { toMediaUrlList } from '../../../../shared/lib/utils/media-urls';
 import { normalizeWfsfAnswersMap } from '../../../../shared/lib/utils/wfsf-blank-match';
 import { detectWfsfBankMode, normalizeOptionsWordBank, normalizeSharedWordBank, } from './wfsf-word-bank.utils';
 function asRecord(value) {
@@ -79,19 +80,11 @@ export function mapQuestionToWfsfData(question) {
             ? normalizeOptionsWordBank(rawWordBank, blankKeys)
             : undefined;
     const groupPayload = asRecord(asRecord(source.questionGroup).payload);
-    const rawImageUrls = apiContent.imageUrls || answer.imageUrls;
-    const imageUrls = Array.isArray(rawImageUrls)
-        ? rawImageUrls.filter(Boolean)
-        : (apiContent.imageUrl || answer.imageUrl ? [String(apiContent.imageUrl || answer.imageUrl)] : []);
-    const rawAudioUrls = apiContent.audioUrls || answer.audioUrls;
-    const audioUrls = Array.isArray(rawAudioUrls)
-        ? rawAudioUrls.filter(Boolean)
-        : (apiContent.audioUrl || answer.audioUrl || source.audio_url
-            ? [String(apiContent.audioUrl || answer.audioUrl || source.audio_url)]
-            : []);
+    const imageUrls = toMediaUrlList(apiContent.imageUrls || answer.imageUrls || apiContent.imageUrl || answer.imageUrl);
+    const audioUrls = toMediaUrlList(apiContent.audioUrls || answer.audioUrls || apiContent.audioUrl || answer.audioUrl || source.audio_url);
     return {
         title: String(apiContent.title || answer.title || ''),
-        imageUrl: imageUrls[0] || String(apiContent.imageUrl || answer.imageUrl || ''),
+        imageUrl: imageUrls[0] || '',
         imageUrls,
         audioUrl: audioUrls[0] || String(apiContent.audioUrl || answer.audioUrl || source.audio_url || ''),
         audioUrls,

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

@@ -1,3 +1,4 @@
+import { toMediaUrlList } from '../../../../shared/lib/utils/media-urls';
 import { compactWfsfAnswersMap } from '../../../../shared/lib/utils/wfsf-blank-match';
 /**
  * Transform WORD_FILL_STRUCTURED_FORM creator data → API format
@@ -19,17 +20,11 @@ export const transformWordFillStructuredForm = (question) => {
         answerData.groupSubtitle ||
         answerData.groupContent ||
         answerData.groupImageUrl);
-    const rawImageUrls = answerData.imageUrls;
-    const imageUrls = Array.isArray(rawImageUrls)
-        ? rawImageUrls.filter(Boolean)
-        : (answerData.imageUrl ? [answerData.imageUrl] : []);
-    const rawAudioUrls = answerData.audioUrls;
-    const audioUrls = Array.isArray(rawAudioUrls)
-        ? rawAudioUrls.filter(Boolean)
-        : (answerData.audioUrl ? [answerData.audioUrl] : []);
+    const imageUrls = toMediaUrlList(answerData.imageUrls ?? answerData.imageUrl);
+    const audioUrls = toMediaUrlList(answerData.audioUrls ?? answerData.audioUrl);
     const apiContent = {
         title: answerData.title || '',
-        imageUrl: imageUrls[0] || answerData.imageUrl || '',
+        imageUrl: imageUrls[0] || '',
         imageUrls,
         audioUrl: audioUrls[0] || answerData.audioUrl || '',
         audioUrls,

package/dist/components/questions/viewer/QuestionViewer.d.ts

@@ -12,6 +12,8 @@ interface QuestionViewerProps {
         partialScore?: number;
         feedback?: string;
     }>;
+    onItemRecorded?: (flattenIndex: number, blob: Blob) => void;
+    uploadingIndex?: number | null;
 }
-export declare function QuestionViewer({ question, onSubmitAnswer, isReviewMode, userAnswer, gradeDetails, }: QuestionViewerProps): import("react").JSX.Element;
+export declare function QuestionViewer({ question, onSubmitAnswer, isReviewMode, userAnswer, gradeDetails, onItemRecorded, uploadingIndex, }: QuestionViewerProps): import("react").JSX.Element;
 export {};

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

@@ -6,7 +6,7 @@ import { Input } from '../../../components/ui/input';
 import { Check, Volume2, X } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { t } from '../../../shared/lib/i18n';
+import { t, useT } from '../../../shared/lib/i18n';
 import { ReadAndColorObjectsClient } from '../types/read-and-color-objects/ReadAndColorObjectsClient';
 import { ArrangeLettersIntoWordsClient } from '../types/arrange-letters-into-words/ArrangeLettersIntoWordsClient';
 import { WriteShortParagraphClient } from '../types/write-short-paragraph/WriteShortParagraphClient';
@@ -38,7 +38,14 @@ import { MatchWordToPictureViewer } from './MatchWordToPictureViewer';
 import { MatchWordToPictureGroupViewer } from './MatchWordToPictureGroupViewer';
 import { MatchColumnsToMakeSentencesViewer } from './MatchColumnsToMakeSentencesViewer';
 import { WordOrderingGroupViewer } from './WordOrderingGroupViewer';
-export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false, userAnswer, gradeDetails, }) {
+function readCueAudioKey(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return null;
+    const key = value.audioKey;
+    return typeof key === 'string' && key.trim() !== '' ? key : null;
+}
+export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false, userAnswer, gradeDetails, onItemRecorded, uploadingIndex = null, }) {
+    const translate = useT();
     const [selectedAnswer, setSelectedAnswer] = useState(userAnswer || null);
     const [playCount, setPlayCount] = useState(0);
     const audioRef = useRef(null);
@@ -214,6 +221,7 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             next[index] = value;
             setFillBlankAnswers(next);
             setSelectedAnswer(next);
+            onSubmitAnswer?.(next);
         };
         const isCorrect = (index, value) => {
             const correctAnswer = blanks[index] ?? '';
@@ -517,11 +525,13 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             case 'ANSWER_THE_QUESTION_GROUP':
                 return (_jsx(AnswerTheQuestionGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
             case 'SPEAKING_CUE_CARD':
-                return (_jsx(SpeakingCueCardClient, { questionData: mapQuestionToSpeakingCueCardData(question), isReviewMode: isReviewMode }));
+                return (_jsx(SpeakingCueCardClient, { questionData: mapQuestionToSpeakingCueCardData(question), isReviewMode: isReviewMode, audioKey: readCueAudioKey(userAnswer), uploading: uploadingIndex === 0, onRecorded: isReviewMode || !onItemRecorded
+                        ? undefined
+                        : (blob) => onItemRecorded(0, blob) }));
             case 'SPONTANEOUS_QA':
                 return (_jsx(SpontaneousQAClient, { questionData: mapQuestionToSpontaneousQAData(question), isReviewMode: isReviewMode }));
             case 'SPONTANEOUS_QA_GROUP':
-                return (_jsx(SpontaneousQaGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, gradeDetails: gradeDetails, disabled: !onSubmitAnswer }));
+                return (_jsx(SpontaneousQaGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, gradeDetails: gradeDetails, onItemRecorded: isReviewMode ? undefined : onItemRecorded, uploadingIndex: uploadingIndex, disabled: !onSubmitAnswer && !onItemRecorded }));
             case 'WORD_ORDER_AND_MATCH_GROUP':
             case 'WORD_ORDER_AND_MATCH':
                 return (_jsx(WordOrderAndMatchGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, onSubmitAnswer: onSubmitAnswer }));
@@ -572,7 +582,7 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             case 'CHOOSE_THEN_ANSWER_GROUP':
                 return (_jsx(ChooseThenAnswerGroupViewer, { question: question, isReviewMode: isReviewMode, userAnswer: userAnswer, gradeDetails: gradeDetails, onSubmitAnswer: onSubmitAnswer }));
             default:
-                return _jsxs("div", { children: ["Lo\u1EA1i c\u00E2u h\u1ECFi kh\u00F4ng \u0111\u01B0\u1EE3c h\u1ED7 tr\u1EE3: ", question.type] });
+                return _jsx("div", { children: t('question.viewer.unsupported', { type: question.type }) });
         }
     };
     /**
@@ -588,25 +598,32 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
             question.type === 'ANSWER_THE_QUESTION') {
             return null;
         }
-        // Modern fill stems live entirely in the body; title is a short label.
-        if (question.type === 'FILL_IN_BLANK' ||
-            question.type === 'WORD_FILL_PARAGRAPH') {
-            return 'Câu hỏi';
-        }
+        const typeKey = `question.type.${question.type}`;
+        const typeLabel = translate(typeKey);
+        const typedTitle = typeLabel === typeKey ? translate('question.viewer.fallbackTitle') : typeLabel;
         if (typeof question.content === 'string') {
-            return stripLightweightMarkdown(question.content) || 'Câu hỏi';
+            return stripLightweightMarkdown(question.content) || typedTitle;
         }
         const c = question.content;
-        const raw = c?.title || c?.question || c?.paragraph || '';
-        // Prefer explicit title; if question/paragraph is stem-like, avoid raw dump.
-        if (c?.title)
-            return stripLightweightMarkdown(c.title) || 'Câu hỏi';
+        const metaTitle = typeof c?.meta?.title === 'string' ? c.meta.title : '';
+        const explicitTitle = (typeof c?.title === 'string' && c.title) || metaTitle;
+        if (explicitTitle && explicitTitle.length <= 80 && !/\{\d+\}/.test(explicitTitle) && !/\*\*/.test(explicitTitle)) {
+            return stripLightweightMarkdown(explicitTitle) || typedTitle;
+        }
+        // Modern fill stems live entirely in the body; title is a short type label.
+        if (question.type === 'FILL_IN_BLANK' ||
+            question.type === 'WORD_FILL_PARAGRAPH') {
+            return typedTitle;
+        }
+        const raw = c?.question || c?.paragraph || '';
         if (typeof raw === 'string' && (/\{\d+\}/.test(raw) || /\*\*/.test(raw))) {
-            return 'Câu hỏi';
+            return typedTitle;
         }
-        return stripLightweightMarkdown(raw) || 'Câu hỏi';
+        const stripped = stripLightweightMarkdown(typeof raw === 'string' ? raw : '');
+        return stripped && stripped.length <= 80 ? stripped : typedTitle;
     };
-    const cardTitle = resolveCardTitle();
+    const isGroupQuestion = question.type.endsWith('_GROUP') || Boolean(question.isGroup);
+    const cardTitle = isGroupQuestion ? null : resolveCardTitle();
     // WFSF and Crossword already have their own bordered shell — avoid double Card border.
     if (question.type === 'WORD_FILL_STRUCTURED_FORM' ||
         question.type === 'CROSSWORD_PUZZLE' ||
@@ -614,7 +631,7 @@ export function QuestionViewer({ question, onSubmitAnswer, isReviewMode = false,
         question.type === 'ANSWER_THE_QUESTION') {
         return (_jsx("div", { className: "space-y-4", children: renderQuestion() }));
     }
-    return (_jsxs(Card, { children: [cardTitle ? (_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsx("span", { className: "min-w-0 pr-2 text-base font-semibold leading-snug", children: cardTitle }), _jsxs("span", { className: "shrink-0 text-sm font-normal text-gray-500", children: [question.points, " \u0111i\u1EC3m"] })] }) })) : null, _jsx(CardContent, { className: cardTitle ? 'space-y-4' : 'space-y-4 pt-4', children: renderQuestion() })] }));
+    return (_jsxs(Card, { children: [cardTitle ? (_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsx("span", { className: "min-w-0 pr-2 text-base font-semibold leading-snug", children: cardTitle }), _jsx("span", { className: "shrink-0 text-sm font-normal text-gray-500", children: translate('question.viewer.points', { count: question.points }) })] }) })) : null, _jsx(CardContent, { className: cardTitle ? 'space-y-4' : 'space-y-4 pt-4', children: renderQuestion() })] }));
 }
 /** Drop lightweight markdown markers for plain header labels (not full token parse). */
 function stripLightweightMarkdown(text) {

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

@@ -15,5 +15,5 @@ function readStudentAnswer(value) {
     };
 }
 export function SpontaneousQaGroupViewer({ question, isReviewMode = false, userAnswer, onItemRecorded, uploadingIndex, gradeDetails, disabled, }) {
-    return (_jsx(SpontaneousQaGroupClient, { questionData: mapQuestionToSpontaneousQaGroupData(question), isReviewMode: isReviewMode, userAnswer: readStudentAnswer(userAnswer), onItemRecorded: isReviewMode ? undefined : onItemRecorded, uploadingIndex: uploadingIndex, gradeDetails: isReviewMode ? undefined : gradeDetails, disabled: disabled }));
+    return (_jsx(SpontaneousQaGroupClient, { questionData: mapQuestionToSpontaneousQaGroupData(question), isReviewMode: isReviewMode, userAnswer: readStudentAnswer(userAnswer), onItemRecorded: isReviewMode ? undefined : onItemRecorded, uploadingIndex: uploadingIndex, gradeDetails: gradeDetails, disabled: disabled }));
 }

package/dist/shared/index.d.ts

@@ -3,6 +3,8 @@ export * from './constants/QueryKeyConstant';
 export * from './constants/exam-level.enum';
 export * from './constants/routes';
 export * from './lib/utils';
+export { useLocaleStore } from './lib/stores/localeStore';
+export type { Locale as ExamSdkLocale } from './lib/stores/localeStore';
 export * from '../components/questions/_shared';
 export * from './types';
 export * from './lib/utils/question-transform';

package/dist/shared/index.js

@@ -3,6 +3,7 @@ export * from './constants/QueryKeyConstant';
 export * from './constants/exam-level.enum';
 export * from './constants/routes';
 export * from './lib/utils';
+export { useLocaleStore } from './lib/stores/localeStore';
 export * from '../components/questions/_shared';
 export * from './types';
 export * from './lib/utils/question-transform';

package/dist/shared/lib/i18n/messages/en/common.d.ts

@@ -120,5 +120,43 @@ declare const common: {
     readonly 'common.badge.source.createdByAdmin': "Created by admin";
     readonly 'common.badge.source.createdByTeacher': "Created by teacher";
     readonly 'common.badge.source.createdFromEBM': "Synced from EBM";
+    readonly 'question.viewer.fallbackTitle': "Question";
+    readonly 'question.viewer.points': "{count} pts";
+    readonly 'question.viewer.questionN': "Question {n}";
+    readonly 'question.viewer.partN': "Part {n}";
+    readonly 'question.viewer.example': "Example";
+    readonly 'question.viewer.correct': "Correct";
+    readonly 'question.viewer.wrong': "Incorrect";
+    readonly 'question.viewer.readingPassage': "Reading passage";
+    readonly 'question.viewer.placeholder': "Enter your answer…";
+    readonly 'question.viewer.yourAnswer': "Your answer";
+    readonly 'question.viewer.writePlaceholder': "Write your answer here…";
+    readonly 'question.viewer.answerKey': "Answer key";
+    readonly 'question.viewer.noAnswer': "No answer yet";
+    readonly 'question.viewer.notWritten': "Not written";
+    readonly 'question.viewer.sample': "Sample";
+    readonly 'question.viewer.chooseScore': "Choose {score}";
+    readonly 'question.viewer.writeScore': "Write {score}";
+    readonly 'question.viewer.expandPassage': "Show more";
+    readonly 'question.viewer.collapsePassage': "Show less";
+    readonly 'question.viewer.unsupported': "Unsupported question type: {type}";
+    readonly 'question.viewer.missingPrompt': "Question text is missing";
+    readonly 'question.viewer.imageAlt': "Image {n}";
+    readonly 'question.viewer.itemImageAlt': "Question {n} image {m}";
+    readonly 'question.viewer.atqgDefaultInstruction': "Read the text and answer the questions.";
+    readonly 'question.viewer.wfsfDefaultTitle': "Fill in the structured form";
+    readonly 'question.type.ANSWER_THE_QUESTION_GROUP': "Answer the questions";
+    readonly 'question.type.CHOOSE_THEN_ANSWER_GROUP': "Choose then answer";
+    readonly 'question.type.FILL_IN_BLANK': "Fill in the blank";
+    readonly 'question.type.FILL_IN_BLANK_GROUP': "Fill in the blanks";
+    readonly 'question.type.WORD_FILL_STRUCTURED_FORM': "Structured form";
+    readonly 'question.type.WORD_FILL_PARAGRAPH': "Fill the paragraph";
+    readonly 'question.type.MATCHING_WITH_LINES_GROUP': "Match the columns";
+    readonly 'question.type.MATCH_WORD_TO_PICTURE': "Match words to pictures";
+    readonly 'question.type.MATCH_WORD_TO_PICTURE_GROUP': "Match words to pictures";
+    readonly 'question.type.CROSSWORD_PUZZLE': "Crossword";
+    readonly 'question.type.FIND_WORDS_IN_MATRIX': "Find the words";
+    readonly 'question.type.CHOOSE_THE_CORRECT_ANSWER': "Choose the correct answer";
+    readonly 'question.type.CHOOSE_THE_CORRECT_ANSWER_GROUP': "Choose the correct answers";
 };
 export default common;

package/dist/shared/lib/i18n/messages/en/common.js

@@ -136,5 +136,44 @@ const common = {
     'common.badge.source.createdByAdmin': 'Created by admin',
     'common.badge.source.createdByTeacher': 'Created by teacher',
     'common.badge.source.createdFromEBM': 'Synced from EBM',
+    // Question viewer chrome (homework / examine)
+    'question.viewer.fallbackTitle': 'Question',
+    'question.viewer.points': '{count} pts',
+    'question.viewer.questionN': 'Question {n}',
+    'question.viewer.partN': 'Part {n}',
+    'question.viewer.example': 'Example',
+    'question.viewer.correct': 'Correct',
+    'question.viewer.wrong': 'Incorrect',
+    'question.viewer.readingPassage': 'Reading passage',
+    'question.viewer.placeholder': 'Enter your answer…',
+    'question.viewer.yourAnswer': 'Your answer',
+    'question.viewer.writePlaceholder': 'Write your answer here…',
+    'question.viewer.answerKey': 'Answer key',
+    'question.viewer.noAnswer': 'No answer yet',
+    'question.viewer.notWritten': 'Not written',
+    'question.viewer.sample': 'Sample',
+    'question.viewer.chooseScore': 'Choose {score}',
+    'question.viewer.writeScore': 'Write {score}',
+    'question.viewer.expandPassage': 'Show more',
+    'question.viewer.collapsePassage': 'Show less',
+    'question.viewer.unsupported': 'Unsupported question type: {type}',
+    'question.viewer.missingPrompt': 'Question text is missing',
+    'question.viewer.imageAlt': 'Image {n}',
+    'question.viewer.itemImageAlt': 'Question {n} image {m}',
+    'question.viewer.atqgDefaultInstruction': 'Read the text and answer the questions.',
+    'question.viewer.wfsfDefaultTitle': 'Fill in the structured form',
+    'question.type.ANSWER_THE_QUESTION_GROUP': 'Answer the questions',
+    'question.type.CHOOSE_THEN_ANSWER_GROUP': 'Choose then answer',
+    'question.type.FILL_IN_BLANK': 'Fill in the blank',
+    'question.type.FILL_IN_BLANK_GROUP': 'Fill in the blanks',
+    'question.type.WORD_FILL_STRUCTURED_FORM': 'Structured form',
+    'question.type.WORD_FILL_PARAGRAPH': 'Fill the paragraph',
+    'question.type.MATCHING_WITH_LINES_GROUP': 'Match the columns',
+    'question.type.MATCH_WORD_TO_PICTURE': 'Match words to pictures',
+    'question.type.MATCH_WORD_TO_PICTURE_GROUP': 'Match words to pictures',
+    'question.type.CROSSWORD_PUZZLE': 'Crossword',
+    'question.type.FIND_WORDS_IN_MATRIX': 'Find the words',
+    'question.type.CHOOSE_THE_CORRECT_ANSWER': 'Choose the correct answer',
+    'question.type.CHOOSE_THE_CORRECT_ANSWER_GROUP': 'Choose the correct answers',
 };
 export default common;

package/dist/shared/lib/i18n/messages/en.d.ts

@@ -2297,5 +2297,43 @@ declare const en: {
     readonly 'common.badge.source.createdByAdmin': "Created by admin";
     readonly 'common.badge.source.createdByTeacher': "Created by teacher";
     readonly 'common.badge.source.createdFromEBM': "Synced from EBM";
+    readonly 'question.viewer.fallbackTitle': "Question";
+    readonly 'question.viewer.points': "{count} pts";
+    readonly 'question.viewer.questionN': "Question {n}";
+    readonly 'question.viewer.partN': "Part {n}";
+    readonly 'question.viewer.example': "Example";
+    readonly 'question.viewer.correct': "Correct";
+    readonly 'question.viewer.wrong': "Incorrect";
+    readonly 'question.viewer.readingPassage': "Reading passage";
+    readonly 'question.viewer.placeholder': "Enter your answer…";
+    readonly 'question.viewer.yourAnswer': "Your answer";
+    readonly 'question.viewer.writePlaceholder': "Write your answer here…";
+    readonly 'question.viewer.answerKey': "Answer key";
+    readonly 'question.viewer.noAnswer': "No answer yet";
+    readonly 'question.viewer.notWritten': "Not written";
+    readonly 'question.viewer.sample': "Sample";
+    readonly 'question.viewer.chooseScore': "Choose {score}";
+    readonly 'question.viewer.writeScore': "Write {score}";
+    readonly 'question.viewer.expandPassage': "Show more";
+    readonly 'question.viewer.collapsePassage': "Show less";
+    readonly 'question.viewer.unsupported': "Unsupported question type: {type}";
+    readonly 'question.viewer.missingPrompt': "Question text is missing";
+    readonly 'question.viewer.imageAlt': "Image {n}";
+    readonly 'question.viewer.itemImageAlt': "Question {n} image {m}";
+    readonly 'question.viewer.atqgDefaultInstruction': "Read the text and answer the questions.";
+    readonly 'question.viewer.wfsfDefaultTitle': "Fill in the structured form";
+    readonly 'question.type.ANSWER_THE_QUESTION_GROUP': "Answer the questions";
+    readonly 'question.type.CHOOSE_THEN_ANSWER_GROUP': "Choose then answer";
+    readonly 'question.type.FILL_IN_BLANK': "Fill in the blank";
+    readonly 'question.type.FILL_IN_BLANK_GROUP': "Fill in the blanks";
+    readonly 'question.type.WORD_FILL_STRUCTURED_FORM': "Structured form";
+    readonly 'question.type.WORD_FILL_PARAGRAPH': "Fill the paragraph";
+    readonly 'question.type.MATCHING_WITH_LINES_GROUP': "Match the columns";
+    readonly 'question.type.MATCH_WORD_TO_PICTURE': "Match words to pictures";
+    readonly 'question.type.MATCH_WORD_TO_PICTURE_GROUP': "Match words to pictures";
+    readonly 'question.type.CROSSWORD_PUZZLE': "Crossword";
+    readonly 'question.type.FIND_WORDS_IN_MATRIX': "Find the words";
+    readonly 'question.type.CHOOSE_THE_CORRECT_ANSWER': "Choose the correct answer";
+    readonly 'question.type.CHOOSE_THE_CORRECT_ANSWER_GROUP': "Choose the correct answers";
 };
 export default en;

package/dist/shared/lib/i18n/messages/vi/common.d.ts

@@ -120,5 +120,43 @@ declare const common: {
     readonly 'common.badge.source.createdByAdmin': "Admin tạo";
     readonly 'common.badge.source.createdByTeacher': "Giáo viên tạo";
     readonly 'common.badge.source.createdFromEBM': "Đồng bộ EBM";
+    readonly 'question.viewer.fallbackTitle': "Câu hỏi";
+    readonly 'question.viewer.points': "{count} điểm";
+    readonly 'question.viewer.questionN': "Câu {n}";
+    readonly 'question.viewer.partN': "Bài {n}";
+    readonly 'question.viewer.example': "Câu ví dụ";
+    readonly 'question.viewer.correct': "Đúng";
+    readonly 'question.viewer.wrong': "Sai";
+    readonly 'question.viewer.readingPassage': "Bài đọc";
+    readonly 'question.viewer.placeholder': "Nhập câu trả lời...";
+    readonly 'question.viewer.yourAnswer': "Câu trả lời của bạn";
+    readonly 'question.viewer.writePlaceholder': "Viết câu trả lời tại đây...";
+    readonly 'question.viewer.answerKey': "Đáp án";
+    readonly 'question.viewer.noAnswer': "Chưa có đáp án";
+    readonly 'question.viewer.notWritten': "Chưa viết";
+    readonly 'question.viewer.sample': "Mẫu";
+    readonly 'question.viewer.chooseScore': "Chọn {score}";
+    readonly 'question.viewer.writeScore': "Viết {score}";
+    readonly 'question.viewer.expandPassage': "Xem thêm";
+    readonly 'question.viewer.collapsePassage': "Thu gọn";
+    readonly 'question.viewer.unsupported': "Loại câu hỏi không được hỗ trợ: {type}";
+    readonly 'question.viewer.missingPrompt': "Câu hỏi chưa được nhập";
+    readonly 'question.viewer.imageAlt': "Hình ảnh ({n})";
+    readonly 'question.viewer.itemImageAlt': "Hình ảnh câu {n} ({m})";
+    readonly 'question.viewer.atqgDefaultInstruction': "Đọc đoạn văn và trả lời câu hỏi.";
+    readonly 'question.viewer.wfsfDefaultTitle': "Điền từ vào biểu mẫu có cấu trúc";
+    readonly 'question.type.ANSWER_THE_QUESTION_GROUP': "Trả lời câu hỏi";
+    readonly 'question.type.CHOOSE_THEN_ANSWER_GROUP': "Chọn rồi trả lời";
+    readonly 'question.type.FILL_IN_BLANK': "Điền từ";
+    readonly 'question.type.FILL_IN_BLANK_GROUP': "Điền từ";
+    readonly 'question.type.WORD_FILL_STRUCTURED_FORM': "Điền từ vào biểu mẫu";
+    readonly 'question.type.WORD_FILL_PARAGRAPH': "Điền từ vào đoạn";
+    readonly 'question.type.MATCHING_WITH_LINES_GROUP': "Nối cột";
+    readonly 'question.type.MATCH_WORD_TO_PICTURE': "Nối từ với tranh";
+    readonly 'question.type.MATCH_WORD_TO_PICTURE_GROUP': "Nối từ với tranh";
+    readonly 'question.type.CROSSWORD_PUZZLE': "Ô chữ";
+    readonly 'question.type.FIND_WORDS_IN_MATRIX': "Tìm từ";
+    readonly 'question.type.CHOOSE_THE_CORRECT_ANSWER': "Chọn đáp án đúng";
+    readonly 'question.type.CHOOSE_THE_CORRECT_ANSWER_GROUP': "Chọn đáp án đúng";
 };
 export default common;

package/dist/shared/lib/i18n/messages/vi/common.js

@@ -136,5 +136,44 @@ const common = {
     'common.badge.source.createdByAdmin': 'Admin tạo',
     'common.badge.source.createdByTeacher': 'Giáo viên tạo',
     'common.badge.source.createdFromEBM': 'Đồng bộ EBM',
+    // Question viewer chrome (homework / examine)
+    'question.viewer.fallbackTitle': 'Câu hỏi',
+    'question.viewer.points': '{count} điểm',
+    'question.viewer.questionN': 'Câu {n}',
+    'question.viewer.partN': 'Bài {n}',
+    'question.viewer.example': 'Câu ví dụ',
+    'question.viewer.correct': 'Đúng',
+    'question.viewer.wrong': 'Sai',
+    'question.viewer.readingPassage': 'Bài đọc',
+    'question.viewer.placeholder': 'Nhập câu trả lời...',
+    'question.viewer.yourAnswer': 'Câu trả lời của bạn',
+    'question.viewer.writePlaceholder': 'Viết câu trả lời tại đây...',
+    'question.viewer.answerKey': 'Đáp án',
+    'question.viewer.noAnswer': 'Chưa có đáp án',
+    'question.viewer.notWritten': 'Chưa viết',
+    'question.viewer.sample': 'Mẫu',
+    'question.viewer.chooseScore': 'Chọn {score}',
+    'question.viewer.writeScore': 'Viết {score}',
+    'question.viewer.expandPassage': 'Xem thêm',
+    'question.viewer.collapsePassage': 'Thu gọn',
+    'question.viewer.unsupported': 'Loại câu hỏi không được hỗ trợ: {type}',
+    'question.viewer.missingPrompt': 'Câu hỏi chưa được nhập',
+    'question.viewer.imageAlt': 'Hình ảnh ({n})',
+    'question.viewer.itemImageAlt': 'Hình ảnh câu {n} ({m})',
+    'question.viewer.atqgDefaultInstruction': 'Đọc đoạn văn và trả lời câu hỏi.',
+    'question.viewer.wfsfDefaultTitle': 'Điền từ vào biểu mẫu có cấu trúc',
+    'question.type.ANSWER_THE_QUESTION_GROUP': 'Trả lời câu hỏi',
+    'question.type.CHOOSE_THEN_ANSWER_GROUP': 'Chọn rồi trả lời',
+    'question.type.FILL_IN_BLANK': 'Điền từ',
+    'question.type.FILL_IN_BLANK_GROUP': 'Điền từ',
+    'question.type.WORD_FILL_STRUCTURED_FORM': 'Điền từ vào biểu mẫu',
+    'question.type.WORD_FILL_PARAGRAPH': 'Điền từ vào đoạn',
+    'question.type.MATCHING_WITH_LINES_GROUP': 'Nối cột',
+    'question.type.MATCH_WORD_TO_PICTURE': 'Nối từ với tranh',
+    'question.type.MATCH_WORD_TO_PICTURE_GROUP': 'Nối từ với tranh',
+    'question.type.CROSSWORD_PUZZLE': 'Ô chữ',
+    'question.type.FIND_WORDS_IN_MATRIX': 'Tìm từ',
+    'question.type.CHOOSE_THE_CORRECT_ANSWER': 'Chọn đáp án đúng',
+    'question.type.CHOOSE_THE_CORRECT_ANSWER_GROUP': 'Chọn đáp án đúng',
 };
 export default common;

package/dist/shared/lib/i18n/messages/vi.d.ts

@@ -2297,5 +2297,43 @@ declare const vi: {
     readonly 'common.badge.source.createdByAdmin': "Admin tạo";
     readonly 'common.badge.source.createdByTeacher': "Giáo viên tạo";
     readonly 'common.badge.source.createdFromEBM': "Đồng bộ EBM";
+    readonly 'question.viewer.fallbackTitle': "Câu hỏi";
+    readonly 'question.viewer.points': "{count} điểm";
+    readonly 'question.viewer.questionN': "Câu {n}";
+    readonly 'question.viewer.partN': "Bài {n}";
+    readonly 'question.viewer.example': "Câu ví dụ";
+    readonly 'question.viewer.correct': "Đúng";
+    readonly 'question.viewer.wrong': "Sai";
+    readonly 'question.viewer.readingPassage': "Bài đọc";
+    readonly 'question.viewer.placeholder': "Nhập câu trả lời...";
+    readonly 'question.viewer.yourAnswer': "Câu trả lời của bạn";
+    readonly 'question.viewer.writePlaceholder': "Viết câu trả lời tại đây...";
+    readonly 'question.viewer.answerKey': "Đáp án";
+    readonly 'question.viewer.noAnswer': "Chưa có đáp án";
+    readonly 'question.viewer.notWritten': "Chưa viết";
+    readonly 'question.viewer.sample': "Mẫu";
+    readonly 'question.viewer.chooseScore': "Chọn {score}";
+    readonly 'question.viewer.writeScore': "Viết {score}";
+    readonly 'question.viewer.expandPassage': "Xem thêm";
+    readonly 'question.viewer.collapsePassage': "Thu gọn";
+    readonly 'question.viewer.unsupported': "Loại câu hỏi không được hỗ trợ: {type}";
+    readonly 'question.viewer.missingPrompt': "Câu hỏi chưa được nhập";
+    readonly 'question.viewer.imageAlt': "Hình ảnh ({n})";
+    readonly 'question.viewer.itemImageAlt': "Hình ảnh câu {n} ({m})";
+    readonly 'question.viewer.atqgDefaultInstruction': "Đọc đoạn văn và trả lời câu hỏi.";
+    readonly 'question.viewer.wfsfDefaultTitle': "Điền từ vào biểu mẫu có cấu trúc";
+    readonly 'question.type.ANSWER_THE_QUESTION_GROUP': "Trả lời câu hỏi";
+    readonly 'question.type.CHOOSE_THEN_ANSWER_GROUP': "Chọn rồi trả lời";
+    readonly 'question.type.FILL_IN_BLANK': "Điền từ";
+    readonly 'question.type.FILL_IN_BLANK_GROUP': "Điền từ";
+    readonly 'question.type.WORD_FILL_STRUCTURED_FORM': "Điền từ vào biểu mẫu";
+    readonly 'question.type.WORD_FILL_PARAGRAPH': "Điền từ vào đoạn";
+    readonly 'question.type.MATCHING_WITH_LINES_GROUP': "Nối cột";
+    readonly 'question.type.MATCH_WORD_TO_PICTURE': "Nối từ với tranh";
+    readonly 'question.type.MATCH_WORD_TO_PICTURE_GROUP': "Nối từ với tranh";
+    readonly 'question.type.CROSSWORD_PUZZLE': "Ô chữ";
+    readonly 'question.type.FIND_WORDS_IN_MATRIX': "Tìm từ";
+    readonly 'question.type.CHOOSE_THE_CORRECT_ANSWER': "Chọn đáp án đúng";
+    readonly 'question.type.CHOOSE_THE_CORRECT_ANSWER_GROUP': "Chọn đáp án đúng";
 };
 export default vi;

package/dist/shared/lib/utils/media-urls.d.ts

@@ -0,0 +1,2 @@
+/** Normalize creator / bank `imageUrl` that may be a string, string[], or Array#toString join. */
+export declare function toMediaUrlList(value: unknown): string[];

package/dist/shared/lib/utils/media-urls.js

@@ -0,0 +1,23 @@
+/** Normalize creator / bank `imageUrl` that may be a string, string[], or Array#toString join. */
+export function toMediaUrlList(value) {
+    if (Array.isArray(value)) {
+        return value.flatMap((item) => toMediaUrlList(item));
+    }
+    if (typeof value !== 'string') {
+        return [];
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return [];
+    }
+    if (trimmed.includes(',') && /https?:\/\//i.test(trimmed)) {
+        const parts = trimmed
+            .split(',')
+            .map((part) => part.trim())
+            .filter(Boolean);
+        if (parts.length > 1 && parts.every((part) => /^https?:\/\//i.test(part) || !part.includes(' '))) {
+            return parts;
+        }
+    }
+    return [trimmed];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinyweb_dev/oe-exam-sdk",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Reusable OceanEdu question components.",
   "type": "module",
   "main": "./dist/index.js",