@tinyweb_dev/oe-exam-sdk 1.0.7 → 1.0.8

package/dist/components/questions/_shared/types/choose-the-correct-answer-group.type.d.ts

@@ -18,12 +18,12 @@ export interface ChooseTheCorrectAnswerGroupItemData {
     points: number;
     questionNumber: number;
     imageUrl?: ChooseTheCorrectAnswerGroupImageUrl;
-    audioUrl?: string;
+    audioUrl?: ChooseTheCorrectAnswerGroupImageUrl;
 }
 export interface ChooseTheCorrectAnswerGroupData {
     instruction: string;
     passage?: string;
-    audioUrl?: string;
+    audioUrl?: ChooseTheCorrectAnswerGroupImageUrl;
     imageUrl?: ChooseTheCorrectAnswerGroupImageUrl;
     items: ChooseTheCorrectAnswerGroupItemData[];
     explanation?: string;

package/dist/components/questions/_shared/types/choose-the-correct-answer-group.type.js

@@ -11,7 +11,11 @@ export function isChooseAnswerGroupOptionFilled(option, optionType = 'text') {
     if (optionType === 'image') {
         return getChooseAnswerGroupOptionImageSrc(option) !== '';
     }
-    return typeof option.text === 'string' && option.text.trim() !== '';
+    if (typeof option.text !== 'string') {
+        return false;
+    }
+    const text = option.text.trim();
+    return text !== '' && text !== '<p></p>' && text !== '<p><br></p>';
 }
 export function toChooseAnswerGroupImageUrls(value) {
     if (Array.isArray(value)) {

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseAnswerGroupImageUpload.d.ts

@@ -5,6 +5,13 @@ export declare function ChooseAnswerGroupImageUploadItem({ index, itemIndex, ima
     onChange: (url: string) => void;
     onRemove: () => void;
 }): import("react").JSX.Element;
+export declare function ChooseAnswerGroupAudioUploadItem({ index, itemIndex, audioUrl, onChange, onRemove, }: {
+    index: number;
+    itemIndex: number;
+    audioUrl: string;
+    onChange: (url: string) => void;
+    onRemove: () => void;
+}): import("react").JSX.Element;
 export declare function ChooseAnswerGroupOptionImageField({ itemIndex, optionIndex, imageUrl, onChange, }: {
     itemIndex: number;
     optionIndex: number;

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseAnswerGroupImageUpload.js

@@ -5,7 +5,7 @@ import { Button } from '../../../../components/ui/button';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { ImagePreview } from '../../../../components/ui/image-preview';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { ImageIcon, Trash2 } from 'lucide-react';
+import { ImageIcon, Trash2, Volume2 } from 'lucide-react';
 function resolveDisplayUrl(imageUrl, previewOverride, fetchedPreviewUrl) {
     if (previewOverride) {
         return previewOverride;
@@ -24,6 +24,9 @@ export function ChooseAnswerGroupImageUploadItem({ index, itemIndex, imageUrl, o
     const displayUrl = resolveDisplayUrl(imageUrl, previewOverride, fetchedPreviewUrl);
     return (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 bg-white p-1.5", children: [_jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-md border border-gray-100 bg-gray-50", children: displayUrl ? (_jsx(ImagePreview, { src: displayUrl, alt: `Hình ảnh ${index + 1}`, className: "h-12 w-12 rounded-md object-contain" })) : (_jsx(ImageIcon, { className: "h-4 w-4 text-gray-300" })) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(FileUpload, { id: `choose-answer-group-image-${itemIndex}-${index}`, label: "", accept: "image/*", value: imageUrl, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: onRemove, title: "Xo\u00E1 \u1EA3nh n\u00E0y", className: "h-7 w-7 shrink-0 text-gray-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }));
 }
+export function ChooseAnswerGroupAudioUploadItem({ index, itemIndex, audioUrl, onChange, onRemove, }) {
+    return (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 bg-white p-1.5", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-indigo-50", children: _jsx(Volume2, { className: "h-3.5 w-3.5 text-indigo-500" }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(FileUpload, { id: `choose-answer-group-audio-${itemIndex}-${index}`, label: "", accept: "audio/*", value: audioUrl, onChange: onChange, maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, prefix: "questions", showPlayButton: true }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: onRemove, title: "Xo\u00E1 audio n\u00E0y", className: "h-7 w-7 shrink-0 text-gray-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }));
+}
 export function ChooseAnswerGroupOptionImageField({ itemIndex, optionIndex, imageUrl, onChange, }) {
     const [previewOverride, setPreviewOverride] = useState('');
     const { previewUrl: fetchedPreviewUrl } = usePresignedFileUrl(imageUrl);

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupClient.js

@@ -3,6 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BookOpen, Check, CircleHelp, Lightbulb, Star, Volume2 } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { RichTextHtml } from '../../../../components/shared/RichTextHtml';
+import { isRichTextEmpty } from '../../../../shared/lib/rich-text';
 import { getChooseAnswerGroupOptionImageSrc, toChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
 function ClientImageItem({ url, alt }) {
     const { previewUrl, isLoading } = usePresignedFileUrl(url);
@@ -22,7 +24,9 @@ function ClientAudio({ url }) {
     }
     return (_jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-indigo-100 bg-indigo-50/70 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 shrink-0 text-indigo-600" }), isLoading ? (_jsx("div", { className: "h-8 flex-1 animate-pulse rounded-md bg-indigo-100" })) : (_jsx("audio", { controls: true, className: "h-9 w-full", src: src, preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }));
 }
-const OPTION_LABELS = ['A', 'B', 'C', 'D', 'E', 'F'];
+function optionLetter(index) {
+    return String.fromCharCode(65 + index);
+}
 export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
     const handleSelect = (itemIndex, optionId) => {
@@ -34,10 +38,10 @@ export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode =
         next[itemIndex] = optionId;
         onAnswerChange(next);
     };
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.audioUrl && _jsx(ClientAudio, { url: questionData.audioUrl }), toChooseAnswerGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh nhóm (${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 text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), toChooseAnswerGroupImageUrls(questionData.audioUrl).map((url, audioIndex) => (_jsx(ClientAudio, { url: url }, `group-audio-${audioIndex}`))), toChooseAnswerGroupImageUrls(questionData.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(questionData.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh nhóm (${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 text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
                 const selectedId = userAnswers[itemIndex];
                 const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
-                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), item.audioUrl && _jsx(ClientAudio, { url: item.audioUrl }), toChooseAnswerGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), item.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: item.options.map((option, optionIndex) => {
+                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-3", children: [!isRichTextEmpty(item.question) && (_jsx(RichTextHtml, { html: item.question, className: "text-sm font-semibold leading-relaxed text-gray-800" })), toChooseAnswerGroupImageUrls(item.audioUrl).map((url, audioIndex) => (_jsx(ClientAudio, { url: url }, `${item.questionNumber}-audio-${audioIndex}`))), toChooseAnswerGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), item.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: item.options.map((option, optionIndex) => {
                                         const isCorrect = option.id === item.correctAnswer;
                                         const isSelected = option.id === selectedId;
                                         const optionImageSrc = getChooseAnswerGroupOptionImageSrc(option);
@@ -49,7 +53,7 @@ export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode =
                                                         ? 'bg-green-500 text-white'
                                                         : isSelected
                                                             ? 'bg-blue-500 text-white'
-                                                            : 'bg-gray-100 text-gray-600'), children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), optionImageSrc ? (_jsx(ClientImageItem, { url: optionImageSrc, alt: `Đáp án ${OPTION_LABELS[optionIndex] || optionIndex + 1}` })) : (_jsx("span", { className: "text-xs text-gray-500", children: `Đáp án ${OPTION_LABELS[optionIndex] || optionIndex + 1}` })), isReviewMode && isCorrect && _jsx(Check, { className: "h-4 w-4 text-green-600" })] }, option.id || optionIndex));
+                                                            : 'bg-gray-100 text-gray-600'), children: optionLetter(optionIndex) }), optionImageSrc ? (_jsx(ClientImageItem, { url: optionImageSrc, alt: `Đáp án ${optionLetter(optionIndex)}` })) : (_jsx("span", { className: "text-xs text-gray-500", children: `Đáp án ${optionLetter(optionIndex)}` })), isReviewMode && isCorrect && _jsx(Check, { className: "h-4 w-4 text-green-600" })] }, option.id || optionIndex));
                                     }) })) : (_jsx("div", { className: "space-y-2", children: item.options.map((option, optionIndex) => {
                                         const isCorrect = option.id === item.correctAnswer;
                                         const isSelected = option.id === selectedId;
@@ -61,7 +65,7 @@ export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode =
                                                         ? 'bg-green-500 text-white'
                                                         : isSelected
                                                             ? 'bg-blue-500 text-white'
-                                                            : 'bg-gray-100 text-gray-600'), children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), _jsx("span", { className: "flex-1 text-gray-800", children: option.text || `Đáp án ${OPTION_LABELS[optionIndex]}` }), isReviewMode && isCorrect && _jsx(Check, { className: "h-4 w-4 text-green-600" })] }, option.id || optionIndex));
+                                                            : 'bg-gray-100 text-gray-600'), children: optionLetter(optionIndex) }), isRichTextEmpty(option.text) ? (_jsx("span", { className: "flex-1 text-gray-800", children: `Đáp án ${optionLetter(optionIndex)}` })) : (_jsx(RichTextHtml, { html: option.text, className: "flex-1 text-gray-800" })), isReviewMode && isCorrect && _jsx(Check, { className: "h-4 w-4 text-green-600" })] }, option.id || optionIndex));
                                     }) }))] })] }, `${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/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupCreator.js

@@ -3,18 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } 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 { Switch } from '../../../../components/ui/switch';
-import { FileUpload } from '../../../../components/ui/file-upload';
 import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { BookOpen, HelpCircle, ImageIcon, Plus, Trash2, Type, Volume2 } from 'lucide-react';
+import { BookOpen, HelpCircle, ImageIcon, Plus, Trash2, Volume2 } from 'lucide-react';
 import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { ChooseTheCorrectAnswerGroupClient } from './ChooseTheCorrectAnswerGroupClient';
-import { ChooseAnswerGroupImageUploadItem, ChooseAnswerGroupOptionImageField, } from './ChooseAnswerGroupImageUpload';
-import { fromChooseAnswerGroupImageUrls, getChooseAnswerGroupOptionImageSrc, isChooseAnswerGroupOptionFilled, toChooseAnswerGroupImageUrls, toEditableChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
-const OPTION_LABELS = ['A', 'B', 'C', 'D', 'E', 'F'];
+import { ChooseAnswerGroupAudioUploadItem, ChooseAnswerGroupImageUploadItem, } from './ChooseAnswerGroupImageUpload';
+import { ChooseTheCorrectAnswerGroupItemEditor } from './ChooseTheCorrectAnswerGroupItemEditor';
+import { fromChooseAnswerGroupImageUrls, isChooseAnswerGroupOptionFilled, toChooseAnswerGroupImageUrls, toEditableChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
 function createEmptyItem(questionNumber) {
     return {
         question: '',
@@ -22,7 +19,6 @@ function createEmptyItem(questionNumber) {
         options: [
             { id: 'opt-1', text: '' },
             { id: 'opt-2', text: '' },
-            { id: 'opt-3', text: '' },
         ],
         correctAnswer: 'opt-1',
         isExample: false,
@@ -36,6 +32,7 @@ function normalizeItems(rawItems) {
     }
     return rawItems.map((item, index) => {
         const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(item.imageUrl));
+        const audioUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(item.audioUrl));
         return {
             question: item.question || '',
             optionType: item.optionType === 'image' ? 'image' : 'text',
@@ -51,7 +48,7 @@ function normalizeItems(rawItems) {
             points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
             questionNumber: item.questionNumber || index + 1,
             ...(imageUrl !== undefined ? { imageUrl } : {}),
-            ...(item.audioUrl ? { audioUrl: item.audioUrl } : {}),
+            ...(audioUrl !== undefined ? { audioUrl } : {}),
         };
     });
 }
@@ -61,34 +58,35 @@ function sumPoints(items) {
 export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
     const [instruction, setInstruction] = useState(initialData?.instruction || 'Choose the correct answer.');
     const [passage, setPassage] = useState(initialData?.passage || '');
-    const [audioUrl, setAudioUrl] = useState(initialData?.audioUrl || '');
-    const [imageUrl, setImageUrl] = useState(toChooseAnswerGroupImageUrls(initialData?.imageUrl)[0] || '');
+    const [imageUrls, setImageUrls] = useState(() => (toEditableChooseAnswerGroupImageUrls(initialData?.imageUrl)));
+    const [audioUrls, setAudioUrls] = useState(() => (toEditableChooseAnswerGroupImageUrls(initialData?.audioUrl)));
     const [items, setItems] = useState(() => normalizeItems(initialData?.items));
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [isClientMode, setIsClientMode] = useState(false);
     const [errors, setErrors] = useState([]);
-    const [isGroupAudioVisible, setIsGroupAudioVisible] = useState(() => Boolean(initialData?.audioUrl));
-    const [isGroupImageVisible, setIsGroupImageVisible] = useState(() => toChooseAnswerGroupImageUrls(initialData?.imageUrl).length > 0);
     const [isPassageVisible, setIsPassageVisible] = useState(() => {
         const html = initialData?.passage;
         return Boolean(html && html !== '<p></p>' && html !== '<p><br></p>' && html.trim());
     });
-    const [visibleItemAudio, setVisibleItemAudio] = useState({});
     const onChangeRef = useRef(onChange);
     const previousPayloadRef = useRef('');
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
     const isContentEmpty = (html) => !html || html === '<p></p>' || html === '<p><br></p>' || html.trim() === '';
-    const buildPayload = (nextInstruction = instruction, nextPassage = passage, nextItems = items, nextExplanation = explanation, nextAudioUrl = audioUrl, nextImageUrl = imageUrl) => ({
-        instruction: nextInstruction,
-        ...(!isContentEmpty(nextPassage) ? { passage: nextPassage.trim() } : {}),
-        ...(nextAudioUrl.trim() ? { audioUrl: nextAudioUrl.trim() } : {}),
-        ...(nextImageUrl.trim() ? { imageUrl: nextImageUrl.trim() } : {}),
-        items: nextItems,
-        explanation: nextExplanation,
-        points: sumPoints(nextItems),
-    });
+    const buildPayload = (nextInstruction = instruction, nextPassage = passage, nextItems = items, nextExplanation = explanation, nextAudioUrls = audioUrls, nextImageUrls = imageUrls) => {
+        const nextAudioUrl = fromChooseAnswerGroupImageUrls(nextAudioUrls);
+        const nextImageUrl = fromChooseAnswerGroupImageUrls(nextImageUrls);
+        return {
+            instruction: nextInstruction,
+            ...(!isContentEmpty(nextPassage) ? { passage: nextPassage.trim() } : {}),
+            ...(nextAudioUrl !== undefined ? { audioUrl: nextAudioUrl } : {}),
+            ...(nextImageUrl !== undefined ? { imageUrl: nextImageUrl } : {}),
+            items: nextItems,
+            explanation: nextExplanation,
+            points: sumPoints(nextItems),
+        };
+    };
     const debouncedOnChange = useDebouncedCallback((payload) => {
         onChangeRef.current?.(payload);
     }, 300);
@@ -101,7 +99,7 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
         previousPayloadRef.current = serialized;
         onUnsavedChangesChange?.(true);
         debouncedOnChange(payload);
-    }, [instruction, passage, audioUrl, imageUrl, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [instruction, passage, audioUrls, imageUrls, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim()) {
@@ -111,9 +109,6 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
             nextErrors.push('Cần ít nhất một câu hỏi.');
         }
         items.forEach((item, index) => {
-            if (!item.question.trim()) {
-                nextErrors.push(`Câu ${index + 1}: nội dung câu hỏi là bắt buộc.`);
-            }
             const filledOptions = item.options.filter((option) => (isChooseAnswerGroupOptionFilled(option, item.optionType)));
             if (filledOptions.length < 2) {
                 nextErrors.push(`Câu ${index + 1}: cần ít nhất 2 đáp án.`);
@@ -140,15 +135,6 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
     const updateItem = (index, patch) => {
         setItems((current) => current.map((item, itemIndex) => (itemIndex === index ? { ...item, ...patch } : item)));
     };
-    const updateOption = (itemIndex, optionIndex, patch) => {
-        setItems((current) => current.map((item, index) => {
-            if (index !== itemIndex) {
-                return item;
-            }
-            const options = item.options.map((option, currentOptionIndex) => (currentOptionIndex === optionIndex ? { ...option, ...patch } : option));
-            return { ...item, options };
-        }));
-    };
     const addItem = () => {
         setItems((current) => [...current, createEmptyItem(current.length + 1)]);
     };
@@ -170,11 +156,29 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
                         value: sumPoints(items),
                         onValueChange: () => undefined,
                         allowZero: true,
-                    }, preview: { onClick: () => setIsClientMode(true) } }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(Label, { htmlFor: "group-instruction", className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", title: "Th\u00EAm audio chung", onClick: () => setIsGroupAudioVisible(true), className: `inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors ${audioUrl || isGroupAudioVisible
-                                                    ? 'bg-violet-600 text-white shadow-sm'
-                                                    : 'bg-violet-50 text-violet-600 hover:bg-violet-100'}`, children: _jsx(Volume2, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", title: "Th\u00EAm h\u00ECnh \u1EA3nh chung", onClick: () => setIsGroupImageVisible(true), className: `inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors ${imageUrl || isGroupImageVisible
+                    }, preview: { onClick: () => setIsClientMode(true) } }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "group-instruction", className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { id: "group-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: "Choose the correct answer.", rows: 2, className: "min-h-[56px] border-gray-200 pb-11" }), _jsxs("div", { className: "absolute bottom-1.5 right-1.5 z-10 flex items-center gap-1 rounded-md border border-indigo-100 bg-white/95 p-0.5 shadow-sm", children: [_jsx("button", { type: "button", title: "Th\u00EAm h\u00ECnh \u1EA3nh", onClick: () => {
+                                                    const hasEmpty = imageUrls.some((url) => !url.trim());
+                                                    if (imageUrls.length === 0 || !hasEmpty) {
+                                                        setImageUrls([...imageUrls, '']);
+                                                    }
+                                                }, className: `inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors ${imageUrls.length > 0
                                                     ? 'bg-indigo-600 text-white shadow-sm'
-                                                    : 'bg-indigo-50 text-indigo-600 hover:bg-indigo-100'}`, children: _jsx(ImageIcon, { className: "h-4 w-4" }) })] })] }), _jsx(Input, { id: "group-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: "Choose the correct answer.", className: "h-8 border-gray-200" })] }), isGroupAudioVisible && (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 bg-white p-1.5", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-indigo-50", children: _jsx(Volume2, { className: "h-3.5 w-3.5 text-indigo-500" }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(FileUpload, { id: "choose-answer-group-audio", label: "", accept: "audio/*", value: audioUrl, onChange: setAudioUrl, maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, prefix: "questions", showPlayButton: true }) })] })), isGroupImageVisible && (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 bg-white p-1.5", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-indigo-50", children: _jsx(ImageIcon, { className: "h-3.5 w-3.5 text-indigo-500" }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(FileUpload, { id: "choose-answer-group-image", label: "", accept: "image/*", value: imageUrl, onChange: setImageUrl, maxSize: 5, placeholder: "Upload \u1EA3nh nh\u00F3m ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }) })] })), !isPassageVisible ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsPassageVisible(true), className: "h-8 gap-1.5 border-gray-200 px-2.5 text-xs text-gray-600 hover:bg-gray-50", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5" }), "Th\u00EAm n\u1ED9i dung b\u00E0i \u0111\u1ECDc"] })) : (_jsxs("div", { className: "relative space-y-1.5 pr-10", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setIsPassageVisible(false), className: "absolute right-0 top-0 z-10 h-7 px-2 text-xs text-gray-500 hover:text-gray-700", children: "\u1EA8n" }), _jsxs(Label, { className: "text-sm font-semibold text-gray-800", children: ["N\u1ED9i dung b\u00E0i \u0111\u1ECDc ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, variant: "compact", minHeightClassName: "min-h-[72px]" })] }))] }), items.map((item, itemIndex) => (_jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(HelpCircle, { className: "h-3.5 w-3.5" }), title: `Câu ${itemIndex + 1}`, points: !item.isExample ? {
+                                                    : 'bg-indigo-50 text-indigo-600 hover:bg-indigo-100'}`, children: _jsx(ImageIcon, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", title: "Th\u00EAm audio", onClick: () => {
+                                                    const hasEmpty = audioUrls.some((url) => !url.trim());
+                                                    if (audioUrls.length === 0 || !hasEmpty) {
+                                                        setAudioUrls([...audioUrls, '']);
+                                                    }
+                                                }, className: `inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors ${audioUrls.length > 0
+                                                    ? 'bg-violet-600 text-white shadow-sm'
+                                                    : 'bg-violet-50 text-violet-600 hover:bg-violet-100'}`, children: _jsx(Volume2, { className: "h-4 w-4" }) })] })] })] }), imageUrls.length > 0 && (_jsxs("div", { className: "space-y-2 rounded-md border border-gray-200 bg-slate-50/80 p-2", children: [imageUrls.map((url, imageIndex) => (_jsx(ChooseAnswerGroupImageUploadItem, { index: imageIndex, itemIndex: -1, imageUrl: url, onChange: (nextUrl) => {
+                                    setImageUrls((current) => current.map((item, idx) => (idx === imageIndex ? nextUrl : item)));
+                                }, onRemove: () => {
+                                    setImageUrls((current) => current.filter((_, idx) => idx !== imageIndex));
+                                } }, `group-image-${imageIndex}`))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setImageUrls((current) => (current.length ? [...current, ''] : [''])), className: "h-8 gap-1.5 border-dashed border-indigo-300 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm \u1EA3nh"] })] })), audioUrls.length > 0 && (_jsxs("div", { className: "space-y-2 rounded-md border border-gray-200 bg-slate-50/80 p-2", children: [audioUrls.map((url, audioIndex) => (_jsx(ChooseAnswerGroupAudioUploadItem, { index: audioIndex, itemIndex: -1, audioUrl: url, onChange: (nextUrl) => {
+                                    setAudioUrls((current) => current.map((item, idx) => (idx === audioIndex ? nextUrl : item)));
+                                }, onRemove: () => {
+                                    setAudioUrls((current) => current.filter((_, idx) => idx !== audioIndex));
+                                } }, `group-audio-${audioIndex}`))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setAudioUrls((current) => (current.length ? [...current, ''] : [''])), className: "h-8 gap-1.5 border-dashed border-violet-300 text-violet-600 hover:bg-violet-50 hover:text-violet-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm audio"] })] })), !isPassageVisible ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsPassageVisible(true), className: "h-8 gap-1.5 border-gray-200 px-2.5 text-xs text-gray-600 hover:bg-gray-50", children: [_jsx(BookOpen, { className: "h-3.5 w-3.5" }), "Th\u00EAm n\u1ED9i dung b\u00E0i \u0111\u1ECDc"] })) : (_jsxs("div", { className: "relative space-y-1.5 pr-10", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setIsPassageVisible(false), className: "absolute right-0 top-0 z-10 h-7 px-2 text-xs text-gray-500 hover:text-gray-700", children: "\u1EA8n" }), _jsxs(Label, { className: "text-sm font-semibold text-gray-800", children: ["N\u1ED9i dung b\u00E0i \u0111\u1ECDc ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, variant: "compact", minHeightClassName: "min-h-[72px]" })] }))] }), items.map((item, itemIndex) => (_jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(HelpCircle, { className: "h-3.5 w-3.5" }), title: `Câu ${itemIndex + 1}`, points: !item.isExample ? {
                         value: item.points,
                         allowZero: true,
                         onValueChange: (value) => updateItem(itemIndex, { points: value }),
@@ -184,22 +188,5 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
                             isExample: checked,
                             points: checked ? 0 : (item.points || 1),
                         }),
-                    }, extraActions: _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeItem(itemIndex), disabled: items.length <= 1, className: "h-8 w-8 text-gray-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-800", children: "C\u00E2u h\u1ECFi" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", title: "Th\u00EAm audio", onClick: () => setVisibleItemAudio((prev) => ({ ...prev, [itemIndex]: true })), className: `inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors ${item.audioUrl || visibleItemAudio[itemIndex]
-                                                    ? 'bg-violet-600 text-white shadow-sm'
-                                                    : 'bg-violet-50 text-violet-600 hover:bg-violet-100'}`, children: _jsx(Volume2, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", title: "Th\u00EAm h\u00ECnh \u1EA3nh", onClick: () => {
-                                                    const nextUrls = [...toEditableChooseAnswerGroupImageUrls(item.imageUrl), ''];
-                                                    updateItem(itemIndex, { imageUrl: nextUrls });
-                                                }, className: `inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors ${toEditableChooseAnswerGroupImageUrls(item.imageUrl).length > 0
-                                                    ? 'bg-indigo-600 text-white shadow-sm'
-                                                    : 'bg-indigo-50 text-indigo-600 hover:bg-indigo-100'}`, children: _jsx(ImageIcon, { className: "h-4 w-4" }) })] })] }), _jsx(Textarea, { value: item.question, onChange: (event) => updateItem(itemIndex, { question: event.target.value }), rows: 2, placeholder: "A place for someone to stay or live is called", className: "min-h-[56px] border-gray-200" })] }), (item.audioUrl || visibleItemAudio[itemIndex]) && (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 bg-white p-1.5", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-indigo-50", children: _jsx(Volume2, { className: "h-3.5 w-3.5 text-indigo-500" }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(FileUpload, { id: `choose-answer-item-audio-${itemIndex}`, label: "", accept: "audio/*", value: item.audioUrl || '', onChange: (url) => updateItem(itemIndex, { audioUrl: url }), maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, prefix: "questions", showPlayButton: true }) })] })), toEditableChooseAnswerGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "space-y-2", children: toEditableChooseAnswerGroupImageUrls(item.imageUrl).map((imageUrl, imageIndex) => (_jsx(ChooseAnswerGroupImageUploadItem, { index: imageIndex, itemIndex: itemIndex, imageUrl: imageUrl, onChange: (url) => {
-                                const nextUrls = toEditableChooseAnswerGroupImageUrls(item.imageUrl);
-                                nextUrls[imageIndex] = url;
-                                updateItem(itemIndex, { imageUrl: nextUrls });
-                            }, onRemove: () => {
-                                const nextUrls = toEditableChooseAnswerGroupImageUrls(item.imageUrl)
-                                    .filter((_, idx) => idx !== imageIndex);
-                                updateItem(itemIndex, { imageUrl: fromChooseAnswerGroupImageUrls(nextUrls) });
-                            } }, `${itemIndex}-${imageIndex}`))) })), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-800", children: "\u0110\u00E1p \u00E1n" }), _jsxs("div", { className: "flex h-8 items-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-2.5", children: [_jsx(Type, { className: `h-3.5 w-3.5 ${item.optionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${item.optionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}`, children: "Text" }), _jsx(Switch, { checked: item.optionType === 'image', onCheckedChange: (checked) => updateItem(itemIndex, {
-                                                    optionType: checked ? 'image' : 'text',
-                                                }) }), _jsx(ImageIcon, { className: `h-3.5 w-3.5 ${item.optionType === 'image' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${item.optionType === 'image' ? 'text-indigo-600' : 'text-gray-400'}`, children: "\u1EA2nh" })] })] }), item.options.map((option, optionIndex) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("input", { type: "radio", name: `correct-${itemIndex}`, checked: item.correctAnswer === option.id, onChange: () => updateItem(itemIndex, { correctAnswer: option.id }), className: "mt-2" }), _jsx("span", { className: "mt-2 w-6 text-sm font-semibold text-gray-600", children: OPTION_LABELS[optionIndex] || optionIndex + 1 }), item.optionType === 'image' ? (_jsx(ChooseAnswerGroupOptionImageField, { itemIndex: itemIndex, optionIndex: optionIndex, imageUrl: getChooseAnswerGroupOptionImageSrc(option), onChange: (url) => updateOption(itemIndex, optionIndex, { imageUrl: url, text: '' }) })) : (_jsx(Input, { value: option.text, onChange: (event) => updateOption(itemIndex, optionIndex, { text: event.target.value }), placeholder: `Đáp án ${OPTION_LABELS[optionIndex]}`, className: "h-8 border-gray-200" }))] }, option.id)))] })] }, `item-${itemIndex}`))), _jsxs(Button, { type: "button", variant: "outline", onClick: addItem, className: "h-8 gap-1.5 border-dashed border-green-200 px-2.5 text-xs text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm c\u00E2u h\u1ECFi"] }), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) }), allErrors.length > 0 && (_jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: allErrors.map((error) => (_jsx("p", { children: error }, error))) }))] }));
+                    }, extraActions: _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeItem(itemIndex), disabled: items.length <= 1, className: "h-8 w-8 text-gray-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), children: _jsx(ChooseTheCorrectAnswerGroupItemEditor, { item: item, itemIndex: itemIndex, onChange: (patch) => updateItem(itemIndex, patch) }) }, `item-${itemIndex}`))), _jsxs(Button, { type: "button", variant: "outline", onClick: addItem, className: "h-8 gap-1.5 border-dashed border-green-200 px-2.5 text-xs text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm c\u00E2u h\u1ECFi"] }), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) }), allErrors.length > 0 && (_jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: allErrors.map((error) => (_jsx("p", { children: error }, error))) }))] }));
 }

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupItemEditor.d.ts

@@ -0,0 +1,6 @@
+import type { ChooseTheCorrectAnswerGroupItemData } from '../../_shared/types/choose-the-correct-answer-group.type';
+export declare function ChooseTheCorrectAnswerGroupItemEditor({ item, itemIndex, onChange, }: {
+    item: ChooseTheCorrectAnswerGroupItemData;
+    itemIndex: number;
+    onChange: (patch: Partial<ChooseTheCorrectAnswerGroupItemData>) => void;
+}): import("react").JSX.Element;

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupItemEditor.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } 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 { Switch } from '../../../../components/ui/switch';
+import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
+import { hasRichTextFormatting, htmlToPlainEditorText } from '../../../../shared/lib/rich-text';
+import { CheckCircle2, ImageIcon, Pilcrow, Plus, Trash2, Type, Volume2 } from 'lucide-react';
+import { ChooseAnswerGroupAudioUploadItem, ChooseAnswerGroupImageUploadItem, ChooseAnswerGroupOptionImageField, } from './ChooseAnswerGroupImageUpload';
+import { fromChooseAnswerGroupImageUrls, getChooseAnswerGroupOptionImageSrc, toEditableChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
+function optionLetter(index) {
+    return String.fromCharCode(65 + index);
+}
+function nextOptionId(options) {
+    const used = new Set(options.map((option) => option.id));
+    let next = 1;
+    while (used.has(`opt-${next}`)) {
+        next += 1;
+    }
+    return `opt-${next}`;
+}
+function shouldStartInTipTapMode(item) {
+    if (hasRichTextFormatting(item.question)) {
+        return true;
+    }
+    return item.options.some((option) => hasRichTextFormatting(option.text));
+}
+function emptyOptions(count) {
+    return Array.from({ length: count }, (_, index) => ({
+        id: `opt-${index + 1}`,
+        text: '',
+    }));
+}
+function ChooseAnswerTextInput({ value, onChange, isTipTapMode, placeholder, compact = false, className, }) {
+    if (isTipTapMode) {
+        return (_jsx(RichTextEditor, { value: value, onChange: onChange, variant: "compact", minHeightClassName: compact ? `min-h-[56px] ${className ?? ''}` : `min-h-[72px] ${className ?? ''}` }));
+    }
+    if (compact) {
+        return (_jsx(Input, { value: htmlToPlainEditorText(value), onChange: (event) => onChange(event.target.value), placeholder: placeholder, className: `h-10 border-gray-200 bg-white ${className ?? ''}` }));
+    }
+    return (_jsx(Textarea, { value: htmlToPlainEditorText(value), onChange: (event) => onChange(event.target.value), placeholder: placeholder, rows: 2, className: `min-h-[56px] border-gray-200 bg-white ${className ?? ''}` }));
+}
+export function ChooseTheCorrectAnswerGroupItemEditor({ item, itemIndex, onChange, }) {
+    const [isTipTapMode, setIsTipTapMode] = useState(() => shouldStartInTipTapMode(item));
+    const textOptionsCacheRef = useRef(null);
+    const imageOptionsCacheRef = useRef(null);
+    const imageUrls = toEditableChooseAnswerGroupImageUrls(item.imageUrl);
+    const audioUrls = toEditableChooseAnswerGroupImageUrls(item.audioUrl);
+    const hasCorrectAnswer = item.options.some((option) => option.id === item.correctAnswer);
+    const updateOption = (optionIndex, patch) => {
+        onChange({
+            options: item.options.map((option, index) => (index === optionIndex ? { ...option, ...patch } : option)),
+        });
+    };
+    const switchOptionType = (nextType) => {
+        if (nextType === item.optionType) {
+            return;
+        }
+        if (item.optionType === 'text') {
+            textOptionsCacheRef.current = { options: item.options, correctAnswer: item.correctAnswer };
+        }
+        else {
+            imageOptionsCacheRef.current = { options: item.options, correctAnswer: item.correctAnswer };
+        }
+        const targetCache = nextType === 'text' ? textOptionsCacheRef.current : imageOptionsCacheRef.current;
+        if (targetCache) {
+            onChange({
+                optionType: nextType,
+                options: targetCache.options,
+                correctAnswer: targetCache.correctAnswer,
+            });
+            return;
+        }
+        const nextOptions = emptyOptions(item.options.length);
+        onChange({
+            optionType: nextType,
+            options: nextOptions,
+            correctAnswer: nextOptions[0]?.id || 'opt-1',
+        });
+    };
+    return (_jsxs("div", { className: "space-y-2.5", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs(Label, { className: "text-sm font-semibold text-gray-800", children: ["C\u00E2u h\u1ECFi ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsxs("button", { type: "button", onClick: () => setIsTipTapMode((enabled) => !enabled), title: isTipTapMode ? 'Chuyển về ô nhập thường' : 'Bật định dạng chữ (in đậm, danh sách, bảng)', className: `inline-flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-xs font-medium transition-colors select-none ${isTipTapMode
+                                    ? 'border-indigo-300 bg-indigo-50 text-indigo-700'
+                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Pilcrow, { className: "h-3.5 w-3.5" }), "\u0110\u1ECBnh d\u1EA1ng"] })] }), _jsxs("div", { className: "relative", children: [_jsx(ChooseAnswerTextInput, { value: item.question, onChange: (question) => onChange({ question }), isTipTapMode: isTipTapMode, placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi...", className: "pb-11" }), _jsxs("div", { className: "absolute bottom-1.5 right-1.5 z-10 flex items-center gap-1 rounded-md border border-indigo-100 bg-white/95 p-0.5 shadow-sm", children: [_jsx("button", { type: "button", title: "Th\u00EAm h\u00ECnh \u1EA3nh", onClick: () => {
+                                            const current = toEditableChooseAnswerGroupImageUrls(item.imageUrl);
+                                            const hasEmpty = current.some((url) => !url.trim());
+                                            if (current.length === 0 || !hasEmpty) {
+                                                onChange({ imageUrl: [...current, ''] });
+                                            }
+                                        }, className: `inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors ${imageUrls.length > 0
+                                            ? 'bg-indigo-600 text-white shadow-sm'
+                                            : 'bg-indigo-50 text-indigo-600 hover:bg-indigo-100'}`, children: _jsx(ImageIcon, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", title: "Th\u00EAm audio", onClick: () => {
+                                            const current = toEditableChooseAnswerGroupImageUrls(item.audioUrl);
+                                            const hasEmpty = current.some((url) => !url.trim());
+                                            if (current.length === 0 || !hasEmpty) {
+                                                onChange({ audioUrl: [...current, ''] });
+                                            }
+                                        }, className: `inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors ${audioUrls.length > 0
+                                            ? 'bg-violet-600 text-white shadow-sm'
+                                            : 'bg-violet-50 text-violet-600 hover:bg-violet-100'}`, children: _jsx(Volume2, { className: "h-4 w-4" }) })] })] })] }), imageUrls.length > 0 && (_jsxs("div", { className: "space-y-2 rounded-md border border-gray-200 bg-slate-50/80 p-2", children: [imageUrls.map((imageUrl, imageIndex) => (_jsx(ChooseAnswerGroupImageUploadItem, { index: imageIndex, itemIndex: itemIndex, imageUrl: imageUrl, onChange: (url) => {
+                            const nextUrls = toEditableChooseAnswerGroupImageUrls(item.imageUrl);
+                            nextUrls[imageIndex] = url;
+                            onChange({ imageUrl: nextUrls });
+                        }, onRemove: () => {
+                            const nextUrls = toEditableChooseAnswerGroupImageUrls(item.imageUrl)
+                                .filter((_, idx) => idx !== imageIndex);
+                            onChange({ imageUrl: fromChooseAnswerGroupImageUrls(nextUrls) });
+                        } }, `${itemIndex}-image-${imageIndex}`))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                            const current = toEditableChooseAnswerGroupImageUrls(item.imageUrl);
+                            onChange({ imageUrl: current.length ? [...current, ''] : [''] });
+                        }, className: "h-8 gap-1.5 border-dashed border-indigo-300 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm \u1EA3nh"] })] })), audioUrls.length > 0 && (_jsxs("div", { className: "space-y-2 rounded-md border border-gray-200 bg-slate-50/80 p-2", children: [audioUrls.map((audioUrl, audioIndex) => (_jsx(ChooseAnswerGroupAudioUploadItem, { index: audioIndex, itemIndex: itemIndex, audioUrl: audioUrl, onChange: (url) => {
+                            const nextUrls = toEditableChooseAnswerGroupImageUrls(item.audioUrl);
+                            nextUrls[audioIndex] = url;
+                            onChange({ audioUrl: nextUrls });
+                        }, onRemove: () => {
+                            const nextUrls = toEditableChooseAnswerGroupImageUrls(item.audioUrl)
+                                .filter((_, idx) => idx !== audioIndex);
+                            onChange({ audioUrl: fromChooseAnswerGroupImageUrls(nextUrls) });
+                        } }, `${itemIndex}-audio-${audioIndex}`))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                            const current = toEditableChooseAnswerGroupImageUrls(item.audioUrl);
+                            onChange({ audioUrl: current.length ? [...current, ''] : [''] });
+                        }, className: "h-8 gap-1.5 border-dashed border-violet-300 text-violet-600 hover:bg-violet-50 hover:text-violet-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm audio"] })] })), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "text-sm font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", item.options.length, " \u0111\u00E1p \u00E1n)"] })] }), _jsxs("div", { className: "flex h-8 items-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-2.5", children: [_jsx(Type, { className: `h-3.5 w-3.5 ${item.optionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${item.optionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}`, children: "Text" }), _jsx(Switch, { checked: item.optionType === 'image', className: item.optionType === 'image' ? '!bg-indigo-600' : undefined, onCheckedChange: (checked) => switchOptionType(checked ? 'image' : 'text') }), _jsx(ImageIcon, { className: `h-3.5 w-3.5 ${item.optionType === 'image' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${item.optionType === 'image' ? 'text-indigo-600' : 'text-gray-400'}`, children: "\u1EA2nh" })] })] }), item.options.map((option, optionIndex) => {
+                        const isCorrect = option.id === item.correctAnswer;
+                        const letter = optionLetter(optionIndex);
+                        return (_jsx("div", { className: `group relative rounded-md px-3 py-2.5 transition-all duration-200 ${isCorrect
+                                ? 'border-2 border-green-400 bg-gradient-to-r from-green-50 to-emerald-50 shadow-sm shadow-green-100'
+                                : 'border border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'}`, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: `flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-full text-xs font-bold leading-none transition-all ${isCorrect
+                                            ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-sm'
+                                            : 'bg-gray-100 text-gray-800 hover:bg-indigo-100 hover:text-indigo-600'}`, onClick: () => onChange({ correctAnswer: option.id }), children: letter }), _jsx("div", { className: "flex-1 space-y-2", children: item.optionType === 'image' ? (_jsx(ChooseAnswerGroupOptionImageField, { itemIndex: itemIndex, optionIndex: optionIndex, imageUrl: getChooseAnswerGroupOptionImageSrc(option), onChange: (url) => updateOption(optionIndex, { imageUrl: url, text: '' }) })) : (_jsx(ChooseAnswerTextInput, { value: option.text, onChange: (text) => updateOption(optionIndex, { text }), isTipTapMode: isTipTapMode, compact: true, placeholder: `Nhập đáp án ${letter}...` })) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => onChange({ correctAnswer: option.id }), className: `h-7 w-7 ${isCorrect ? 'text-green-600 hover:text-green-700' : 'text-gray-400 hover:text-green-600'}`, title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5" }) }), item.options.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => {
+                                                    const nextOptions = item.options.filter((_, index) => index !== optionIndex);
+                                                    onChange({
+                                                        options: nextOptions,
+                                                        correctAnswer: isCorrect
+                                                            ? (nextOptions[0]?.id || 'opt-1')
+                                                            : item.correctAnswer,
+                                                    });
+                                                }, className: "h-7 w-7 text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] })] }) }, option.id));
+                    }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                            onChange({
+                                options: [...item.options, { id: nextOptionId(item.options), text: '' }],
+                            });
+                        }, className: "h-8 w-full gap-1.5 border-dashed border-green-200 px-2.5 text-xs text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] }), !hasCorrectAnswer && (_jsx("div", { className: "flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 p-2 text-xs text-amber-800", children: _jsx("span", { children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng. Click ch\u1EEF c\u00E1i ho\u1EB7c \u2713 \u0111\u1EC3 ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng." }) }))] })] }));
+}

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

@@ -18,13 +18,6 @@ function asOptionId(value) {
     }
     return '';
 }
-function asOptionalUrl(value) {
-    if (typeof value !== 'string') {
-        return undefined;
-    }
-    const trimmed = value.trim();
-    return trimmed !== '' ? trimmed : undefined;
-}
 export function createEmptyChooseAnswerGroupItem(questionNumber) {
     return {
         question: '',
@@ -32,7 +25,6 @@ export function createEmptyChooseAnswerGroupItem(questionNumber) {
         options: [
             { id: 'opt-1', text: '' },
             { id: 'opt-2', text: '' },
-            { id: 'opt-3', text: '' },
         ],
         correctAnswer: 'opt-1',
         isExample: false,
@@ -64,11 +56,10 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
         : [
             { id: 'opt-1', text: '' },
             { id: 'opt-2', text: '' },
-            { id: 'opt-3', text: '' },
         ];
     const isExample = record.isExample === true;
     const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(content.imageUrl));
-    const audioUrl = asOptionalUrl(content.audioUrl);
+    const audioUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(content.audioUrl));
     return {
         question: asString(content.question) || asString(record.question),
         optionType: asString(content.optionType) === 'image' ? 'image' : 'text',
@@ -78,7 +69,7 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
         points: isExample ? 0 : typeof record.points === 'number' ? record.points : 1,
         questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
         ...(imageUrl !== undefined ? { imageUrl } : {}),
-        ...(audioUrl ? { audioUrl } : {}),
+        ...(audioUrl !== undefined ? { audioUrl } : {}),
     };
 }
 export function mapQuestionToChooseAnswerGroupData(question) {
@@ -92,12 +83,12 @@ export function mapQuestionToChooseAnswerGroupData(question) {
         : [];
     if (Array.isArray(content.items)) {
         const items = content.items.map((item, index) => mapChooseAnswerGroupItem(item, index, fallbackAnswers[index]));
-        const audioUrl = asOptionalUrl(asRecord(content.meta).audioUrl);
+        const audioUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(asRecord(content.meta).audioUrl));
         const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(asRecord(content.meta).imageUrl));
         return {
             instruction: asString(asRecord(content.meta).instruction) || 'Choose the correct answer.',
             passage: asString(asRecord(content.meta).passage),
-            ...(audioUrl ? { audioUrl } : {}),
+            ...(audioUrl !== undefined ? { audioUrl } : {}),
             ...(imageUrl !== undefined ? { imageUrl } : {}),
             items,
             explanation,
@@ -105,12 +96,12 @@ export function mapQuestionToChooseAnswerGroupData(question) {
         };
     }
     if (Array.isArray(answer.items)) {
-        const audioUrl = asOptionalUrl(answer.audioUrl);
+        const audioUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(answer.audioUrl));
         const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(answer.imageUrl));
         return {
             instruction: asString(answer.instruction, 'Choose the correct answer.'),
             passage: asString(answer.passage),
-            ...(audioUrl ? { audioUrl } : {}),
+            ...(audioUrl !== undefined ? { audioUrl } : {}),
             ...(imageUrl !== undefined ? { imageUrl } : {}),
             items: answer.items.map((item, index) => mapChooseAnswerGroupItem(item, index, fallbackAnswers[index])),
             explanation,

package/dist/components/questions/types/choose-the-correct-answer-group/transform.js

@@ -26,7 +26,7 @@ export const transformChooseTheCorrectAnswerGroup = (question) => {
         }));
         const correctAnswer = item.correctAnswer || options[0]?.id || 'opt-1';
         const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(item.imageUrl));
-        const audioUrl = typeof item.audioUrl === 'string' ? item.audioUrl.trim() : '';
+        const audioUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(item.audioUrl));
         return {
             questionType: CHILD_QUESTION_TYPE,
             ...(item.isExample ? { isExample: true } : {}),
@@ -35,7 +35,7 @@ export const transformChooseTheCorrectAnswerGroup = (question) => {
                 options,
                 optionType: item.optionType || 'text',
                 ...(imageUrl !== undefined ? { imageUrl } : {}),
-                ...(audioUrl ? { audioUrl } : {}),
+                ...(audioUrl !== undefined ? { audioUrl } : {}),
             },
             correctAnswer: { answer: correctAnswer },
             points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
@@ -48,8 +48,9 @@ export const transformChooseTheCorrectAnswerGroup = (question) => {
     if (answerData?.passage && answerData.passage.trim()) {
         meta.passage = answerData.passage.trim();
     }
-    if (answerData?.audioUrl && answerData.audioUrl.trim()) {
-        meta.audioUrl = answerData.audioUrl.trim();
+    const groupAudioUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(answerData?.audioUrl));
+    if (groupAudioUrl !== undefined) {
+        meta.audioUrl = groupAudioUrl;
     }
     const groupImageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(answerData?.imageUrl));
     if (groupImageUrl !== undefined) {

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

@@ -1,2 +1,2 @@
 import type { SpontaneousQaGroupClientProps } from '../../_shared/types/spontaneous-qa-group.type';
-export declare function SpontaneousQaGroupClient({ questionData, }: SpontaneousQaGroupClientProps): import("react").JSX.Element;
+export declare function SpontaneousQaGroupClient({ questionData, isReviewMode, }: SpontaneousQaGroupClientProps): import("react").JSX.Element;

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

@@ -1,9 +1,85 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CircleHelp, Lightbulb } from 'lucide-react';
-export function SpontaneousQaGroupClient({ questionData, }) {
+import { useEffect, useRef, useState } from 'react';
+import { CircleHelp, Lightbulb, 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." }))] }));
+}
+function SpeakingReplyMic() {
+    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 () => {
+        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();
+            };
+            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();
+        }
+    };
+    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: [_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("p", { className: "text-center text-xs text-indigo-700", children: status === 'recording'
+                    ? 'Đang ghi âm... Nhấn để dừng'
+                    : 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 }), 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." }))] }));
+}
+export function SpontaneousQaGroupClient({ questionData, isReviewMode = false, }) {
     const parts = questionData.parts || [];
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), parts.map((part, partIndex) => (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "border-b border-gray-100 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [_jsx("p", { className: "text-sm font-semibold text-slate-800", children: part.partTitle || `PART ${part.partNumber || partIndex + 1}` }), part.topic && (_jsx("p", { className: "mt-1 text-sm text-slate-600", children: part.topic }))] }), _jsx("div", { className: "space-y-3 p-3", children: part.questions.map((question, questionIndex) => (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-3", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-blue-100 text-blue-700", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", question.questionNumber || questionIndex + 1] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [question.points || 0, " \u0111i\u1EC3m"] })] }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: question.questionText || 'Câu hỏi chưa được nhập' }), question.expectedAnswers.filter((item) => item.trim() !== '').length > 0 && (_jsxs("div", { className: "mt-2 rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "mb-1 flex items-center gap-1 text-xs font-semibold text-amber-700", children: [_jsx(Lightbulb, { className: "h-3 w-3" }), "\u0110\u00E1p \u00E1n m\u1EABu"] }), _jsx("ul", { className: "list-disc space-y-1 pl-4 text-xs text-amber-800", children: question.expectedAnswers
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), parts.map((part, partIndex) => (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "border-b border-gray-100 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [_jsx("p", { className: "text-sm font-semibold text-slate-800", children: part.partTitle || `PART ${part.partNumber || partIndex + 1}` }), part.topic && (_jsx("p", { className: "mt-1 text-sm text-slate-600", children: part.topic }))] }), _jsx("div", { className: "space-y-3 p-3", children: part.questions.map((question, questionIndex) => (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-3", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-blue-100 text-blue-700", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", question.questionNumber || questionIndex + 1] })] }), _jsxs("span", { className: "text-xs text-gray-500", children: [question.points || 0, " \u0111i\u1EC3m"] })] }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: question.questionText || 'Câu hỏi chưa được nhập' }), question.audioUrl ? _jsx("div", { className: "mt-2", children: _jsx(QuestionAudio, { url: question.audioUrl }) }) : null, _jsx("div", { className: "mt-3", children: _jsx(SpeakingReplyMic, {}) }), isReviewMode && question.expectedAnswers.filter((item) => item.trim() !== '').length > 0 && (_jsxs("div", { className: "mt-2 rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "mb-1 flex items-center gap-1 text-xs font-semibold text-amber-700", children: [_jsx(Lightbulb, { className: "h-3 w-3" }), "\u0110\u00E1p \u00E1n m\u1EABu"] }), _jsx("ul", { className: "list-disc space-y-1 pl-4 text-xs text-amber-800", children: question.expectedAnswers
                                                 .filter((item) => item.trim() !== '')
                                                 .map((item) => (_jsx("li", { children: item }, item))) })] }))] }, `${part.partNumber}-${question.questionNumber}-${questionIndex}`))) })] }, `part-${part.partNumber}-${partIndex}`)))] }));
 }

package/dist/components/questions/types/spontaneous-qa-group/index.d.ts

@@ -1,2 +1,3 @@
 export * from './SpontaneousQaGroupCreator';
 export * from './SpontaneousQaGroupClient';
+export * from './map-spontaneous-qa-group-data';

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

@@ -1,2 +1,3 @@
 export * from './SpontaneousQaGroupCreator';
 export * from './SpontaneousQaGroupClient';
+export * from './map-spontaneous-qa-group-data';

package/dist/components/questions/types/spontaneous-qa-group/map-spontaneous-qa-group-data.d.ts

@@ -0,0 +1,2 @@
+import type { SpontaneousQaGroupData } from '../../_shared/types/spontaneous-qa-group.type';
+export declare function mapQuestionToSpontaneousQaGroupData(question: Record<string, unknown>): SpontaneousQaGroupData;

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

@@ -0,0 +1,74 @@
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function asRecord(value) {
+    return isRecord(value) ? value : {};
+}
+function asString(value, fallback = '') {
+    return typeof value === 'string' ? value : fallback;
+}
+function asNumber(value, fallback) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+function normalizeExpectedAnswers(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value
+        .filter((item) => typeof item === 'string')
+        .map((item) => item.trim())
+        .filter((item) => item !== '');
+}
+function mapQuestion(item, index) {
+    const record = asRecord(item);
+    const content = asRecord(record.content);
+    const correctAnswer = asRecord(record.correctAnswer);
+    return {
+        questionText: asString(content.questionText) ||
+            asString(content.question) ||
+            asString(record.questionText),
+        inputType: asString(content.inputType) === 'AUDIO' ? 'AUDIO' : 'TEXT',
+        audioUrl: asString(content.audioUrl),
+        expectedAnswers: normalizeExpectedAnswers(correctAnswer.expectedAnswers),
+        points: asNumber(record.points, 1),
+        questionNumber: asNumber(record.questionNumber, index + 1),
+    };
+}
+function mapPart(item, index) {
+    const record = asRecord(item);
+    const questions = Array.isArray(record.questions) ? record.questions : [];
+    return {
+        partNumber: asNumber(record.partNumber, index + 1),
+        partTitle: asString(record.partTitle, `PART ${index + 1}`),
+        topic: asString(record.topic),
+        questions: questions.length > 0
+            ? questions.map((question, questionIndex) => mapQuestion(question, questionIndex))
+            : [],
+    };
+}
+export function mapQuestionToSpontaneousQaGroupData(question) {
+    const content = asRecord(question.content);
+    const list = asRecord(question.spontaneousQAList ?? content.spontaneousQAList ?? content);
+    const itemsRaw = Array.isArray(list.items)
+        ? list.items
+        : Array.isArray(content.items)
+            ? content.items
+            : [];
+    const hasNestedParts = itemsRaw.some((item) => Array.isArray(asRecord(item).questions));
+    const parts = hasNestedParts
+        ? itemsRaw.map((item, index) => mapPart(item, index))
+        : [mapPart({
+                partNumber: 1,
+                partTitle: '',
+                topic: '',
+                questions: itemsRaw,
+            }, 0)];
+    return {
+        instruction: asString(asRecord(list.meta).instruction) ||
+            asString(asRecord(content.meta).instruction) ||
+            'Talk about the topic.',
+        parts,
+        explanation: asString(question.explanation),
+        points: parts.reduce((total, part) => (total + part.questions.reduce((partTotal, item) => partTotal + (item.points || 0), 0)), 0),
+    };
+}

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

@@ -1,82 +1,7 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-function isRecord(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-function asRecord(value) {
-    return isRecord(value) ? value : {};
-}
-function asString(value, fallback = '') {
-    return typeof value === 'string' ? value : fallback;
-}
-function mapItem(item, index) {
-    const record = asRecord(item);
-    const content = asRecord(record.content);
-    const correctAnswer = asRecord(record.correctAnswer);
-    const expected = Array.isArray(correctAnswer.expectedAnswers)
-        ? correctAnswer.expectedAnswers.map((value) => String(value ?? ''))
-        : [];
-    return {
-        questionText: asString(content.questionText) ||
-            asString(content.question) ||
-            asString(record.questionText),
-        audioUrl: asString(content.audioUrl) || undefined,
-        expectedAnswers: expected,
-        isExample: record.isExample === true,
-        points: typeof record.points === 'number' ? record.points : 1,
-        questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
-    };
-}
-function isNestedPart(item) {
-    const record = asRecord(item);
-    return Array.isArray(record.questions);
-}
-function resolveGroup(question) {
-    const content = asRecord(question.content);
-    const list = asRecord(question.spontaneousQAList ?? content.spontaneousQAList ?? content);
-    const itemsRaw = Array.isArray(list.items)
-        ? list.items
-        : Array.isArray(content.items)
-            ? content.items
-            : [];
-    const instruction = asString(asRecord(list.meta).instruction) ||
-        asString(asRecord(content.meta).instruction) ||
-        asString(question.explanation) ||
-        'Talk about the topic.';
-    if (itemsRaw.some(isNestedPart)) {
-        return {
-            instruction,
-            parts: itemsRaw.map((item, index) => {
-                const record = asRecord(item);
-                const questions = Array.isArray(record.questions)
-                    ? record.questions.map(mapItem)
-                    : [];
-                return {
-                    partNumber: typeof record.partNumber === 'number' ? record.partNumber : index + 1,
-                    partTitle: asString(record.partTitle) || `PART ${index + 1}`,
-                    topic: asString(record.topic),
-                    questions,
-                };
-            }),
-        };
-    }
-    return {
-        instruction,
-        parts: [
-            {
-                partNumber: 1,
-                partTitle: '',
-                topic: '',
-                questions: itemsRaw.map(mapItem),
-            },
-        ],
-    };
-}
-function QaPromptCard({ item, index, isReviewMode = false, }) {
-    return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gray-50 px-4 py-2.5", children: [_jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || index + 1] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-2 p-4", children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: item.questionText || 'Câu hỏi chưa được nhập' }), item.audioUrl ? (_jsxs("p", { className: "text-xs text-gray-500", children: ["Audio: ", item.audioUrl] })) : null, isReviewMode && item.expectedAnswers.length > 0 ? (_jsxs("div", { className: "rounded-lg border border-emerald-100 bg-emerald-50 px-3 py-2 text-sm text-emerald-800", children: [_jsx("p", { className: "mb-1 font-medium", children: "G\u1EE3i \u00FD \u0111\u00E1p \u00E1n" }), _jsx("ul", { className: "list-disc space-y-1 pl-4", children: item.expectedAnswers.map((answer) => (_jsx("li", { children: answer }, answer))) })] })) : null] })] }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SpontaneousQaGroupClient } from '../types/spontaneous-qa-group/SpontaneousQaGroupClient';
+import { mapQuestionToSpontaneousQaGroupData } from '../types/spontaneous-qa-group/map-spontaneous-qa-group-data';
 export function SpontaneousQaGroupViewer({ question, isReviewMode = false, }) {
-    const { instruction, parts } = resolveGroup(question);
-    const showPartChrome = parts.length > 1 || parts.some((part) => part.partTitle || part.topic);
-    return (_jsxs("div", { className: "space-y-5", children: [instruction ? (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: instruction })) : null, parts.map((part) => (_jsxs("section", { className: "space-y-3", children: [showPartChrome ? (_jsxs("div", { children: [part.partTitle ? (_jsx("h3", { className: "text-base font-bold tracking-wide text-sky-600", children: part.partTitle })) : null, part.topic ? (_jsx("p", { className: "text-sm font-semibold text-slate-600", children: part.topic })) : null] })) : null, _jsx("div", { className: "space-y-3", children: part.questions.map((item, index) => (_jsx(QaPromptCard, { item: item, index: index, isReviewMode: isReviewMode }, `${part.partNumber}-${item.questionNumber}-${index}`))) })] }, `part-${part.partNumber}`)))] }));
+    return (_jsx(SpontaneousQaGroupClient, { questionData: mapQuestionToSpontaneousQaGroupData(question), isReviewMode: isReviewMode }));
 }

package/dist/shared/lib/utils/question-reverse-transform.js

@@ -231,7 +231,7 @@ const reverseChooseTheCorrectAnswerGroup = (apiQuestion) => {
         });
         const isExample = item.isExample === true;
         const imageUrl = normalizeChooseAnswerGroupImageUrl(itemContent.imageUrl);
-        const audioUrl = asString(itemContent.audioUrl).trim();
+        const audioUrl = normalizeChooseAnswerGroupImageUrl(itemContent.audioUrl);
         return {
             question: asString(itemContent.question),
             optionType: asString(itemContent.optionType, 'text') === 'image' ? 'image' : 'text',
@@ -251,17 +251,17 @@ const reverseChooseTheCorrectAnswerGroup = (apiQuestion) => {
             points: isExample ? 0 : asNumber(item.points, 1),
             questionNumber: asNumber(item.questionNumber, index + 1),
             ...(imageUrl !== undefined ? { imageUrl } : {}),
-            ...(audioUrl ? { audioUrl } : {}),
+            ...(audioUrl !== undefined ? { audioUrl } : {}),
         };
     });
-    const audioUrl = asString(asRecord(content.meta).audioUrl).trim();
+    const audioUrl = normalizeChooseAnswerGroupImageUrl(asRecord(content.meta).audioUrl);
     const imageUrl = normalizeChooseAnswerGroupImageUrl(asRecord(content.meta).imageUrl);
     return {
         content: '',
         answer: {
             instruction: asString(asRecord(content.meta).instruction, 'Choose the correct answer.'),
             passage: asString(asRecord(content.meta).passage),
-            ...(audioUrl ? { audioUrl } : {}),
+            ...(audioUrl !== undefined ? { audioUrl } : {}),
             ...(imageUrl !== undefined ? { imageUrl } : {}),
             items,
             explanation: asString(apiQuestion.explanation),

package/dist/shared/types/questions/choose-the-correct-answer-group.d.ts

@@ -24,7 +24,7 @@ export interface ChooseTheCorrectAnswerGroupContent {
     meta?: {
         instruction?: string;
         passage?: string;
-        audioUrl?: string;
+        audioUrl?: string | string[];
         imageUrl?: string | string[];
     };
     items: ChooseTheCorrectAnswerGroupItem[];

package/package.json

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