@tinyweb_dev/oe-exam-sdk 0.1.3 → 0.1.4

package/dist/components/exams/take/components/speaking/SpeakingInstructionBar.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";export function SpeakingInstructionBar({text:r}){return e("div",{className:"rounded-lg px-5 py-2.5 text-center",style:{background:"linear-gradient(180deg, #44271a 0%, #2d1a0e 100%)",boxShadow:"0 4px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08)",border:"2px solid #1c0e07"},children:e("span",{className:"text-sm font-bold uppercase tracking-widest text-amber-100",children:r})})}

package/dist/components/exams/take/components/speaking/SpeakingMicButton.d.ts

@@ -0,0 +1,14 @@
+import type { RecordingState } from '../../types/speaking.types';
+interface SpeakingMicButtonProps {
+    status: RecordingState['status'];
+    durationSeconds: number;
+    remainingSeconds?: number;
+    isWarning?: boolean;
+    onStartRecording: () => void;
+    onStopRecording: () => void;
+    onRetryUpload?: () => void;
+    disabled?: boolean;
+    hasExistingRecording?: boolean;
+}
+export declare function SpeakingMicButton({ status, durationSeconds: _durationSeconds, remainingSeconds, isWarning, onStartRecording, onStopRecording, onRetryUpload, disabled, hasExistingRecording, }: SpeakingMicButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/exams/take/components/speaking/SpeakingMicButton.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Mic as t,Square as o,CheckCircle as a,AlertCircle as n,RotateCcw as i}from"lucide-react";import{cn as d}from"../../../../../shared/lib/utils";function l(e){const r=Math.floor(e/60),t=e%60;return`${String(r).padStart(1,"0")}:${String(t).padStart(2,"0")}`}export function SpeakingMicButton({status:s,durationSeconds:g,remainingSeconds:c,isWarning:h=!1,onStartRecording:m,onStopRecording:b,onRetryUpload:u,disabled:p=!1,hasExistingRecording:x=!1}){const f="recording"===s,w="uploading"===s,v="uploaded"===s,N="error"===s,y=x&&!N&&!f;return r("div",{className:"flex flex-col items-center gap-0",children:[f&&e("div",{className:d("mb-2 rounded-full px-4 py-1 text-sm font-bold tabular-nums",h?"bg-red-600 text-white":"bg-red-900/80 text-white"),children:void 0!==c?l(c):""}),r("button",{type:"button",onClick:()=>{p||w||y||(N&&u?u():f?b():m())},disabled:p||w||y,"aria-label":f?"Dừng ghi âm":N?"Thử lại upload":"Bắt đầu ghi âm",className:d("relative flex h-20 w-20 items-center justify-center rounded-full","border-4 shadow-[0_6px_20px_rgba(0,0,0,0.4)]","transition-all duration-200","active:scale-95","disabled:cursor-not-allowed disabled:opacity-50",!f&&!v&&!w&&!N&&"border-orange-700 bg-gradient-to-b from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700",f&&!h&&"animate-pulse border-red-700 bg-gradient-to-b from-red-500 to-red-700",f&&h&&"animate-pulse border-red-900 bg-gradient-to-b from-red-600 to-red-900",w&&"border-orange-700 bg-gradient-to-b from-orange-400 to-orange-600",v&&"border-green-700 bg-gradient-to-b from-green-400 to-green-600 hover:from-green-500 hover:to-green-700",N&&"border-orange-700 bg-gradient-to-b from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700"),children:[f&&e(o,{className:"h-8 w-8 fill-white text-white"}),v&&e(a,{className:"h-8 w-8 text-white"}),N&&e(u?i:n,{className:"h-8 w-8 text-white"}),!f&&!v&&!N&&e(t,{className:"h-8 w-8 text-white"}),w&&e("span",{className:"absolute inset-0 flex items-center justify-center rounded-full bg-black/30",children:r("svg",{className:"h-8 w-8 animate-spin text-white",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:[e("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"})]})})]}),e("div",{className:"mt-3 rounded-lg px-4 py-2 text-center",style:{background:"linear-gradient(180deg, #3d2008 0%, #2a1505 100%)",boxShadow:"0 3px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07)",border:"2px solid #1c0a02"},children:e("p",{className:"text-[11px] font-bold uppercase tracking-widest text-amber-200",children:N?u?"Thử lại upload":"Lỗi ghi âm":v?"Đã ghi âm thành công":w?"Đang tải lên...":f?"Nhấn để dừng ghi âm":x?"Câu trả lời đã được ghi nhận":"Thí sinh ấn vào biểu tượng micro để trả lời"})})]})}

package/dist/components/exams/take/components/speaking/SpeakingNavButton.d.ts

@@ -0,0 +1,7 @@
+interface SpeakingNavButtonProps {
+    direction: 'prev' | 'next';
+    onClick: () => void;
+    disabled?: boolean;
+}
+export declare function SpeakingNavButton({ direction, onClick, disabled, }: SpeakingNavButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/exams/take/components/speaking/SpeakingNavButton.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{ChevronLeft as r,ChevronRight as t}from"lucide-react";import{cn as a}from"../../../../../shared/lib/utils";export function SpeakingNavButton({direction:o,onClick:i,disabled:s=!1}){const d="prev"===o?r:t;return e("button",{onClick:i,disabled:s,className:a("flex h-14 w-14 items-center justify-center rounded-full","border-4 border-amber-800","bg-gradient-to-b from-amber-500 to-amber-700","shadow-[0_4px_12px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.2)]","transition-all duration-200","hover:from-amber-600 hover:to-amber-800","active:scale-95 active:shadow-[0_2px_6px_rgba(0,0,0,0.4)]","disabled:cursor-not-allowed disabled:opacity-40","sm:h-16 sm:w-16"),"aria-label":"prev"===o?"Câu trước":"Câu tiếp theo",children:e(d,{className:"h-7 w-7 text-white drop-shadow sm:h-8 sm:w-8",strokeWidth:2.5})})}

package/dist/components/exams/take/components/speaking/SpeakingPartBadge.d.ts

@@ -0,0 +1,6 @@
+interface SpeakingPartBadgeProps {
+    partName: string;
+    className?: string;
+}
+export declare function SpeakingPartBadge({ partName, className }: SpeakingPartBadgeProps): import("react").JSX.Element;
+export {};

package/dist/components/exams/take/components/speaking/SpeakingPartBadge.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{cn as r}from"../../../../../shared/lib/utils";export function SpeakingPartBadge({partName:t,className:s}){return e("div",{className:r("relative inline-flex items-center justify-center",s),children:a("div",{className:"relative flex items-center gap-2 rounded-full border-4 border-amber-600 bg-gradient-to-b from-amber-300 via-amber-400 to-amber-600 px-6 py-2 shadow-[0_4px_12px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.3)]",children:[e("span",{className:"text-sm","aria-hidden":"true",children:"🍃"}),e("span",{className:"font-bold tracking-wide text-amber-900 drop-shadow-sm",style:{fontSize:"1.1rem"},children:t}),e("span",{className:"text-sm","aria-hidden":"true",children:"🍃"})]})})}

package/dist/components/exams/take/components/speaking/SpeakingReadDisplayedContent.module.css

@@ -0,0 +1,115 @@
+/* ===== Read Displayed Content — Scoped styles ===== */
+
+/* Reference text card — prominent, readable display */
+.referenceTextCard {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  padding: 32px 40px;
+  max-width: 720px;
+  width: 100%;
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.12),
+    0 1px 4px rgba(0, 0, 0, 0.08);
+  border: 2px solid rgba(255, 255, 255, 0.6);
+}
+
+.referenceText {
+  font-size: 1.5rem;
+  line-height: 2;
+  color: #1a1a2e;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  letter-spacing: 0.02em;
+  text-align: center;
+  word-spacing: 0.05em;
+}
+
+/* Difficulty tag badge */
+.difficultyBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.difficultyBasicPhonics {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.difficultyDailyRoutine {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.difficultyDescriptiveEmotional {
+  background: #ede9fe;
+  color: #6d28d9;
+}
+
+/* Model audio section */
+.modelAudioSection {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.modelAudioLabel {
+  font-size: 0.85rem;
+  color: #64748b;
+  font-weight: 500;
+}
+
+/* Task number indicator */
+.taskIndicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 700;
+  font-size: 0.9rem;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.taskDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  transition: background 0.2s;
+}
+
+.taskDotActive {
+  background: #fbbf24;
+  box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
+}
+
+.taskDotCompleted {
+  background: #34d399;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .referenceTextCard {
+    padding: 20px 24px;
+    max-width: 100%;
+  }
+
+  .referenceText {
+    font-size: 1.2rem;
+    line-height: 1.8;
+  }
+}
+
+@media (max-width: 480px) {
+  .referenceText {
+    font-size: 1rem;
+    line-height: 1.7;
+  }
+}

package/dist/components/exams/take/components/speaking/SpeakingRecordingPreview.d.ts

@@ -0,0 +1,11 @@
+import type { RecordingState } from '../../types/speaking.types';
+interface SpeakingRecordingPreviewProps {
+    previewUrl: string;
+    uploadedKey: string | null;
+    status: RecordingState['status'];
+    onReRecord: () => void;
+    /** Called when audio playback state changes (play/pause/ended) */
+    onPlayingChange?: (isPlaying: boolean) => void;
+}
+export declare function SpeakingRecordingPreview({ previewUrl, uploadedKey, status, onReRecord, onPlayingChange, }: SpeakingRecordingPreviewProps): import("react").JSX.Element;
+export {};

package/dist/components/exams/take/components/speaking/SpeakingRecordingPreview.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as n,useState as r,useEffect as i}from"react";import{Play as a,Pause as l,RotateCcw as s,CheckCircle as d,AlertCircle as o,Loader2 as c}from"lucide-react";import{cn as m}from"../../../../../shared/lib/utils";function u(e){const t=Math.floor(e/60),n=Math.floor(e%60);return`${String(t).padStart(2,"0")}:${String(n).padStart(2,"0")}`}export function SpeakingRecordingPreview({previewUrl:p,uploadedKey:h,status:b,onReRecord:x,onPlayingChange:f}){const g=n(null),[w,v]=r(!1),[N,k]=r(0),[y,L]=r(0),E=!h&&"uploading"!==b&&"uploaded"!==b;i(()=>{const e=g.current;if(!e)return;const t=()=>{e.duration&&!isNaN(e.duration)&&isFinite(e.duration)&&L(e.duration)},n=()=>{k(e.currentTime),t()},r=()=>{v(!1),k(0),f?.(!1)};return t(),e.addEventListener("loadedmetadata",t),e.addEventListener("timeupdate",n),e.addEventListener("ended",r),()=>{e.removeEventListener("loadedmetadata",t),e.removeEventListener("timeupdate",n),e.removeEventListener("ended",r)}},[p]);const j=y>0?N/y*100:0;return t("div",{className:"mx-auto flex w-fit min-w-[320px] max-w-full items-center gap-3 rounded-full bg-white/70 backdrop-blur-md px-4 py-2.5 shadow-[0_8px_30px_rgb(0,0,0,0.12)] border border-white/60 ring-2 ring-white/40",children:[e("audio",{ref:g,src:p,preload:"metadata"}),e("button",{type:"button",onClick:()=>{const e=g.current;e&&(w?(e.pause(),v(!1),f?.(!1)):(e.play(),v(!0),f?.(!0)))},className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-500 text-white shadow-md transition-all hover:bg-blue-600 hover:scale-105 active:scale-95","aria-label":w?"Tạm dừng":"Nghe lại",children:w?e(l,{className:"h-4 w-4 fill-current"}):e(a,{className:"ml-0.5 h-4 w-4 fill-current"})}),e("div",{className:"flex-1 min-w-[100px] relative flex items-center",children:e("input",{type:"range",min:"0",max:y||0,step:"0.1",value:N,onChange:e=>{const t=g.current;if(!t)return;const n=parseFloat(e.target.value);t.currentTime=n,k(n)},className:m("w-full h-1.5 cursor-pointer appearance-none rounded-full bg-stone-200","[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:w-3.5","[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md","[&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-blue-500","[&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-125"),style:{background:`linear-gradient(to right, #3b82f6 0%, #3b82f6 ${j}%, #e5e7eb ${j}%, #e5e7eb 100%)`}})}),t("span",{className:"min-w-[72px] text-right text-[11px] tabular-nums text-stone-600 font-bold shrink-0 tracking-wide",children:[u(N)," / ",u(y)]}),e("div",{className:"w-px h-6 bg-stone-200 shrink-0 mx-1"}),t("div",{className:"shrink-0 flex items-center justify-center min-w-[70px]",children:["uploading"===b&&t("div",{className:"flex items-center gap-1.5 rounded-full bg-amber-100 px-2.5 py-1 text-[11px] font-bold text-amber-700",children:[e(c,{className:"h-3 w-3 animate-spin"}),e("span",{className:"hidden sm:inline",children:"Đang lưu"})]}),"uploaded"===b&&t("div",{className:"flex items-center gap-1.5 rounded-full bg-green-100 px-2.5 py-1 text-[11px] font-bold text-green-700",children:[e(d,{className:"h-3.5 w-3.5"}),e("span",{className:"hidden sm:inline",children:"Đã lưu"})]}),"error"===b&&t("div",{className:"flex items-center gap-1.5 rounded-full bg-red-100 px-2.5 py-1 text-[11px] font-bold text-red-700",children:[e(o,{className:"h-3.5 w-3.5"}),e("span",{className:"hidden sm:inline",children:"Lỗi"})]}),"recorded"===b&&e("div",{className:"flex items-center gap-1 text-[11px] text-stone-400 font-medium",children:e(c,{className:"h-3 w-3 animate-spin"})})]}),E&&t("button",{type:"button",onClick:x,className:"flex items-center gap-1.5 rounded-full bg-stone-100 px-3 py-1.5 text-[11px] font-bold text-stone-700 transition-all hover:bg-stone-200 hover:text-stone-900 active:bg-stone-300 disabled:cursor-not-allowed disabled:opacity-50 shrink-0 ml-1",children:[e(s,{className:"h-3.5 w-3.5"}),e("span",{className:"hidden sm:inline",children:"Ghi lại"})]})]})}

package/dist/components/exams/take/components/speaking/SpeakingReportErrorButton.d.ts

@@ -0,0 +1 @@
+export declare function SpeakingReportErrorButton(): import("react").JSX.Element;

package/dist/components/exams/take/components/speaking/SpeakingReportErrorButton.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import{toast as e}from"../../../../../shared/lib/toast";export function SpeakingReportErrorButton(){return o("button",{type:"button",onClick:()=>{e.info("Tính năng báo cáo lỗi sẽ sớm có")},className:"flex flex-col items-center justify-center gap-0.5 rounded-lg border-2 border-yellow-600 bg-gradient-to-b from-yellow-400 to-yellow-600 px-2 py-3 shadow-md transition-all hover:from-yellow-500 hover:to-yellow-700 active:scale-95","aria-label":"Báo cáo lỗi",title:"Báo cáo lỗi",children:"BÁO CÁO LỖI".split("").map((e,t)=>o("span",{className:"text-[9px] font-extrabold leading-tight text-yellow-900",children:" "===e?" ":e},t))})}

package/dist/components/exams/take/components/speaking/SpeakingStoryImages.module.css

@@ -0,0 +1,231 @@
+/* ============================================================
+ * SpeakingStoryImages — 2-row grid layout
+ *
+ * Goals:
+ *  - Larger image frames (acceptable to scroll vertically).
+ *  - 2 rows by default (e.g. 3+3, 3+2, 2+2). For ≤3 images,
+ *    a single row still renders naturally via auto-fit.
+ *  - Never overlap the floating audio bar at the top of the
+ *    Summer Sky board, nor the mic label / mic button at the
+ *    bottom — handled via fixed safe-zone padding.
+ *  - Numbered frames so the story order remains obvious.
+ * ============================================================ */
+
+/* Outer wrapper takes the full content area and reserves
+ * vertical "safe zones". Vertical scroll is allowed; horizontal
+ * is not. */
+.part3Container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  position: relative;
+  /* Top: clears the floating audio pill (top:50px + ~36px tall). */
+  /* Bottom: clears mic label that sits inside the board. */
+  padding: 96px 110px 140px;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
+}
+
+.part3Container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.part3Container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.part3Container::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 10px;
+}
+
+/* Grid: auto-fit so 1–6 images naturally lay out. With minmax
+ * around 320px and a max board width of ~1180px (after padding),
+ * 4 columns fit comfortably; ≥5 wraps to a second row, giving
+ * the requested 3+2 / 3+3 style without manual breakpoints. */
+.storyGrid {
+  width: 100%;
+  display: grid;
+  gap: 24px;
+  justify-items: center;
+  align-content: start;
+  /* Default: 3 columns (covers 3, 5→3+2, 6→3+3). Renderer overrides
+   * via data-count for cases where a different split looks better. */
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.storyGrid[data-count="1"] {
+  grid-template-columns: minmax(0, 520px);
+}
+
+.storyGrid[data-count="2"],
+.storyGrid[data-count="4"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+/* Each frame keeps a fixed landscape aspect ratio so all images
+ * render at the same size regardless of source dimensions. */
+.storyFrame {
+  position: relative;
+  width: 100%;
+  max-width: 380px;
+  aspect-ratio: 4 / 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* The clickable image surface — themed border + shadow that
+ * matches Summer Sky cards. */
+.imageBorder {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  /* Soft fill behind contained images so any letterboxing blends in. */
+  background: #f4f8ff;
+  border: 4px solid #ffffff;
+  box-shadow:
+    0 6px 14px rgba(11, 76, 142, 0.22),
+    0 0 0 2px rgba(74, 144, 217, 0.25);
+  overflow: hidden;
+  cursor: zoom-in;
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+  padding: 0;
+}
+
+.imageBorder:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow:
+    0 10px 22px rgba(11, 76, 142, 0.32),
+    0 0 0 2px rgba(74, 144, 217, 0.45);
+}
+
+.imageBorder img {
+  width: 100%;
+  height: 100%;
+  /* `contain` ensures the full story illustration is always visible —
+   * never crop characters/objects out at the edges. Minor letterboxing
+   * is acceptable and blends with the background fill. */
+  object-fit: contain;
+  object-position: center;
+  display: block;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Numbered sequence badge (top-left). */
+.storyNumber {
+  position: absolute;
+  top: -12px;
+  left: -12px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(180deg, #ffe341 0%, #f7ab16 100%);
+  color: #0b4c8e;
+  font-family: 'Nunito', 'Open Sans', system-ui, sans-serif;
+  font-weight: 900;
+  font-size: 20px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 3px solid #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  z-index: 2;
+  pointer-events: none;
+}
+
+/* Empty state */
+.emptyState {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  color: #cbd5e1;
+  font-size: 14px;
+}
+
+/* ===== Lightbox / enlarged preview ===== */
+.lightboxBackdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.78);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  animation: storyFadeIn 0.18s ease-out;
+  cursor: zoom-out;
+}
+
+.lightboxImage {
+  max-width: min(90vw, 1100px);
+  max-height: 90vh;
+  border-radius: 18px;
+  border: 6px solid #ffffff;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
+  object-fit: contain;
+  background: #fff;
+}
+
+.lightboxClose {
+  position: fixed;
+  top: 24px;
+  right: 32px;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: #ffffff;
+  color: #0b4c8e;
+  font-size: 24px;
+  font-weight: 900;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+}
+
+@keyframes storyFadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* ===== Responsive tightening ===== */
+@media (max-width: 1530px) {
+  .part3Container {
+    padding: 90px 90px 130px;
+  }
+  .storyGrid {
+    gap: 20px;
+  }
+  .storyFrame {
+    max-width: 340px;
+  }
+  .storyNumber {
+    width: 36px;
+    height: 36px;
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 1280px) {
+  .part3Container {
+    padding: 84px 70px 120px;
+  }
+  .storyGrid {
+    gap: 16px;
+  }
+  .storyFrame {
+    max-width: 300px;
+  }
+}

package/dist/components/exams/take/components/speaking/SpeakingVideoIntro.d.ts

@@ -0,0 +1,13 @@
+/**
+ * speakingVideoMap — Maps speaking question types to their AI teacher intro video URLs.
+ *
+ * These videos play muted in the floating AI teacher widget within the speaking exam layout,
+ * corresponding to the current question type being answered.
+ */
+import type { QuestionType } from '../../utils/question-transformers';
+/**
+ * Resolve the AI teacher video URL for the given question type.
+ * Returns the type-specific video or undefined if no video exists.
+ */
+export declare function getTeacherVideoUrl(questionType: QuestionType): string | undefined;
+export declare function shouldWaitForTeacherVideo(questionType: QuestionType): boolean;

package/dist/components/exams/take/components/speaking/SpeakingVideoIntro.js

@@ -0,0 +1 @@
+const e={READ_DISPLAYED_CONTENT:"/speaking/video/read_displayed_content.webm",SPEAKING_DESCRIBE_IMAGE:"/speaking/video/speaking_describe_image.webm",SPONTANEOUS_QA:"/speaking/video/spontaneous_qa.webm"};export function getTeacherVideoUrl(n){return e[n]}const n=new Set(["READ_DISPLAYED_CONTENT","SPEAKING_DESCRIBE_IMAGE","SPONTANEOUS_QA"]);export function shouldWaitForTeacherVideo(e){return n.has(e)}

package/dist/components/exams/take/components/speaking/index.d.ts

@@ -0,0 +1 @@
+export { SpeakingRecordingPreview } from './SpeakingRecordingPreview';

package/dist/components/exams/take/components/speaking/index.js

@@ -0,0 +1 @@
+export{SpeakingRecordingPreview}from"./SpeakingRecordingPreview";

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

@@ -0,0 +1,16 @@
+import type { QuestionPart } from '../../../utils/question-transformers';
+interface SpeakingChooseAnswerGroupRendererProps {
+    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 SpeakingChooseAnswerGroupRenderer(props: SpeakingChooseAnswerGroupRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+"use client";import{jsxs as e,jsx as n}from"react/jsx-runtime";import{ResolvedImage as o}from"../../../../../../components/common/ResolvedImage";import{cn as r}from"../../../../../../shared/lib/utils";import{useSpeakingRendererSetup as t}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as a}from"../../../../../../components/themes";import s from"../SpeakingReadDisplayedContent.module.css";function i({total:o,currentIndex:r,answeredIds:t,questionIds:a}){return e("div",{className:s.taskIndicator,style:{color:"#1e3a8a",textShadow:"none",fontWeight:800},children:[e("span",{children:["Question ",r+1,"/ ",o]}),n("div",{className:"flex gap-2",children:Array.from({length:o},(e,o)=>{const i=o===r,l=t.has(a[o]);return n("div",{className:`${s.taskDot} ${i?s.taskDotActive:""} ${l&&!i?s.taskDotCompleted:""}`,style:i||l?void 0:{background:"#bfdbfe"}},o)})})]})}function l({option:e,isSelected:t,isDisabled:a,onClick:s}){return n("button",{type:"button",onClick:s,disabled:a&&!t,className:r("group relative aspect-square w-[calc(33.333%-16px)] overflow-hidden rounded-xl bg-white shadow-sm cursor-pointer outline-none focus:outline-none transition-all duration-200",t?"border-[5px] border-red-400 shadow-[0_0_8px_rgba(239,68,68,0.5),0_0_16px_rgba(239,68,68,0.3)]":"border-2 border-gray-300 hover:border-gray-400 hover:shadow-md hover:scale-105",a&&!t&&"cursor-not-allowed"),children:n(o,{src:e.imageUrl,alt:e.label||"Answer option",className:"h-full w-full object-contain p-2 pointer-events-none",draggable:!1})})}export function SpeakingChooseAnswerGroupRenderer(e){const o=t({...e,hasMic:!1}),r=a(e.speakingTheme),s=o.currentQuestion?.content,d=o.currentQuestion?.questionGroup?.payload,c=s?.audioUrl??"",u=d?.options??s?.options??[],p=o.currentQuestion?e.answers[o.currentQuestion.id]:void 0,h=p?.answer??"";if(!o.currentQuestion)return null;const m=new Set(e.part.questions.map(e=>e.id).filter(n=>!!e.answers[n])),v=e.part.questions.map(e=>e.id),f=n(i,{total:e.part.questions.length,currentIndex:o.nav.currentIndex,answeredIds:m,questionIds:v});return n(r,{onExit:e.onExit,partName:e.part.name||`Part ${e.part.partNo}`,instruction:e.part.instructions||"LISTEN AND CHOOSE THE CORRECT ANSWER.",audioUrl:c,questionNumber:o.nav.questionNumberInPart,onPrev:o.handlePrev,onNext:o.handleNext,showPrev:o.nav.showPrev,showNext:o.nav.showNext,canGoPrev:o.nav.canGoPrev,canGoNext:o.nav.canGoNext,onAudioPlayingChange:o.onAudioPlayingChange,recorder:null,headerRight:f,teacherVideoUrl:e.teacherVideoUrl,onTeacherVideoEnded:e.onTeacherIntroPlayed,skipTeacherVideo:e.skipTeacherVideo,contentClassName:"h-full !p-0",children:n("div",{className:"w-full h-full overflow-y-auto pr-2",style:{scrollbarWidth:"thin",scrollbarColor:"#fff rgba(0,0,0,0.2)"},children:u.length>0?n("div",{className:"mx-auto flex max-w-[830px] flex-wrap justify-center gap-6 pb-6 pt-17",children:u.map(r=>n(l,{option:r,isSelected:h===r.id,isDisabled:e.isReviewMode||!1,onClick:()=>{return n=r.id,void(o.currentQuestion&&!e.isReviewMode&&e.onAnswerChange(o.currentQuestion.id,{answer:n}));var n}},r.id))}):n("div",{className:"flex h-48 items-center justify-center text-sm text-stone-400",children:"No options available"})})})}

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

@@ -0,0 +1,16 @@
+import type { QuestionPart } from '../../../utils/question-transformers';
+interface SpeakingChooseObjectsRendererProps {
+    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 SpeakingChooseObjectsRenderer(props: SpeakingChooseObjectsRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{usePresignedFileUrl as n}from"../../../../../../shared/lib/hooks";import{useSpeakingRendererSetup as r}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as o}from"../../../../../../components/themes";import i from"../FindObjectInPicture.module.css";import a from"../SpeakingReadDisplayedContent.module.css";function s({total:n,currentIndex:r,answeredIds:o,questionIds:i}){return e("div",{className:a.taskIndicator,style:{color:"#1e3a8a",textShadow:"none",fontWeight:800},children:[e("span",{children:["Question ",r+1,"/ ",n]}),t("div",{className:"flex gap-2",children:Array.from({length:n},(e,n)=>{const s=n===r,c=o.has(i[n]);return t("div",{className:`${a.taskDot} ${s?a.taskDotActive:""} ${c&&!s?a.taskDotCompleted:""}`,style:s||c?void 0:{background:"#bfdbfe"}},n)})})]})}function c({node:e,isSelected:r,isDisabled:o,onClick:a}){const{previewUrl:s}=n(e.imageUrl||"");return t("button",{type:"button",onClick:a,disabled:o,className:`${i.objectItem} ${r?i.objectItemSelected:""}`,style:{left:`${e.x}%`,top:`${e.y}%`,width:`${e.width}%`,height:`${e.height}%`},children:s?t("img",{src:s,alt:e.label,className:i.objectItemImageBorder,style:{height:"100%",width:"100%"},draggable:!1}):t("div",{style:{display:"flex",height:"100%",width:"100%",alignItems:"center",justifyContent:"center",background:"rgba(255,255,255,0.5)",fontSize:"12px",color:"#999"},children:e.label})})}export function SpeakingChooseObjectsRenderer(a){const d=r({...a,hasMic:!1}),l=o(a.speakingTheme),u=d.currentQuestion?.content,h=d.currentQuestion;let m=h?.questionGroup?.payload||h?.question_group?.payload;if("string"==typeof m)try{m=JSON.parse(m)}catch{m={}}const p=u?.audioUrl??"",g=m?.backgroundImageUrl??"",b=m?.objectNodes??[],v=d.currentQuestion?a.answers[d.currentQuestion.id]:void 0,f=v?.objectId??"",{previewUrl:x}=n(g);if(!d.currentQuestion)return null;const y=new Set(a.part.questions.map(e=>e.id).filter(e=>!!a.answers[e])),N=a.part.questions.map(e=>e.id),k=t(s,{total:a.part.questions.length,currentIndex:d.nav.currentIndex,answeredIds:y,questionIds:N});return t(l,{onExit:a.onExit,partName:a.part.name||`Part ${a.part.partNo}`,instruction:a.part.instructions||"Choose the correct objects in the Scene picture:",audioUrl:p,questionNumber:d.nav.questionNumberInPart,onPrev:d.handlePrev,onNext:d.handleNext,showPrev:d.nav.showPrev,showNext:d.nav.showNext,canGoPrev:d.nav.canGoPrev,canGoNext:d.nav.canGoNext,onAudioPlayingChange:d.onAudioPlayingChange,recorder:null,headerRight:k,teacherVideoUrl:a.teacherVideoUrl,onTeacherVideoEnded:a.onTeacherIntroPlayed,skipTeacherVideo:a.skipTeacherVideo,contentClassName:"!p-0",children:t("div",{className:i.findObjectContainer,children:e("div",{className:i.objectBackground,children:[t("div",{className:i.imageBackground,children:x?t("img",{alt:"Scene",src:x,draggable:!1}):t("div",{style:{display:"flex",height:"100%",width:"100%",alignItems:"center",justifyContent:"center",color:"#999"},children:"Loading..."})}),b.map(e=>t(c,{node:e,isSelected:f===e.id,isDisabled:a.isReviewMode||!1,onClick:()=>{return t=e.id,void(d.currentQuestion&&!a.isReviewMode&&a.onAnswerChange(d.currentQuestion.id,{objectId:t}));var t}},e.id))]})})})}

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

@@ -0,0 +1,17 @@
+import type { QuestionPart } from '../../../utils/question-transformers';
+interface SpeakingCompareImagesRendererProps {
+    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;
+    waitForTeacherVideo?: boolean;
+}
+export declare function SpeakingCompareImagesRenderer(props: SpeakingCompareImagesRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as r,Fragment as a}from"react/jsx-runtime";import{ResolvedImage as n}from"../../../../../../components/common/ResolvedImage";import{useSpeakingRendererSetup as t}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as o}from"../../../../../../components/themes";export function SpeakingCompareImagesRenderer(r){const a=t({...r,maxDurationMs:3e4}),n=o(r.speakingTheme),d=a.currentQuestion?.content,l=a.currentQuestion?.questionGroup?.payload;if(!a.currentQuestion)return null;const s=d?.audioUrl??"",c=l?.candidateImageUrl??"",m=l?.examinerImageUrl??"";return e(n,{onExit:r.onExit,partName:r.part.name||`Part ${r.part.partNo}`,instruction:r.part.instructions||"LOOK AT THE TWO PICTURES. THEY LOOK THE SAME BUT SOME THINGS ARE DIFFERENT.",audioUrl:s,questionNumber:a.nav.questionNumberInPart,onPrev:a.handlePrev,onNext:a.handleNext,showPrev:a.nav.showPrev,showNext:a.nav.showNext,canGoPrev:a.nav.canGoPrev,canGoNext:a.nav.canGoNext,onAudioPlayingChange:a.onAudioPlayingChange,recorder:r.isReviewMode?null:a.recorder,showExistingBadge:a.showExistingBadge,teacherVideoUrl:r.teacherVideoUrl,onTeacherVideoEnded:r.onTeacherIntroPlayed,skipTeacherVideo:r.skipTeacherVideo,waitForTeacherVideo:r.waitForTeacherVideo,children:e("div",{className:"flex h-full w-full flex-col items-center gap-8 overflow-y-auto overflow-x-hidden px-4 py-18 scrollbar-thin",children:e(i,{candidateImageUrl:c,examinerImageUrl:m,showExistingBadge:a.showExistingBadge})})})}function i({candidateImageUrl:t,examinerImageUrl:o,showExistingBadge:i}){return r(a,{children:[i&&r("div",{className:"absolute right-4 top-4 z-10 flex items-center gap-2 rounded-full border-2 border-white bg-green-500 px-4 py-1 text-sm font-bold text-white shadow-md",children:[e("span",{className:"h-2.5 w-2.5 animate-pulse rounded-full bg-white"}),"Đã ghi âm"]}),r("div",{className:"relative flex w-full max-w-[1000px] flex-col items-center",children:[e("div",{className:"z-10 -mb-3 flex h-8 min-w-[200px] items-center justify-center rounded-xl bg-[#1e3458] px-6 text-[13px] font-bold uppercase tracking-[1.5px] text-white shadow-md md:-mb-4 md:h-10 md:text-sm",children:"Candidate's copy"}),e("div",{className:"relative aspect-[3.3] w-full overflow-hidden rounded-xl border-4 p-[10px] border-[#b45309] bg-white shadow-md",children:e(n,{src:t,alt:"Candidate's copy",className:"pointer-events-none h-full w-full object-cover rounded-xl",draggable:!1})})]}),r("div",{className:"relative flex w-full max-w-[1000px] flex-col items-center pb-8",children:[e("div",{className:"z-10 -mb-3 flex h-8 min-w-[200px] items-center justify-center rounded-xl bg-[#1e3458] px-6 text-[13px] font-bold uppercase tracking-[1.5px] text-white shadow-md md:-mb-4 md:h-10 md:text-sm",children:"Examiner's copy"}),e("div",{className:"relative aspect-[3.3] w-full overflow-hidden rounded-xl border-4 p-[10px] border-[#1e3a8a] bg-white shadow-md",children:e(n,{src:o,alt:"Examiner's copy",className:"pointer-events-none h-full w-full object-cover rounded-xl",draggable:!1})})]})]})}

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

@@ -0,0 +1,16 @@
+import type { QuestionPart } from '../../../utils/question-transformers';
+interface SpeakingConversationRendererProps {
+    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 SpeakingConversationRenderer(props: SpeakingConversationRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as a}from"react";import s from"next/image";import{Pause as n,Play as r}from"lucide-react";import{ResolvedImage as i}from"../../../../../../components/common/ResolvedImage";import{useSpeakingRendererSetup as l}from"../../../hooks/useSpeakingRendererSetup";import{useSpeakingConversationAudio as o}from"../../../hooks/useSpeakingConversationAudio";import{getSpeakingLayout as c}from"../../../../../../components/themes";import d from"../../../../../../components/themes/spaceship/assets/styles/SpaceshipLayout.module.css";import p from"../../../../../../components/themes/spaceship/assets/images/big-blue-badge-sunset.png";import m from"../../../../../../components/themes/spaceship/assets/images/teacher-play-sunset.png";import h from"../../../../../../components/themes/spaceship/assets/images/question-badge-sunset.png";import u from"../../../../../../components/themes/spaceship/assets/images/red-badge-sunset.png";import x from"../../../../../../components/themes/spaceship/assets/images/blue-badge-sunset.png";import g from"../../../../../../components/themes/spaceship/assets/images/red-wrapper-sunset.png";import f from"../../../../../../components/themes/spaceship/assets/images/blue-wrapper-sunset.png";import N from"../../../../../../components/themes/spaceship/assets/images/robot-avatar.png";import v from"../../../../../../components/themes/spaceship/assets/images/student-avatar.png";import y from"../../../../../../components/themes/spaceship/assets/images/next-small.webp";function b(e){if(!isFinite(e)||e<0)return"0:00";return`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`}function w({phase:a,isPlaying:i,togglePlayPause:l,partNumber:o,partnerName:c,currentTime:h,duration:u}){const x="playing-partner"===a?c||"Bạn thi":`PART ${o}`,g=u>0?h/u*100:0;return e("div",{className:d.examAudioContainer,children:t("div",{className:d.bigBlueBadge,children:[e(s,{src:p,alt:"Audio Badge",className:d.bigBlueBadgeBg,priority:!0}),e("div",{className:d.audioBarContent,children:t("div",{className:d.audioBarInner,children:[e("span",{className:d.partLabel,children:x}),t("div",{className:d.teacherAvatarContainer,onClick:l,title:i?"Tạm dừng":"Phát",children:[e("img",{src:m.src,alt:"Speaker",className:d.teacherPlayIcon}),e("div",{className:"absolute inset-0 flex items-center justify-center",children:i?e(n,{className:"h-5 w-5 text-white drop-shadow-md",fill:"currentColor"}):e(r,{className:"h-5 w-5 text-white drop-shadow-md ml-0.5",fill:"currentColor"})})]}),t("div",{className:d.audioControlsWrapper,children:[t("span",{className:d.audioTime,children:["idle"===a&&"0:00 / 0:00",i&&`${b(h)} / ${b(u)}`,"ready"===a&&`${b(u)} / ${b(u)}`]}),e("div",{className:d.sliderTrack,children:e("div",{className:d.sliderFill,style:{width:`${g}%`,transition:"width 0.25s linear"}})})]})]})})]})})}function P({text:n}){const[r,i]=a(!0);return n?e("div",{className:"flex flex-col items-center w-full",style:{maxWidth:"882px"},children:t("div",r?{className:"relative flex flex-col justify-center items-center",style:{width:"882px",maxWidth:"90%",paddingLeft:"77px",paddingRight:"77px",paddingTop:"26px",paddingBottom:"26px",backgroundColor:"rgba(232, 136, 154, 0.15)",borderRadius:"20px"},children:[t("div",{className:"absolute cursor-pointer",style:{top:"-19px"},onClick:()=>i(!1),children:[e(s,{src:h,alt:"",style:{width:"169px",height:"38px"}}),e("div",{className:"absolute inset-0 flex justify-center items-center select-none",children:e("span",{className:"font-normal text-center leading-5 text-white",style:{fontSize:"18px"},children:"Ấn câu hỏi"})})]}),e("p",{className:"text-black font-bold leading-[26px] text-center m-0",style:{fontSize:"18px",fontFamily:'"Open Sans", sans-serif'},children:n})]}:{className:"relative cursor-pointer",onClick:()=>i(!0),children:[e(s,{src:h,alt:"",style:{width:"169px",height:"38px"}}),e("div",{className:"absolute inset-0 flex justify-center items-center select-none",children:e("span",{className:"font-normal text-center leading-5 text-white",style:{fontSize:"18px"},children:"Hiện câu hỏi"})})]})}):null}function S({images:a}){if(!a||0===a.length)return null;const s=1===a.length,n=s?"grid-cols-1":2===a.length||4===a.length?"grid-cols-2":"grid-cols-3";return e("div",{className:`grid ${n} gap-4 w-full`,style:{maxWidth:s?"650px":"800px",margin:"0 auto"},children:a.map(a=>t("div",{className:"flex flex-col items-center gap-2",children:[e("div",{className:`relative w-full ${s?"":"aspect-square"} flex justify-center items-center rounded-xl overflow-hidden border-2 border-white/40 shadow-md bg-white/20`,children:e(i,{src:a.url,alt:a.label||"Image",className:"object-contain pointer-events-none "+(s?"max-h-[350px] w-auto":"w-full h-full p-1"),draggable:!1})}),a.label&&e("span",{className:"text-center font-bold",style:{fontSize:"14px",color:"#333"},children:a.label})]},a.id))})}function C({partnerName:a,partnerAvatarUrl:n,studentName:r,activeCharacter:l,isPartnerQuestion:o}){const c="partner"===l,d="student"===l;return t("div",{className:"flex justify-between select-none",style:{width:"990px",maxWidth:"95%",paddingBottom:"10px",paddingLeft:"20px",paddingRight:"20px"},children:[t("div",{className:"relative select-none",style:{opacity:c?1:.55},children:[t("div",{className:"relative flex",children:[e(s,{src:u,alt:"",style:{height:"57px",width:"258px"}}),e("div",{className:"absolute inset-0 flex justify-center items-center",style:{paddingTop:"12px"},children:e("p",{className:"m-0 truncate select-none text-white font-normal text-center leading-5",style:{fontSize:"18px",paddingLeft:"60px",paddingRight:"60px"},children:a||"Bạn thi"})})]}),t("div",{className:"absolute",style:{top:"7px",right:"-58px"},children:[e(s,{src:g,alt:"",className:"relative",style:{width:"115px",height:"84px",zIndex:0}}),e("div",{className:"absolute inset-0 flex justify-center items-center w-full h-full",children:t("div",{className:"relative",style:{width:"68px",height:"68px"},children:[n?e(i,{src:n,alt:a||"Partner",className:"object-cover rounded-full select-none",style:{width:"68px",height:"68px"},draggable:!1}):e(s,{src:N,alt:a||"Partner",width:68,height:68,className:"object-cover rounded-full select-none",draggable:!1}),c&&e("div",{className:"absolute inset-0 rounded-full border-4 border-yellow-400 shadow-[0_0_12px_4px_rgba(250,204,21,0.6)]"})]})})]})]}),t("div",{className:"relative select-none",style:{opacity:d||!o?1:.55},children:[t("div",{className:"relative flex",children:[e(s,{src:x,alt:"",style:{height:"57px",width:"258px"}}),e("div",{className:"absolute inset-0 flex justify-center items-center",style:{paddingTop:"12px"},children:e("p",{className:"m-0 truncate select-none text-white font-normal text-center leading-5",style:{fontSize:"18px",paddingLeft:"60px",paddingRight:"60px"},children:r||"Bạn"})})]}),t("div",{className:"absolute",style:{top:"7px",left:"-58px"},children:[e(s,{src:f,alt:"",className:"relative",style:{width:"115px",height:"84px",zIndex:0}}),e("div",{className:"absolute inset-0 flex justify-center items-center w-full h-full",children:t("div",{className:"relative",style:{width:"68px",height:"68px"},children:[e(s,{src:v,alt:r||"Bạn",width:68,height:68,className:"object-cover rounded-full select-none",draggable:!1}),d&&e("div",{className:"absolute inset-0 rounded-full border-4 border-sky-400 shadow-[0_0_12px_4px_rgba(56,189,248,0.6)]"})]})})]})]})]})}function A({audioReady:a,onNext:n}){return a?e("div",{className:"flex flex-col items-center text-center",style:{maxWidth:"291px",marginTop:"-10px",marginBottom:"10px"},children:t("div",{className:"flex items-center gap-1",children:[e("p",{className:"m-0",style:{color:"#333",fontSize:"13px"},children:"Ấn nút"}),e("div",{className:"cursor-pointer",onClick:n,children:e(s,{src:y,alt:"next",width:30,height:30})}),e("p",{className:"m-0",style:{color:"#333",fontSize:"13px"},children:"để tiếp tục."})]})}):null}export function SpeakingConversationRenderer(s){const[n,r]=a(!1),i=l({...s,maxDurationMs:3e4,hasMic:!0}),d=c("SPACESHIP"),p=i.currentQuestion?.content,m=i.currentQuestion?.questionGroup?.payload,h="PARTNER"===p?.responder,u=o({interlocutorAudioUrl:p?.interlocutorAudioUrl,partnerAudioUrl:p?.partnerAudioUrl,onSequenceComplete:()=>r(!0)});if(!i.currentQuestion||!p)return null;const x="playing-interlocutor"===u.phase?"interlocutor":"playing-partner"===u.phase||h?"partner":n?"student":"none",g=()=>{r(!1),i.handleNext()};return e(d,{onExit:s.onExit,partName:s.part.name||`Part ${s.part.partNo}`,instruction:s.part.instructions||"SPEAKING CONVERSATION",audioUrl:"",questionNumber:i.nav.questionNumberInPart,onPrev:()=>{r(!1),i.handlePrev()},onNext:g,showPrev:i.nav.showPrev,showNext:i.nav.showNext,canGoPrev:i.nav.canGoPrev,canGoNext:i.nav.canGoNext,onAudioPlayingChange:i.onAudioPlayingChange,recorder:s.isReviewMode||h?null:i.recorder,showExistingBadge:!h&&i.showExistingBadge,teacherVideoUrl:s.teacherVideoUrl,onTeacherVideoEnded:s.onTeacherIntroPlayed,skipTeacherVideo:s.skipTeacherVideo,hideAudioBar:!0,hideFooterTitle:h,children:t("div",{className:"w-full h-full flex flex-col items-center relative",style:{paddingBottom:h?"0":"50px"},children:[e(w,{phase:u.phase,isPlaying:u.isPlaying,togglePlayPause:u.togglePlayPause,partNumber:i.nav.currentPartNo,partnerName:m?.partnerName,currentTime:u.currentTime,duration:u.duration}),e(P,{text:p.questionText}),m?.images&&m.images.length>0&&e("div",{className:"mt-4 w-full flex justify-center",children:e(S,{images:m.images})}),e("div",{className:"flex-1"}),h&&e(A,{audioReady:n,onNext:g}),e(C,{partnerName:m?.partnerName,partnerAvatarUrl:m?.partnerAvatarUrl,activeCharacter:x,isPartnerQuestion:h})]},i.currentQuestion.id)})}

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

@@ -0,0 +1,17 @@
+import type { QuestionPart } from '../../../utils/question-transformers';
+interface SpeakingCueCardRendererProps {
+    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;
+    waitForTeacherVideo?: boolean;
+}
+export declare function SpeakingCueCardRenderer(props: SpeakingCueCardRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+"use client";import{jsxs as e,jsx as n}from"react/jsx-runtime";import{useEffect as t,useRef as r,useState as o}from"react";import{useSpeakingRendererSetup as a}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as i}from"../../../../../../components/themes";import s from"../../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import l from"next/image";import d from"../../../../../../components/themes/summer-sky/assets/images/mic_ver2_icon.png";import c from"../../../../../../components/themes/summer-sky/assets/images/stop_audio_ver2_icon.png";import p from"../../../../../../components/themes/summer-sky/assets/images/audio_ver2_icon.png";import u from"../../../../../../components/themes/summer-sky/assets/images/pause_audio_ver2_icon.png";import m from"../../../../../../components/themes/summer-sky/assets/images/lock_mic_ver2_icon.png";import h from"../SpeakingReadDisplayedContent.module.css";function g({total:t,currentIndex:r,answeredIds:o,questionIds:a}){return e("div",{className:h.taskIndicator,style:{color:"#78350f",textShadow:"none",fontWeight:800},children:[e("span",{children:["Question ",r+1,"/ ",t]}),n("div",{className:"flex gap-2",children:Array.from({length:t},(e,t)=>{const i=t===r,s=o.has(a[t]);return n("div",{className:`${h.taskDot} ${i?h.taskDotActive:""} ${s&&!i?h.taskDotCompleted:""}`},t)})})]})}function x({total:t,currentIndex:r,answeredIds:o,questionIds:a}){return e("div",{className:"flex items-center gap-2 font-bold text-[#78350f] font-['Quicksand'] z-10",children:[e("span",{className:"text-sm",children:["Question ",r+1,"/ ",t]}),n("div",{className:"flex gap-1.5",children:Array.from({length:t},(e,t)=>{const i=t===r,s=o.has(a[t]);return n("div",{className:"w-2.5 h-2.5 rounded-full "+(i?"bg-[#FF9900] scale-125 shadow-sm":s?"bg-[#16CA3B]":"bg-white/60")},t)})})]})}export function SpeakingCueCardRenderer(m){const h=a({...m,maxDurationMs:12e4}),f=i(m.speakingTheme),v=h.currentQuestion?.content,w=v?.speakingTimeSeconds??120;t(()=>{h.recorder&&(h.recorder.maxDurationMs=1e3*w)},[w,h.recorder]);const b=r(null),[y,N]=o(!1);if(t(()=>{const e=b.current;if(!e)return;const n=()=>{N(!0),h.onAudioPlayingChange?.(!0)},t=()=>{N(!1),h.onAudioPlayingChange?.(!1)},r=()=>{N(!1),h.onAudioPlayingChange?.(!1)};return e.addEventListener("play",n),e.addEventListener("pause",t),e.addEventListener("ended",r),()=>{e.removeEventListener("play",n),e.removeEventListener("pause",t),e.removeEventListener("ended",r),h.onAudioPlayingChange?.(!1)}},[h.recorder?.previewUrl,h.onAudioPlayingChange]),!h.currentQuestion||!v)return null;const k=new Set(m.part.questions.map(e=>e.id).filter(e=>!!m.answers[e])),_=m.part.questions.map(e=>e.id);if(m.speakingTheme&&"CAMBRIDGE_YLE"!==m.speakingTheme){const t=n(g,{total:m.part.questions.length,currentIndex:h.nav.currentIndex,answeredIds:k,questionIds:_});return e(f,{onExit:m.onExit,partName:m.part.name||`Part ${m.part.partNo}`,instruction:m.part.instructions||"READ CUE CARD AND SPEAK",audioUrl:"",questionNumber:h.nav.questionNumberInPart,onPrev:h.handlePrev,onNext:h.handleNext,showPrev:h.nav.showPrev,showNext:h.nav.showNext,canGoPrev:h.nav.canGoPrev,canGoNext:h.nav.canGoNext,onAudioPlayingChange:h.onAudioPlayingChange,recorder:m.isReviewMode?null:h.recorder,showExistingBadge:h.showExistingBadge,headerRight:t,teacherVideoUrl:m.teacherVideoUrl,onTeacherVideoEnded:m.onTeacherIntroPlayed,skipTeacherVideo:m.skipTeacherVideo,waitForTeacherVideo:m.waitForTeacherVideo,children:[n("div",{className:"w-full h-full flex flex-col items-center relative",children:n("div",{className:"w-full flex-1",style:{minHeight:0},children:n("div",{className:"mx-auto",style:{width:"850px",maxWidth:"95%",height:"calc(100% - 80px)"},children:n("div",{className:"w-full h-full flex flex-col items-center justify-center",children:e("div",{className:"relative flex flex-col justify-start",style:{width:"100%",paddingLeft:"50px",paddingRight:"50px",paddingTop:"16px",paddingBottom:"16px"},children:[h.showExistingBadge&&e("div",{className:"absolute right-12 top-4 z-10 rounded-full bg-green-500 px-4 py-1.5 flex items-center gap-2 text-sm font-bold text-white shadow-md border-2 border-white",children:[n("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),n("div",{className:"cue-card-content",dangerouslySetInnerHTML:{__html:v.cueCardHtml},style:{fontSize:"22px",fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif',fontWeight:600,lineHeight:"35px",letterSpacing:"-0.01em",color:"#2C38B6"}})]})})})})}),n("style",{jsx:!0,global:!0,children:"\n          .cue-card-content p {\n            margin: 0 0 12px 0;\n          }\n          .cue-card-content p:last-child {\n            margin-bottom: 0;\n          }\n          .cue-card-content strong {\n            font-weight: 700;\n            font-size: 24px;\n            color: #1a237e;\n            line-height: 37px;\n          }\n          .cue-card-content ul {\n            margin: 16px 0;\n            padding: 0;\n            list-style: none;\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n          }\n          .cue-card-content ul li {\n            position: relative;\n            padding: 9px 15px 9px 34px;\n            font-size: 19px;\n            line-height: 28px;\n            font-weight: 500;\n            color: #283593;\n            background: rgba(44, 56, 182, 0.06);\n            border-radius: 12px;\n            border-left: 3px solid #5c6bc0;\n          }\n          .cue-card-content ul li::before {\n            content: '';\n            position: absolute;\n            left: 14px;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background: #5c6bc0;\n          }\n          .cue-card-content ul li p {\n            margin: 0;\n          }\n        "})]})}return e("div",{className:"flex flex-col w-full h-full relative",style:{background:"linear-gradient(180deg, #E6F3FF 0%, #FFFFFF 100%)"},children:[e("div",{className:"relative w-full flex justify-between items-start pt-6 px-6 z-20 shrink-0",children:[n("div",{className:"flex-1"}),n("div",{className:"flex-none drop-shadow-md",children:n(s,{partNumber:m.part.partNo,questionCount:m.part.questions.length,partName:m.part.name||`Part ${m.part.partNo}`})}),n("div",{className:"flex-1 flex justify-end mt-2 z-20",children:n(x,{total:m.part.questions.length,currentIndex:h.nav.currentIndex,answeredIds:k,questionIds:_})})]}),e("div",{className:"flex-1 w-full flex flex-col items-center min-h-0 px-4 pb-6 pt-8",children:[n("div",{className:"flex-1 w-full flex flex-col items-center min-h-0 relative mb-6",children:e("div",{className:"w-full max-w-[850px] relative bg-white/60 backdrop-blur-md rounded-2xl shadow-[0_2px_15px_rgba(0,0,0,0.04)] border border-blue-50 p-8",children:[h.showExistingBadge&&e("div",{className:"absolute right-4 top-0 z-10 rounded-full bg-green-500 px-4 py-1.5 flex items-center gap-2 text-sm font-bold text-white shadow-lg border-2 border-white transform -translate-y-1/2",children:[n("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),n("div",{className:"cue-card-content",dangerouslySetInnerHTML:{__html:v.cueCardHtml},style:{fontSize:"22px",fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif',fontWeight:600,lineHeight:"35px",letterSpacing:"-0.01em",color:"#2C38B6"}})]})}),h.recorder&&!m.isReviewMode&&e("div",{className:"shrink-0 flex flex-col items-center z-50 gap-3",children:[n("div",{className:"bg-white rounded-[100px] shadow-[0_4px_10px_rgba(0,0,0,0.1)] whitespace-nowrap flex items-center justify-center",style:{padding:"10px 30px",color:"recording"===h.recorder.status?"#FF4D4D":["recorded","uploading","uploaded"].includes(h.recorder.status)?"#16CA3B":"#343C55",fontSize:"18px",fontFamily:'"Quicksand", sans-serif',fontWeight:700,lineHeight:"100%",letterSpacing:"-0.01em"},children:"recording"===h.recorder.status?"Ấn lần nữa để lưu kết quả":["recorded","uploading","uploaded"].includes(h.recorder.status)?"Câu trả lời đã được ghi nhận !":"Ấn biểu tượng Micro để trả lời"}),n("div",{className:"relative flex flex-col items-center",children:"recording"===h.recorder.status?e("div",{className:"relative flex flex-col justify-center items-center cursor-pointer drop-shadow-[0_0_15px_rgba(255,100,100,0.8)] transition-transform hover:scale-[1.05] active:scale-[0.95]",onClick:h.recorder.stopRecording,children:[n(l,{src:c,alt:"stop audio",className:"animate-pulse",style:{width:"120px",height:"120px"}}),e("span",{className:"absolute text-white text-[16px] font-bold font-['Quicksand']",style:{bottom:"30px"},children:[Math.floor(h.recorder.remainingSeconds/60),":",(h.recorder.remainingSeconds%60).toString().padStart(2,"0")]})]}):n(l,{src:["recorded","uploading","uploaded"].includes(h.recorder.status)?y?u:p:d,alt:"micro",className:"transition-transform cursor-pointer hover:scale-[1.05] active:scale-[0.95]",style:{width:"120px",height:"120px"},onClick:()=>{if("recording"===h.recorder?.status)h.recorder.stopRecording();else if("idle"===h.recorder?.status||"error"===h.recorder?.status)h.recorder.startRecording();else if("uploaded"===h.recorder?.status||"recorded"===h.recorder?.status){const e=b.current;e&&(y?e.pause():e.play().catch(console.error))}}})}),h.recorder.previewUrl&&n("audio",{ref:b,src:h.recorder.previewUrl})]})]}),n("style",{jsx:!0,global:!0,children:"\n        .cue-card-content p {\n          margin: 0 0 12px 0;\n        }\n        .cue-card-content p:last-child {\n          margin-bottom: 0;\n        }\n        .cue-card-content strong {\n          font-weight: 700;\n          font-size: 24px;\n          color: #1a237e;\n          line-height: 37px;\n        }\n        .cue-card-content ul {\n          margin: 16px 0;\n          padding: 0;\n          list-style: none;\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n        }\n        .cue-card-content ul li {\n          position: relative;\n          padding: 9px 15px 9px 34px;\n          font-size: 19px;\n          line-height: 28px;\n          font-weight: 500;\n          color: #283593;\n          background: rgba(44, 56, 182, 0.06);\n          border-radius: 12px;\n          border-left: 3px solid #5c6bc0;\n        }\n        .cue-card-content ul li::before {\n          content: '';\n          position: absolute;\n          left: 14px;\n          top: 50%;\n          transform: translateY(-50%);\n          width: 8px;\n          height: 8px;\n          border-radius: 50%;\n          background: #5c6bc0;\n        }\n        .cue-card-content ul li p {\n          margin: 0;\n        }\n      "})]})}