@tinyweb_dev/oe-exam-sdk 0.1.2 → 0.1.4

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

@@ -0,0 +1,238 @@
+/* ============================================================
+ * Summer Sky theme — LISTEN_AND_SPEAK_INFO_EXCHANGE
+ * Bright, sky-blue palette matching SummerSkyLayout (ocean-frame).
+ * ============================================================ */
+
+.part2Container {
+  border-radius: 10px;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  overflow: visible;
+  padding: 0 56px 12px; /* keep content inside the ocean-frame curved edges */
+  box-sizing: border-box;
+}
+
+.questionContainer {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  gap: 18px;
+  overflow: visible; /* allow floating pill badges to render outside the cards */
+  padding: 55px 4px 6px; /* top padding leaves room for the floating CANDIDATE'S COPY badge */
+}
+
+/* ===== Image side ===== */
+.imageWrapper {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.imageFrame {
+  width: 100%;
+  height: 100%;
+  border-radius: 18px;
+  background: linear-gradient(180deg, #E3F2FD 0%, #BBDEFB 100%);
+  border: 4px solid #FFFFFF;
+  box-shadow: 0 6px 20px rgba(13, 71, 161, 0.18);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.imageFrame img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 14px;
+}
+
+.recordedBadge {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  border-radius: 9999px;
+  background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
+  color: #fff;
+  font-weight: 700;
+  font-size: 13px;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
+  border: 2px solid #fff;
+}
+
+.recordedBadgeDot {
+  height: 9px;
+  width: 9px;
+  border-radius: 9999px;
+  background: #fff;
+  animation: ssPulse 1.2s infinite ease-in-out;
+}
+
+@keyframes ssPulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.4; }
+}
+
+/* ===== Cards side ===== */
+.infoContainer {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 46%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 14px 8px 8px;
+  scrollbar-color: #1E88E5 transparent;
+}
+
+.infoContainer::-webkit-scrollbar {
+  width: 6px;
+}
+.infoContainer::-webkit-scrollbar-thumb {
+  background: #64B5F6;
+  border-radius: 9999px;
+}
+.infoContainer::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ===== Card ===== */
+.infoItem {
+  position: relative;
+  width: 100%;
+  background: #FFFFFF;
+  border: 2px solid #BFE0FF;
+  border-radius: 20px;
+  box-shadow: 0 4px 12px rgba(30, 90, 180, 0.12);
+  padding-top: 26px;
+  overflow: visible; /* must stay visible so the badge isn't clipped */
+  flex-shrink: 0;
+}
+
+/* Inner wrapper that clips striping rows to the card's rounded corners */
+.infoItemInner {
+  border-radius: 0 0 18px 18px;
+  overflow: hidden;
+}
+
+/* Pill badge floating over the top edge */
+.infoHeader {
+  position: absolute;
+  top: -14px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  background: linear-gradient(180deg, #1E88E5 0%, #1565C0 100%);
+  color: #FFFFFF;
+  text-transform: uppercase;
+  font-weight: 800;
+  font-size: 13px;
+  letter-spacing: 0.06em;
+  padding: 7px 22px;
+  border-radius: 9999px;
+  border: 2px solid #FFFFFF;
+  box-shadow: 0 3px 8px rgba(13, 71, 161, 0.35);
+  white-space: nowrap;
+  font-family: 'Quicksand', 'Open Sans', sans-serif;
+}
+
+.infoName {
+  background: #E3F2FD;
+  color: #0D47A1;
+  font-weight: 800;
+  font-size: 18px;
+  text-align: center;
+  padding: 8px 10px;
+  border-bottom: 1px solid #BFE0FF;
+  font-family: 'Quicksand', 'Open Sans', sans-serif;
+  margin-top: 6px;
+}
+
+.infoDetailItem {
+  display: flex;
+  align-items: stretch;
+  border-top: 1px solid #BFE0FF;
+}
+
+.infoDetailItem:nth-child(even) {
+  background: #F5FBFF;
+}
+
+.infoDetailItem:nth-child(odd) {
+  background: #FFFFFF;
+}
+
+.infoDetailLabel {
+  flex: 1 1 50%;
+  min-width: 0;
+  padding: 10px 14px;
+  text-align: right;
+  font-weight: 700;
+  font-size: 15px;
+  color: #1565C0;
+  word-break: break-word;
+  font-family: 'Quicksand', 'Open Sans', sans-serif;
+}
+
+.infoDetailDivide {
+  width: 1px;
+  background: #BFE0FF;
+}
+
+.infoDetailValue {
+  flex: 1 1 50%;
+  min-width: 0;
+  padding: 10px 14px;
+  text-align: left;
+  font-weight: 700;
+  font-size: 15px;
+  color: #0D47A1;
+  word-break: break-word;
+  font-family: 'Quicksand', 'Open Sans', sans-serif;
+}
+
+.infoDetailValueBlank {
+  color: #90A4AE;
+  font-style: italic;
+  font-weight: 500;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 1400px) {
+  .infoHeader      { font-size: 12px; padding: 6px 18px; top: -14px; }
+  .infoName        { font-size: 16px; padding: 6px 8px; }
+  .infoDetailLabel,
+  .infoDetailValue { font-size: 13px; padding: 7px 10px; }
+  .infoContainer   { gap: 14px; padding-top: 12px; }
+}
+
+@media (max-width: 1024px) {
+  .infoHeader      { font-size: 11px; padding: 5px 14px; }
+  .infoName        { font-size: 14px; padding: 5px 6px; }
+  .infoDetailLabel,
+  .infoDetailValue { font-size: 12px; padding: 5px 8px; }
+}
+
+@media only screen and (max-width: 768px) {
+  .questionContainer { gap: 8px; }
+  .infoHeader        { font-size: 10px; padding: 4px 12px; top: -12px; }
+  .infoName          { font-size: 12px; padding: 4px; }
+  .infoDetailLabel,
+  .infoDetailValue   { font-size: 11px; padding: 4px 6px; }
+}

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

@@ -0,0 +1,5 @@
+interface SpeakingInstructionBarProps {
+    text: string;
+}
+export declare function SpeakingInstructionBar({ text }: SpeakingInstructionBarProps): import("react").JSX.Element;
+export {};

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)}