@tinyweb_dev/oe-exam-sdk 1.0.6 → 1.0.8

package/dist/components/exams/take/components/question-renderers/MoversPictureChooseRenderer.js

@@ -1,76 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { ZoomIn, Check, X } from 'lucide-react';
-import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
-import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
-import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
-// Image with zoom functionality
-function QuestionImage({ imageUrl, alt }) {
-    const [isZoomed, setIsZoomed] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx(ResolvedImage, { src: imageUrl, alt: alt, className: "max-h-[180px] cursor-pointer rounded-lg object-contain shadow-md", onClick: () => setIsZoomed(true) }), _jsx("button", { type: "button", onClick: () => setIsZoomed(true), className: "absolute right-2 top-2 rounded-full bg-white/80 p-1.5 shadow-md hover:bg-white", "aria-label": "Zoom image", children: _jsx(ZoomIn, { className: "h-4 w-4 text-gray-600" }) })] }), isZoomed && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70", onClick: () => setIsZoomed(false), children: _jsx(ResolvedImage, { src: imageUrl, alt: `${alt} (zoomed)`, className: "max-h-[90vh] max-w-[90vw] rounded-lg object-contain", showLoadingState: false }) }))] }));
-}
-// Single Sub-Question Component
-function SubQuestionItem({ subQuestion, selectedOptionId, onSelect, isReviewMode, id, }) {
-    // Review mode states
-    const isUserCorrect = isReviewMode && selectedOptionId === subQuestion.correctOptionId;
-    const getOptionStyle = (optionId) => {
-        if (!isReviewMode) {
-            return selectedOptionId === optionId
-                ? 'border-blue-500 bg-[#f4f9ff]'
-                : 'border-blue-200 bg-white hover:border-blue-300 hover:bg-blue-50/30';
-        }
-        // Review mode
-        const isSelected = selectedOptionId === optionId;
-        const isCorrect = subQuestion.correctOptionId === optionId;
-        if (isCorrect) {
-            // ✅ Green if user answered correctly
-            // ⚪ Blue if user didn't answer or was wrong (show correct answer)
-            return isUserCorrect
-                ? 'border-green-500 bg-green-50'
-                : 'border-blue-500 bg-blue-50';
-        }
-        if (isSelected && !isCorrect) {
-            // ❌ Red for wrong answer
-            return 'border-red-500 bg-red-50';
-        }
-        return 'border-blue-200 bg-white';
-    };
-    const getRadioStyle = (optionId) => {
-        if (!isReviewMode) {
-            return selectedOptionId === optionId
-                ? 'border-blue-500 bg-blue-500'
-                : 'border-gray-300 bg-white';
-        }
-        // Review mode
-        const isSelected = selectedOptionId === optionId;
-        const isCorrect = subQuestion.correctOptionId === optionId;
-        if (isCorrect) {
-            return isUserCorrect
-                ? 'border-green-500 bg-green-500'
-                : 'border-blue-500 bg-blue-500';
-        }
-        if (isSelected && !isCorrect) {
-            return 'border-red-500 bg-red-500';
-        }
-        return 'border-gray-300 bg-white';
-    };
-    // Get icon for review mode
-    const getReviewIcon = (optionId) => {
-        if (!isReviewMode)
-            return null;
-        const isSelected = selectedOptionId === optionId;
-        const isCorrect = subQuestion.correctOptionId === optionId;
-        if (isCorrect) {
-            return _jsx(Check, { className: "h-4 w-4 text-white" });
-        }
-        if (isSelected && !isCorrect) {
-            return _jsx(X, { className: "h-4 w-4 text-white" });
-        }
-        return null;
-    };
-    return (_jsxs("div", { id: id, className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-start gap-3", children: [_jsx("span", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white", children: subQuestion.questionNumber }), _jsx(QuestionImage, { imageUrl: subQuestion.imageUrl, alt: `Question ${subQuestion.questionNumber}` })] }), subQuestion.questionText && (_jsx("p", { className: "mb-3 text-[17px] font-bold text-[#001590]", children: subQuestion.questionText })), _jsx("div", { className: "flex flex-col gap-2", children: subQuestion.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 text-left transition-colors ${getOptionStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: [option.label, "."] }), _jsx("span", { className: "flex-1 text-sm text-gray-700", children: option.text }), _jsx("div", { className: `flex h-5 w-5 items-center justify-center rounded-full border-2 ${getRadioStyle(option.id)}`, children: isReviewMode ? (getReviewIcon(option.id)) : (selectedOptionId === option.id && (_jsx("div", { className: "h-2 w-2 rounded-full bg-white" }))) })] }, option.id))) })] }));
-}
-export function MoversPictureChooseRenderer({ partNumber, partName, questionCount, instruction, subQuestions, answers, onAnswerChange, isReviewMode = false, }) {
-    return (_jsxs("div", { className: "flex h-full flex-col gap-4 overflow-y-auto p-6", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: subQuestions.map((subQuestion) => (_jsx(SubQuestionItem, { id: `question-${subQuestion.id}`, subQuestion: subQuestion, selectedOptionId: answers[subQuestion.id], onSelect: (optionId) => onAnswerChange(subQuestion.id, optionId), isReviewMode: isReviewMode }, subQuestion.id))) })] }));
-}

package/dist/components/exams/take/components/question-renderers/MoversPictureFillBlankChooseRenderer.d.ts

@@ -1,2 +0,0 @@
-import type { MoversPictureFillBlankChooseRendererProps } from '../../types';
-export declare function MoversPictureFillBlankChooseRenderer({ partNumber, partName, questionCount, instruction, subQuestions, answers, onAnswerChange, isReviewMode, }: MoversPictureFillBlankChooseRendererProps): import("react").JSX.Element;

package/dist/components/exams/take/components/question-renderers/MoversPictureFillBlankChooseRenderer.js

@@ -1,68 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { ZoomIn } from 'lucide-react';
-import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
-import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
-import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
-// Image with zoom functionality
-function QuestionImage({ imageUrl, alt }) {
-    const [isZoomed, setIsZoomed] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx(ResolvedImage, { src: imageUrl, alt: alt, className: "max-h-[150px] cursor-pointer rounded-lg object-contain shadow-md", onClick: () => setIsZoomed(true) }), _jsx("button", { type: "button", onClick: () => setIsZoomed(true), className: "absolute right-1 top-1 rounded-full bg-white/80 p-1 shadow-md hover:bg-white", "aria-label": "Zoom image", children: _jsx(ZoomIn, { className: "h-3 w-3 text-gray-600" }) })] }), isZoomed && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70", onClick: () => setIsZoomed(false), children: _jsx(ResolvedImage, { src: imageUrl, alt: `${alt} (zoomed)`, className: "max-h-[90vh] max-w-[90vw] rounded-lg object-contain", showLoadingState: false }) }))] }));
-}
-// Render question text with blank highlight
-function QuestionWithBlank({ question, selectedAnswer, isReviewMode, isCorrect, }) {
-    // Split by {0} placeholder
-    const parts = question.split('{0}');
-    const getBlankStyle = () => {
-        if (!isReviewMode || !selectedAnswer) {
-            return 'border-blue-400 text-blue-600';
-        }
-        return isCorrect
-            ? 'border-green-500 text-green-600'
-            : 'border-red-500 text-red-600';
-    };
-    return (_jsxs("p", { className: "text-sm font-medium text-gray-700", children: [parts[0], _jsx("span", { className: `mx-1 inline-block min-w-[60px] border-b-2 border-dashed px-2 text-center font-semibold ${getBlankStyle()}`, children: selectedAnswer || '______' }), parts[1]] }));
-}
-// Single Sub-Question Component
-function SubQuestionItem({ subQuestion, selectedOptionId, onSelect, isReviewMode, id, }) {
-    const selectedOption = subQuestion.options.find((o) => o.id === selectedOptionId);
-    // Review mode states
-    const isUserCorrect = isReviewMode && selectedOptionId === subQuestion.correctOptionId;
-    const getOptionStyle = (optionId) => {
-        if (!isReviewMode) {
-            return selectedOptionId === optionId
-                ? 'border-blue-500 bg-blue-50'
-                : 'border-gray-300 bg-white hover:border-blue-300';
-        }
-        // Review mode
-        const isSelected = selectedOptionId === optionId;
-        const isCorrect = subQuestion.correctOptionId === optionId;
-        if (isCorrect) {
-            // ✅ Green if user answered correctly
-            // ⚪ Blue if user didn't answer or was wrong (show correct answer)
-            return isUserCorrect
-                ? 'border-green-500 bg-green-50'
-                : 'border-blue-500 bg-blue-50';
-        }
-        if (isSelected && !isCorrect) {
-            // ❌ Red for wrong answer
-            return 'border-red-500 bg-red-50';
-        }
-        return 'border-gray-300 bg-white';
-    };
-    const getTextStyle = (optionId) => {
-        if (!isReviewMode)
-            return 'text-gray-700';
-        const isSelected = selectedOptionId === optionId;
-        const isCorrect = subQuestion.correctOptionId === optionId;
-        if (isCorrect || isSelected) {
-            return 'text-gray-800 font-bold';
-        }
-        return 'text-gray-600';
-    };
-    return (_jsxs("div", { id: id, className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-start gap-3", children: [_jsx("span", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white", children: subQuestion.questionNumber }), _jsx(QuestionImage, { imageUrl: subQuestion.imageUrl, alt: `Question ${subQuestion.questionNumber}` })] }), _jsx("div", { className: "mb-3", children: _jsx(QuestionWithBlank, { question: subQuestion.question, selectedAnswer: selectedOption?.text, isReviewMode: isReviewMode, isCorrect: selectedOptionId === subQuestion.correctOptionId }) }), _jsx("div", { className: "flex flex-wrap gap-2", children: subQuestion.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `rounded-lg border-2 px-3 py-1.5 text-sm transition-colors ${getOptionStyle(option.id)} ${getTextStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [option.label, ". ", option.text] }, option.id))) })] }));
-}
-export function MoversPictureFillBlankChooseRenderer({ partNumber, partName, questionCount, instruction, subQuestions, answers, onAnswerChange, isReviewMode = false, }) {
-    return (_jsxs("div", { className: "flex h-full flex-col gap-4 overflow-y-auto p-6", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: subQuestions.map((subQuestion) => (_jsx(SubQuestionItem, { id: `question-${subQuestion.id}`, subQuestion: subQuestion, selectedOptionId: answers[subQuestion.id], onSelect: (optionId) => onAnswerChange(subQuestion.id, optionId), isReviewMode: isReviewMode }, subQuestion.id))) })] }));
-}

package/dist/components/exams/take/components/speaking/renderers/SpeakingGNInterviewRenderer.d.ts

@@ -1,16 +0,0 @@
-import type { QuestionPart } from '../../../utils/question-transformers';
-interface SpeakingGNInterviewRendererProps {
-    part: QuestionPart;
-    answers: Record<string, unknown>;
-    onAnswerChange: (questionId: string, value: unknown) => void;
-    isReviewMode?: boolean;
-    onExit: () => void;
-    onPartComplete?: () => void;
-    onPartBack?: () => void;
-    speakingTheme?: string;
-    teacherVideoUrl?: string;
-    onTeacherIntroPlayed?: () => void;
-    skipTeacherVideo?: boolean;
-}
-export declare function SpeakingGNInterviewRenderer(props: SpeakingGNInterviewRendererProps): import("react").JSX.Element;
-export {};

package/dist/components/exams/take/components/speaking/renderers/SpeakingGNInterviewRenderer.js

@@ -1,212 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * SpeakingGNInterviewRenderer
- *
- * Renderer for GN_SPEAKING_INTERVIEW (GN Speaking Part 1 & Part 2).
- * Simulates 2 candidates: virtual (pre-recorded) + real (student records).
- *
- * Flow per question:
- *   - If targetCandidate === 'VIRTUAL' -> auto-play virtual answer, no mic
- *   - If targetCandidate === 'REAL' -> show mic, student records
- *
- * Part 2 extension: When content.imageUrl exists, displays a booklet
- * image (collage) above the question text for Discussion with Pictures.
- *
- * UI: Summer Sky theme with two game-style candidate avatars at bottom,
- * question text shown inside a teal card with hide/show question toggle badge,
- * audio player for examiner question.
- */
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import Image from 'next/image';
-import { usePresignedFileUrl } from '../../../../../../shared/lib/hooks';
-import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
-import { getSpeakingLayout } from '../../../../../../components/themes';
-// Summer Sky theme assets (shared GN/KFS badges)
-import questionBadge from '../../../../../../components/themes/summer-sky/assets/images/question-badge-sunset.png';
-import redBadge from '../../../../../../components/themes/summer-sky/assets/images/red-badge-sunset.png';
-import blueBadge from '../../../../../../components/themes/summer-sky/assets/images/blue-badge-sunset.png';
-import redWrapper from '../../../../../../components/themes/summer-sky/assets/images/red-wrapper-sunset.png';
-import blueWrapper from '../../../../../../components/themes/summer-sky/assets/images/blue-wrapper-sunset.png';
-import bingoAvatar from '../../../../../../components/themes/summer-sky/assets/images/robot-avatar.png';
-import userAvatar from '../../../../../../components/themes/summer-sky/assets/images/student-avatar.png';
-import icPlay from '../../../../../../components/themes/summer-sky/assets/images/ic-play-sunset.png';
-import icPlayViolet from '../../../../../../components/themes/summer-sky/assets/images/ic-play-violet.webp';
-import nextSmall from '../../../../../../components/themes/summer-sky/assets/images/next-small.webp';
-function ProgressDots({ total, currentIndex, answeredIds, questionIds, virtualIndices }) {
-    return (_jsx("div", { className: "flex items-center gap-1.5 flex-wrap justify-center", children: Array.from({ length: total }, (_, i) => {
-            const isCurrent = i === currentIndex;
-            const isAnswered = answeredIds.has(questionIds[i]);
-            const isVirtual = virtualIndices.has(i);
-            return (_jsx("div", { className: `h-2.5 w-2.5 rounded-full border-2 transition-all ${isCurrent
-                    ? 'scale-125 border-yellow-300 bg-yellow-400 shadow-lg'
-                    : isAnswered
-                        ? 'border-green-400 bg-green-400'
-                        : isVirtual
-                            ? 'border-white/30 bg-white/10'
-                            : 'border-white/50 bg-white/20'}`, title: isVirtual ? 'Câu HS ảo' : `Câu ${i + 1}` }, i));
-        }) }));
-}
-// ============================================
-// Main component
-// ============================================
-export function SpeakingGNInterviewRenderer(props) {
-    const [isQuestionVisible, setIsQuestionVisible] = useState(true);
-    const [isVirtualPlaying, setIsVirtualPlaying] = useState(false);
-    const virtualAudioRef = useRef(null);
-    // Get group payload for virtual candidate config
-    const groupPayload = props.part.groupPayload;
-    const virtualName = groupPayload?.virtualStudentName || 'Học sinh AI';
-    // Determine which questions are virtual
-    const virtualIndices = useMemo(() => {
-        const indices = new Set();
-        props.part.questions.forEach((q, i) => {
-            const content = q.content;
-            if (content?.targetCandidate === 'VIRTUAL') {
-                indices.add(i);
-            }
-        });
-        return indices;
-    }, [props.part.questions]);
-    // Setup with mic always enabled - we'll conditionally show/hide based on virtual/real
-    const setup = useSpeakingRendererSetup({
-        ...props,
-        maxDurationMs: 60000, // 60 seconds
-        hasMic: true,
-    });
-    const Layout = getSpeakingLayout('SUMMER_SKY');
-    const content = setup.currentQuestion?.content;
-    const isVirtualTurn = content?.targetCandidate === 'VIRTUAL';
-    const isRealTurn = !isVirtualTurn;
-    // Resolve presigned URLs
-    const { previewUrl: virtualAnswerAudioUrl } = usePresignedFileUrl(content?.virtualAnswer?.audioUrl ?? '');
-    const { previewUrl: bookletImageUrl } = usePresignedFileUrl(content?.imageUrl ?? '');
-    const hasBookletImage = !!content?.imageUrl && !!bookletImageUrl;
-    // Stop virtual audio when navigating to a different question
-    useEffect(() => {
-        if (virtualAudioRef.current) {
-            virtualAudioRef.current.pause();
-            virtualAudioRef.current.currentTime = 0;
-        }
-        setIsVirtualPlaying(false);
-    }, [setup.currentQuestion?.id]);
-    // Play virtual answer audio
-    const handlePlayVirtualAnswer = useCallback(() => {
-        if (!virtualAnswerAudioUrl)
-            return;
-        if (isVirtualPlaying && virtualAudioRef.current) {
-            virtualAudioRef.current.pause();
-            setIsVirtualPlaying(false);
-            return;
-        }
-        if (!virtualAudioRef.current) {
-            virtualAudioRef.current = new Audio(virtualAnswerAudioUrl);
-            virtualAudioRef.current.onended = () => setIsVirtualPlaying(false);
-            virtualAudioRef.current.onerror = () => setIsVirtualPlaying(false);
-        }
-        else {
-            virtualAudioRef.current.src = virtualAnswerAudioUrl;
-        }
-        virtualAudioRef.current.play();
-        setIsVirtualPlaying(true);
-    }, [virtualAnswerAudioUrl, isVirtualPlaying]);
-    // Cleanup audio on unmount
-    useEffect(() => {
-        return () => {
-            if (virtualAudioRef.current) {
-                virtualAudioRef.current.pause();
-                virtualAudioRef.current = null;
-            }
-        };
-    }, []);
-    // Auto-play virtual answer after teacher audio ends (1s delay)
-    const handleTeacherAudioEnded = useCallback(() => {
-        if (!isVirtualTurn || !virtualAnswerAudioUrl)
-            return;
-        const timer = setTimeout(() => {
-            handlePlayVirtualAnswer();
-        }, 1000);
-        return () => clearTimeout(timer);
-    }, [isVirtualTurn, virtualAnswerAudioUrl, handlePlayVirtualAnswer]);
-    if (!setup.currentQuestion || !content)
-        return null;
-    // Progress tracking
-    const answeredIds = new Set(props.part.questions.map((q) => q.id).filter((id) => !!props.answers[id]));
-    const questionIds = props.part.questions.map((q) => q.id);
-    const headerRight = (_jsx(ProgressDots, { total: props.part.questions.length, currentIndex: setup.nav.currentIndex, answeredIds: answeredIds, questionIds: questionIds, virtualIndices: virtualIndices }));
-    return (_jsxs(Layout, { onExit: props.onExit, partName: props.part.name || `Part ${props.part.partNo}`, instruction: props.part.instructions || 'LISTEN AND ANSWER', audioUrl: content.audioUrl ?? '', questionNumber: setup.nav.questionNumberInPart, onPrev: setup.handlePrev, onNext: setup.handleNext, showPrev: setup.nav.showPrev, showNext: setup.nav.showNext, canGoPrev: setup.nav.canGoPrev, canGoNext: setup.nav.canGoNext, onAudioPlayingChange: setup.onAudioPlayingChange, recorder: props.isReviewMode || isVirtualTurn ? null : setup.recorder, showExistingBadge: isRealTurn && setup.showExistingBadge, teacherVideoUrl: props.teacherVideoUrl, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, headerRight: headerRight, onAudioEnded: handleTeacherAudioEnded, children: [_jsxs("div", { className: "w-full h-full flex flex-col items-center relative", children: [_jsx("div", { className: "w-full flex-1", style: { minHeight: 0 }, children: _jsx("div", { className: "mx-auto", style: { width: '850px', maxWidth: '90%', height: hasBookletImage ? 'auto' : 'calc(100% - 100px)' }, children: _jsxs("div", { className: `w-full ${hasBookletImage ? '' : 'h-full'} flex flex-col items-center`, style: hasBookletImage ? {} : { paddingTop: '30px' }, children: [isQuestionVisible && content.questionText && (_jsxs("div", { className: "relative flex flex-col justify-center items-center", style: {
-                                            width: '882px',
-                                            maxWidth: '90%',
-                                            maxHeight: '80%',
-                                            paddingLeft: '77px',
-                                            paddingRight: '77px',
-                                            paddingTop: '26px',
-                                            paddingBottom: '26px',
-                                            backgroundColor: 'rgba(232, 136, 154, 0.15)',
-                                            borderRadius: '20px',
-                                        }, children: [_jsxs("div", { className: "absolute cursor-pointer", style: { top: '-19px' }, onClick: () => setIsQuestionVisible(false), children: [_jsx(Image, { src: questionBadge, alt: "", style: { width: '169px', height: '38px' } }), _jsx("div", { className: "absolute inset-0 flex justify-center items-center select-none", children: _jsx("span", { className: "font-normal text-center leading-5 text-white", style: { fontSize: '18px' }, children: "\u00E1\u00BA\u00A8n c\u00C3\u00A2u h\u00E1\u00BB\u008Fi" }) })] }), _jsx("div", { className: "max-w-full", children: _jsx("div", { className: "text-black font-bold leading-[26px] text-center max-w-full", style: { fontSize: '18px', fontFamily: '"Open Sans", sans-serif' }, children: _jsx("p", { children: content.questionText }) }) })] })), !isQuestionVisible && (_jsxs("div", { className: "cursor-pointer", onClick: () => setIsQuestionVisible(true), children: [_jsx(Image, { src: questionBadge, alt: "", style: { width: '169px', height: '38px' } }), _jsx("div", { className: "absolute inset-0 flex justify-center items-center select-none", style: { position: 'relative', top: '-30px' }, children: _jsx("span", { className: "font-normal text-center leading-5 text-white", style: { fontSize: '18px' }, children: "Hi\u00E1\u00BB\u2021n c\u00C3\u00A2u h\u00E1\u00BB\u008Fi" }) })] })), hasBookletImage && (_jsx("div", { className: "flex justify-center", style: { marginTop: '12px' }, children: _jsx("div", { className: "relative overflow-hidden", style: {
-                                                maxWidth: '100%',
-                                                borderRadius: '16px',
-                                                border: '3px solid rgba(230, 99, 93, 0.3)',
-                                                boxShadow: '0 4px 15px rgba(0,0,0,0.08)',
-                                            }, children: _jsx("img", { src: bookletImageUrl, alt: "Booklet", style: {
-                                                    width: '100%',
-                                                    height: '100%',
-                                                    objectFit: 'cover',
-                                                } }) }) }))] }) }) }), _jsxs("div", { className: "flex justify-between select-none items-end", style: { width: '990px', maxWidth: '95%', paddingBottom: '40px', paddingLeft: '20px', paddingRight: '20px' }, children: [_jsxs("div", { className: `relative select-none transition-opacity duration-300 ${isVirtualTurn ? 'opacity-100' : 'opacity-50 grayscale'}`, children: [_jsx("div", { children: _jsxs("div", { className: "relative flex", children: [_jsx(Image, { src: redBadge, alt: "", style: { height: '57px', width: '258px' } }), _jsx("div", { className: "absolute inset-0 flex justify-center items-center", style: { paddingTop: '12px' }, children: _jsx("div", { className: "text-white leading-5 font-normal text-center m-0 w-full select-none", children: _jsx("p", { className: "m-0 truncate select-none", style: { fontSize: '18px', paddingLeft: '60px', paddingRight: '60px' }, children: virtualName }) }) })] }) }), _jsxs("div", { className: "absolute", style: { top: '7px', right: '-58px' }, children: [_jsx(Image, { src: redWrapper, alt: "", className: "relative", style: { width: '115px', height: '84px', zIndex: 0 } }), _jsx("div", { className: "absolute inset-0 flex justify-center items-center w-full h-full", children: _jsxs("div", { className: "relative", style: { width: '68px', height: '68px' }, children: [_jsx(Image, { src: bingoAvatar, alt: virtualName, width: 68, height: 68, className: "object-cover rounded-full select-none", style: { width: '68px', height: '68px' }, draggable: false }), _jsx("div", { className: "flex items-center justify-center absolute w-full h-full top-0 rounded-full text-white cursor-pointer", onClick: isVirtualTurn ? handlePlayVirtualAnswer : undefined, children: _jsx(Image, { src: icPlay, alt: "play", width: 16, height: 16, className: "opacity-80" }) })] }) })] }), isVirtualPlaying && (_jsx("div", { className: "absolute pointer-events-none", style: { top: '0px', right: '-130px', width: '70px', height: '84px', display: 'flex', alignItems: 'center' }, children: _jsxs("div", { className: "relative", style: { width: '70px', height: '70px' }, children: [_jsx("div", { style: {
-                                                        position: 'absolute',
-                                                        left: '0px',
-                                                        top: '50%',
-                                                        transform: 'translateY(-50%)',
-                                                        width: '20px',
-                                                        height: '34px',
-                                                        borderRight: '3px solid rgba(30, 64, 175, 0.95)',
-                                                        borderRadius: '0 50% 50% 0',
-                                                        animation: 'soundWavePulse 1s ease-in-out infinite',
-                                                        animationDelay: '0s',
-                                                    } }), _jsx("div", { style: {
-                                                        position: 'absolute',
-                                                        left: '12px',
-                                                        top: '50%',
-                                                        transform: 'translateY(-50%)',
-                                                        width: '28px',
-                                                        height: '50px',
-                                                        borderRight: '3px solid rgba(30, 64, 175, 0.7)',
-                                                        borderRadius: '0 50% 50% 0',
-                                                        animation: 'soundWavePulse 1s ease-in-out infinite',
-                                                        animationDelay: '0.2s',
-                                                    } }), _jsx("div", { style: {
-                                                        position: 'absolute',
-                                                        left: '24px',
-                                                        top: '50%',
-                                                        transform: 'translateY(-50%)',
-                                                        width: '36px',
-                                                        height: '66px',
-                                                        borderRight: '3px solid rgba(30, 64, 175, 0.45)',
-                                                        borderRadius: '0 50% 50% 0',
-                                                        animation: 'soundWavePulse 1s ease-in-out infinite',
-                                                        animationDelay: '0.4s',
-                                                    } })] }) }))] }), isVirtualPlaying && (_jsx("div", { className: "flex-1 flex justify-center items-center text-center", style: { paddingLeft: '40px', paddingRight: '40px', paddingBottom: '40px' }, children: _jsxs("p", { className: "m-0 select-none", style: {
-                                        fontSize: '16px',
-                                        fontWeight: 700,
-                                        fontStyle: 'italic',
-                                        color: '#1a1a2e',
-                                        lineHeight: '1.5',
-                                        fontFamily: '"Open Sans", sans-serif',
-                                    }, children: ["Ng\u00C6\u00B0\u00E1\u00BB\u009Di ch\u00C6\u00A1i kh\u00C3\u00A1c \u00C4\u2018ang tr\u00E1\u00BA\u00A3 l\u00E1\u00BB\u009Di.", _jsx("br", {}), "Vui l\u00C3\u00B2ng nghe xong \u0111\u1EC3 ti\u1EBFp t\u1EE5c."] }) })), isVirtualTurn && !isVirtualPlaying && (_jsxs("div", { className: "flex-1 flex flex-col justify-center items-center text-center", style: { paddingLeft: '40px', paddingRight: '40px', paddingBottom: '40px' }, children: [_jsxs("p", { className: "m-0 whitespace-nowrap", style: { color: '#1a1a2e', fontSize: '16px', fontWeight: 700, fontStyle: 'italic', fontFamily: '"Open Sans", sans-serif' }, children: ["\u00E1\u00BA\u00A4n bi\u00E1\u00BB\u0192u t\u00C6\u00B0\u00E1\u00BB\u00A3ng", ' ', _jsx(Image, { src: icPlayViolet, alt: "", width: 20, height: 20, className: "inline-block" }), ' ', "tr\u00EAn avatar \u0111\u1EC3 nghe l\u1EA1i."] }), _jsxs("div", { className: "flex items-center", style: { gap: '4px' }, children: [_jsx("p", { className: "m-0", style: { color: '#1a1a2e', fontSize: '16px', fontWeight: 700, fontStyle: 'italic', fontFamily: '"Open Sans", sans-serif' }, children: "\u1EA4n n\u00FAt" }), _jsx(Image, { src: nextSmall, alt: "next", width: 34, height: 34 }), _jsx("p", { className: "m-0", style: { color: '#1a1a2e', fontSize: '16px', fontWeight: 700, fontStyle: 'italic', fontFamily: '"Open Sans", sans-serif' }, children: "\u0111\u1EC3 ti\u1EBFp t\u1EE5c." })] })] })), _jsxs("div", { className: `relative select-none transition-opacity duration-300 ${isRealTurn ? 'opacity-100' : 'opacity-50 grayscale'}`, children: [_jsx("div", { children: _jsxs("div", { className: "relative flex", children: [_jsx(Image, { src: blueBadge, alt: "", style: { height: '57px', width: '258px' } }), _jsx("div", { className: "absolute inset-0 flex justify-center items-center", style: { paddingTop: '12px' }, children: _jsx("div", { className: "text-white leading-5 font-normal text-center m-0 w-full select-none", children: _jsx("p", { className: "m-0 truncate select-none", style: { fontSize: '18px', paddingLeft: '60px', paddingRight: '60px' }, children: "B\u1EA1n" }) }) })] }) }), _jsxs("div", { className: "absolute", style: { top: '7px', left: '-58px' }, children: [_jsx(Image, { src: blueWrapper, alt: "", className: "relative", style: { width: '115px', height: '84px', zIndex: 0 } }), _jsx("div", { className: "absolute inset-0 flex justify-center items-center w-full h-full", children: _jsx("div", { className: "relative", style: { width: '68px', height: '68px' }, children: _jsx(Image, { src: userAvatar, alt: "B\u1EA1n", width: 68, height: 68, className: "object-cover rounded-full select-none", style: { width: '68px', height: '68px' }, draggable: false }) }) })] })] })] })] }), _jsx("style", { jsx: true, children: `
-        @keyframes soundWavePulse {
-          0% {
-            opacity: 0.2;
-            transform: translateY(-50%) scaleX(0.7);
-          }
-          50% {
-            opacity: 1;
-            transform: translateY(-50%) scaleX(1);
-          }
-          100% {
-            opacity: 0.2;
-            transform: translateY(-50%) scaleX(0.7);
-          }
-        }
-      ` })] }));
-}

package/dist/components/questions/_shared/types/gn-speaking-interview.type.d.ts

@@ -1,32 +0,0 @@
-import type { ValidationRef } from './look-and-choose-answer.type';
-export interface GNSpeakingInterviewData {
-    /** How admin provides the question prompt */
-    inputType: 'AUDIO' | 'TEXT';
-    /** Audio file URL — required when inputType is 'AUDIO' */
-    audioUrl?: string;
-    /** Question text — required when inputType is 'TEXT', backend converts via TTS */
-    questionText?: string;
-    /** Which candidate this question targets */
-    targetCandidate: 'A' | 'B';
-    /** Virtual student's pre-recorded answer text */
-    virtualAnswerText?: string;
-    /** Virtual student's pre-recorded answer audio URL */
-    virtualAnswerAudioUrl?: string;
-    /** Whether this is an Extended Response question */
-    isExtendedResponse?: boolean;
-    /** Optional sample answers for AI grading reference (for real candidate questions) */
-    sampleAnswers?: string[];
-    /** Explanation for review */
-    explanation?: string;
-    /** Points per question (0 for virtual) */
-    points?: number;
-}
-export interface GNSpeakingInterviewCreatorProps {
-    initialData?: GNSpeakingInterviewData;
-    onSave?: (data: GNSpeakingInterviewData) => void;
-    onCancel?: () => void;
-    onChange?: (data: GNSpeakingInterviewData) => void;
-    externalErrors?: string[];
-    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
-    validationRef?: React.MutableRefObject<ValidationRef | null>;
-}

package/dist/components/questions/_shared/types/gn-speaking-interview.type.js

@@ -1 +0,0 @@
-export {};

package/dist/components/questions/_shared/types/look-picture-fill-word-hint.type.d.ts

@@ -1,47 +0,0 @@
-import { ValidationRef } from './look-and-choose-answer.type';
-export type { ValidationRef };
-export interface LookPictureFillWordHintSubQuestion {
-    id: string;
-    imageUrl: string;
-    word: string;
-    correctAnswer: string;
-    points?: number;
-    groupNumber?: number;
-}
-export interface LookPictureFillWordHintGroup {
-    number: number;
-    questionCount: number;
-}
-export interface LookPictureFillWordHintData {
-    subQuestions: LookPictureFillWordHintSubQuestion[];
-    hintLetters?: string[];
-    hintLettersByGroup?: Record<number, string[]>;
-    caseSensitive?: boolean;
-    groups?: LookPictureFillWordHintGroup[];
-}
-export interface LookPictureFillWordHintCreatorProps {
-    initialData?: LookPictureFillWordHintData;
-    onSave?: (data: LookPictureFillWordHintData) => void;
-    onSaveToQuestionBank?: (data: LookPictureFillWordHintData) => void;
-    onCancel?: () => void;
-    onChange?: (data: LookPictureFillWordHintData) => void;
-    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
-    externalErrors?: string[];
-    groups?: LookPictureFillWordHintGroup[];
-    questionIndexInPart?: number;
-    partId?: string;
-    validationRef?: React.MutableRefObject<ValidationRef | null>;
-}
-export interface LookPictureFillWordHintQuestionData {
-    subQuestions: LookPictureFillWordHintSubQuestion[];
-    hintLetters?: string[];
-    hintLettersByGroup?: Record<number, string[]>;
-    caseSensitive?: boolean;
-    groups?: LookPictureFillWordHintGroup[];
-}
-export interface LookPictureFillWordHintClientProps {
-    questionData: LookPictureFillWordHintQuestionData;
-    onSubmit?: (answers: Record<string, string>) => void;
-    isReviewMode?: boolean;
-    userAnswer?: Record<string, string>;
-}

package/dist/components/questions/_shared/types/look-picture-fill-word-hint.type.js

@@ -1 +0,0 @@
-export {};

package/dist/components/questions/types/gn-speaking-interview/GNSpeakingInterviewCreator.d.ts

@@ -1,2 +0,0 @@
-import type { GNSpeakingInterviewCreatorProps } from '../../_shared/types/gn-speaking-interview.type';
-export declare function GNSpeakingInterviewCreator({ initialData, onSave, onChange, externalErrors, validationRef, }: GNSpeakingInterviewCreatorProps): import("react").JSX.Element;