@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/results/renderers/ReviewListenChooseObjectsRenderer.js

@@ -1 +1,104 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Check as t,X as l}from"lucide-react";import{ResolvedImage as a}from"../../../components/common/ResolvedImage";import i from"../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import{cn as d}from"../../../shared/lib/utils";import{ReviewListeningHeader as s,ListeningLegend as n,getListeningStatus as o}from"./ReviewListeningHeader";function c(e){return"object"==typeof e&&null!==e&&!Array.isArray(e)}function m(e,r){return c(e)&&"string"==typeof e[r]?e[r]:""}export function ReviewListenChooseObjectsRenderer({partNumber:h,questionCount:p,partName:u,questions:b,studentAnswers:g,rawCorrectAnswerMap:f,isCorrectMap:x,questionScoreMap:w}){return r("div",{className:"flex flex-col gap-6 pt-4",children:[e(i,{partNumber:h,questionCount:p,partName:u,isReviewMode:!0}),b.map(i=>{const h=function(e){let r=e?.payload;if("string"==typeof r)try{r=JSON.parse(r)}catch{return{}}if(!c(r))return{};const t=Array.isArray(r.objectNodes)?r.objectNodes.flatMap(e=>c(e)&&"string"==typeof e.id?[{id:e.id,label:"string"==typeof e.label?e.label:"",imageUrl:"string"==typeof e.imageUrl?e.imageUrl:"",x:"number"==typeof e.x?e.x:0,y:"number"==typeof e.y?e.y:0,width:"number"==typeof e.width?e.width:0,height:"number"==typeof e.height?e.height:0}]:[]):[];return{backgroundImageUrl:"string"==typeof r.backgroundImageUrl?r.backgroundImageUrl:void 0,objectNodes:t}}(i.questionGroup),p=h.objectNodes??[],u=h.backgroundImageUrl??"",b=m(i.content,"audioUrl")||m(i.content,"audio"),N=m(g[i.id],"objectId"),y=m(f[i.id],"objectId"),v=x[i.id]??null,j=o(v,!!N),k=w[i.id]??{score:null,maxScore:Number(i.total_points||0)},U=p.find(e=>e.id===y),q=p.find(e=>e.id===N);return r("div",{className:"rounded-2xl border border-slate-100 bg-slate-50/60 p-4 md:p-5",children:[e(s,{questionNumber:i.question_number,typeLabel:"Listen & choose object",status:j,score:k.score,maxScore:k.maxScore,audioKey:b}),e(n,{showCorrect:!0,showStudent:!!N&&!v}),e("div",{className:"mt-3 overflow-hidden rounded-xl border border-slate-200 bg-white",children:r("div",{className:"relative w-full",style:{aspectRatio:"16 / 9"},children:[u?e(a,{src:u,alt:"Scene",className:"absolute inset-0 h-full w-full object-contain",draggable:!1}):e("div",{className:"absolute inset-0 flex items-center justify-center text-sm text-slate-400",children:"No scene image"}),p.map(i=>{const s=i.id===y,n=i.id===N;let o="",c=null,m=i.label;return s&&n?(o="ring-4 ring-emerald-500 shadow-lg shadow-emerald-500/30",m=`${i.label} – Đáp án đúng (bạn đã chọn)`,c=e("span",{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white",children:e(t,{className:"h-3.5 w-3.5",strokeWidth:3})})):s?(o="ring-4 ring-emerald-500 shadow-lg shadow-emerald-500/30",m=`${i.label} – Đáp án đúng`,c=e("span",{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white",children:e(t,{className:"h-3.5 w-3.5",strokeWidth:3})})):n&&(o="ring-4 ring-red-500 shadow-lg shadow-red-500/30",m=`${i.label} – Lựa chọn của bạn (sai)`,c=e("span",{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow ring-2 ring-white",children:e(l,{className:"h-3.5 w-3.5",strokeWidth:3})})),e("div",{className:"absolute",style:{left:`${i.x}%`,top:`${i.y}%`,width:`${i.width}%`,height:`${i.height}%`},"aria-label":m,children:r("div",{className:d("relative h-full w-full rounded-md transition",o,!o&&"rounded-md border border-dashed border-slate-300/80 bg-white/40"),children:[e("div",{className:d("h-full w-full overflow-hidden rounded-md",!o&&"opacity-60"),children:i.imageUrl?e(a,{src:i.imageUrl,alt:i.label,className:"h-full w-full object-contain",draggable:!1}):e("div",{className:"flex h-full w-full items-center justify-center bg-white/60 text-[10px] text-slate-500",children:i.label})}),c]})},i.id)})]})}),r("div","correct"===j?{className:"mt-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-emerald-700",children:"Đáp án đúng"}),e("p",{className:"mt-0.5 text-emerald-800",children:U?.label||y||"—"})]}:"unanswered"===j?{className:"mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2",children:[r("div",{className:"rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-emerald-700",children:"Đáp án đúng"}),e("p",{className:"mt-0.5 text-emerald-800",children:U?.label||y||"—"})]}),r("div",{className:"rounded-lg border border-slate-200 bg-white px-3 py-2",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-slate-500",children:"Đáp án của bạn"}),e("p",{className:"mt-0.5 italic text-slate-500",children:"Bạn chưa trả lời"})]})]}:{className:"mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2",children:[r("div",{className:"rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-emerald-700",children:"Đáp án đúng"}),e("p",{className:"mt-0.5 text-emerald-800",children:U?.label||y||"—"})]}),r("div",{className:"rounded-lg border border-red-200 bg-red-50 px-3 py-2",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-red-700",children:"Đáp án của bạn"}),e("p",{className:"mt-0.5 text-red-800",children:q?.label||N||"—"})]})]})]},i.id)})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ReviewListenChooseObjectsRenderer
+ *
+ * Renders LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE questions in review mode.
+ * For each question we show:
+ *   - Header (number / type badge / status / score / audio)
+ *   - Scene background with object overlays positioned via x/y/width/height (%)
+ *   - The correct object is ringed in emerald
+ *   - The student's pick is ringed in red when incorrect (green when correct)
+ */
+import { Check, X } from 'lucide-react';
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import { cn } from '../../../shared/lib/utils';
+import { ReviewListeningHeader, ListeningLegend, getListeningStatus } from './ReviewListeningHeader';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function readString(value, key) {
+    if (!isRecord(value))
+        return '';
+    return typeof value[key] === 'string' ? value[key] : '';
+}
+function parsePayload(group) {
+    let payload = group?.payload;
+    if (typeof payload === 'string') {
+        try {
+            payload = JSON.parse(payload);
+        }
+        catch {
+            return {};
+        }
+    }
+    if (!isRecord(payload))
+        return {};
+    const objectNodes = Array.isArray(payload.objectNodes)
+        ? payload.objectNodes.flatMap((value) => {
+            if (!isRecord(value) || typeof value.id !== 'string')
+                return [];
+            return [{
+                    id: value.id,
+                    label: typeof value.label === 'string' ? value.label : '',
+                    imageUrl: typeof value.imageUrl === 'string' ? value.imageUrl : '',
+                    x: typeof value.x === 'number' ? value.x : 0,
+                    y: typeof value.y === 'number' ? value.y : 0,
+                    width: typeof value.width === 'number' ? value.width : 0,
+                    height: typeof value.height === 'number' ? value.height : 0,
+                }];
+        })
+        : [];
+    return {
+        backgroundImageUrl: typeof payload.backgroundImageUrl === 'string' ? payload.backgroundImageUrl : undefined,
+        objectNodes,
+    };
+}
+export function ReviewListenChooseObjectsRenderer({ partNumber, questionCount, partName, questions, studentAnswers, rawCorrectAnswerMap, isCorrectMap, questionScoreMap, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-6 pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: true }), questions.map((question) => {
+                const payload = parsePayload(question.questionGroup);
+                const objectNodes = payload.objectNodes ?? [];
+                const backgroundUrl = payload.backgroundImageUrl ?? '';
+                const audioKey = readString(question.content, 'audioUrl') ||
+                    readString(question.content, 'audio');
+                const studentObjectId = readString(studentAnswers[question.id], 'objectId');
+                const correctObjectId = readString(rawCorrectAnswerMap[question.id], 'objectId');
+                const isCorrect = isCorrectMap[question.id] ?? null;
+                const status = getListeningStatus(isCorrect, !!studentObjectId);
+                const scoreInfo = questionScoreMap[question.id] ?? {
+                    score: null,
+                    maxScore: Number(question.total_points || 0),
+                };
+                const correctNode = objectNodes.find((n) => n.id === correctObjectId);
+                const studentNode = objectNodes.find((n) => n.id === studentObjectId);
+                return (_jsxs("div", { className: "rounded-2xl border border-slate-100 bg-slate-50/60 p-4 md:p-5", children: [_jsx(ReviewListeningHeader, { questionNumber: question.question_number, typeLabel: "Listen & choose object", status: status, score: scoreInfo.score, maxScore: scoreInfo.maxScore, audioKey: audioKey }), _jsx(ListeningLegend, { showCorrect: true, showStudent: !!studentObjectId && !isCorrect }), _jsx("div", { className: "mt-3 overflow-hidden rounded-xl border border-slate-200 bg-white", children: _jsxs("div", { className: "relative w-full", style: { aspectRatio: '16 / 9' }, children: [backgroundUrl ? (_jsx(ResolvedImage, { src: backgroundUrl, alt: "Scene", className: "absolute inset-0 h-full w-full object-contain", draggable: false })) : (_jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-slate-400", children: "No scene image" })), objectNodes.map((node) => {
+                                        const isCorrectNode = node.id === correctObjectId;
+                                        const isStudentNode = node.id === studentObjectId;
+                                        let ring = '';
+                                        let badge = null;
+                                        let ariaLabel = node.label;
+                                        if (isCorrectNode && isStudentNode) {
+                                            ring = 'ring-4 ring-emerald-500 shadow-lg shadow-emerald-500/30';
+                                            ariaLabel = `${node.label} – Đáp án đúng (bạn đã chọn)`;
+                                            badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white", children: _jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }));
+                                        }
+                                        else if (isCorrectNode) {
+                                            ring = 'ring-4 ring-emerald-500 shadow-lg shadow-emerald-500/30';
+                                            ariaLabel = `${node.label} – Đáp án đúng`;
+                                            badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white", children: _jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }));
+                                        }
+                                        else if (isStudentNode) {
+                                            ring = 'ring-4 ring-red-500 shadow-lg shadow-red-500/30';
+                                            ariaLabel = `${node.label} – Lựa chọn của bạn (sai)`;
+                                            badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow ring-2 ring-white", children: _jsx(X, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }));
+                                        }
+                                        return (_jsx("div", { className: "absolute", style: {
+                                                left: `${node.x}%`,
+                                                top: `${node.y}%`,
+                                                width: `${node.width}%`,
+                                                height: `${node.height}%`,
+                                            }, "aria-label": ariaLabel, children: _jsxs("div", { className: cn('relative h-full w-full rounded-md transition', ring, !ring && 'rounded-md border border-dashed border-slate-300/80 bg-white/40'), children: [_jsx("div", { className: cn('h-full w-full overflow-hidden rounded-md', !ring && 'opacity-60'), children: node.imageUrl ? (_jsx(ResolvedImage, { src: node.imageUrl, alt: node.label, className: "h-full w-full object-contain", draggable: false })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-white/60 text-[10px] text-slate-500", children: node.label })) }), badge] }) }, node.id));
+                                    })] }) }), status === 'correct' ? (_jsxs("div", { className: "mt-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-emerald-700", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-emerald-800", children: correctNode?.label || correctObjectId || '—' })] })) : status === 'unanswered' ? (_jsxs("div", { className: "mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2", children: [_jsxs("div", { className: "rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-emerald-700", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-emerald-800", children: correctNode?.label || correctObjectId || '—' })] }), _jsxs("div", { className: "rounded-lg border border-slate-200 bg-white px-3 py-2", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-slate-500", children: "\u0110\u00E1p \u00E1n c\u1EE7a b\u1EA1n" }), _jsx("p", { className: "mt-0.5 italic text-slate-500", children: "B\u1EA1n ch\u01B0a tr\u1EA3 l\u1EDDi" })] })] })) : (_jsxs("div", { className: "mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2", children: [_jsxs("div", { className: "rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-emerald-700", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-emerald-800", children: correctNode?.label || correctObjectId || '—' })] }), _jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 px-3 py-2", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-red-700", children: "\u0110\u00E1p \u00E1n c\u1EE7a b\u1EA1n" }), _jsx("p", { className: "mt-0.5 text-red-800", children: studentNode?.label || studentObjectId || '—' })] })] }))] }, question.id));
+            })] }));
+}

package/dist/components/results/renderers/ReviewListenDragObjectsRenderer.js

@@ -1 +1,123 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Check as t,X as a}from"lucide-react";import{ResolvedImage as i}from"../../../components/common/ResolvedImage";import l from"../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import{cn as d}from"../../../shared/lib/utils";import{ReviewListeningHeader as s,ListeningLegend as n,getListeningStatus as o}from"./ReviewListeningHeader";function c(e){return"object"==typeof e&&null!==e&&!Array.isArray(e)}function m(e,r){return c(e)&&"string"==typeof e[r]?e[r]:""}function u({zone:l,studentObject:s,correctObject:n,isStudentZone:o,isCorrectZone:c,isStudentCorrect:m}){let u,b="border-2 border-dashed border-slate-300/80 bg-white/30",p=null;return c&&o?(b=m?"border-2 border-emerald-500 bg-emerald-50/70 ring-2 ring-emerald-400/40":"border-2 border-red-500 bg-red-50/70 ring-2 ring-red-400/40",p=e("span",m?{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white",children:e(t,{className:"h-3.5 w-3.5",strokeWidth:3})}:{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow ring-2 ring-white",children:e(a,{className:"h-3.5 w-3.5",strokeWidth:3})}),u=s):o?(b="border-2 border-red-500 bg-red-50/70 ring-2 ring-red-400/40",p=e("span",{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow ring-2 ring-white",children:e(a,{className:"h-3.5 w-3.5",strokeWidth:3})}),u=s):c&&(b="border-2 border-emerald-500 bg-emerald-50/70 ring-2 ring-emerald-400/40",p=e("span",{className:"absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white",children:e(t,{className:"h-3.5 w-3.5",strokeWidth:3})}),u=n),e("div",{className:"absolute",style:{left:`${l.x}%`,top:`${l.y}%`,width:`${l.width}%`,height:`${l.height}%`},children:r("div",{className:d("relative flex h-full w-full items-center justify-center rounded-md",b),children:[u?.imageUrl?e(i,{src:u.imageUrl,alt:u.label,className:"h-full w-full object-contain p-1",draggable:!1}):e("span",{className:"px-1 text-center text-[10px] font-medium text-slate-500",children:l.label}),p]})})}export function ReviewListenDragObjectsRenderer({partNumber:t,questionCount:a,partName:b,questions:p,studentAnswers:h,rawCorrectAnswerMap:g,isCorrectMap:f,questionScoreMap:x}){return r("div",{className:"flex flex-col gap-6 pt-4",children:[e(l,{partNumber:t,questionCount:a,partName:b,isReviewMode:!0}),p.map(t=>{const a=function(e){let r=e?.payload;if("string"==typeof r)try{r=JSON.parse(r)}catch{return{}}if(!c(r))return{};const t=Array.isArray(r.objectNodes)?r.objectNodes.flatMap(e=>c(e)&&"string"==typeof e.id?[{id:e.id,label:"string"==typeof e.label?e.label:"",imageUrl:"string"==typeof e.imageUrl?e.imageUrl:""}]:[]):[],a=Array.isArray(r.dropZones)?r.dropZones.flatMap(e=>c(e)&&"string"==typeof e.id?[{id:e.id,label:"string"==typeof e.label?e.label:"",x:"number"==typeof e.x?e.x:0,y:"number"==typeof e.y?e.y:0,width:"number"==typeof e.width?e.width:0,height:"number"==typeof e.height?e.height:0}]:[]):[];return{backgroundImageUrl:"string"==typeof r.backgroundImageUrl?r.backgroundImageUrl:void 0,objectNodes:t,dropZones:a}}(t.questionGroup),l=a.objectNodes??[],b=a.dropZones??[],p=a.backgroundImageUrl??"",N=m(t.content,"audioUrl")||m(t.content,"audio"),w=m(h[t.id],"objectId"),y=m(h[t.id],"dropZoneId"),j=m(g[t.id],"objectId"),v=m(g[t.id],"dropZoneId"),k=!!w||!!y,S=f[t.id]??null,C=o(S,k),U=x[t.id]??{score:null,maxScore:Number(t.total_points||0)},Z=l.find(e=>e.id===w),I=l.find(e=>e.id===j),A=b.find(e=>e.id===y),q=b.find(e=>e.id===v);return r("div",{className:"rounded-2xl border border-slate-100 bg-slate-50/60 p-4 md:p-5",children:[e(s,{questionNumber:t.question_number,typeLabel:"Listen & drag object",status:C,score:U.score,maxScore:U.maxScore,audioKey:N}),e(n,{showCorrect:!0,showStudent:k&&!S}),e("div",{className:"mt-3 overflow-hidden rounded-xl border border-slate-200 bg-white",children:r("div",{className:"relative w-full",style:{aspectRatio:"16 / 9"},children:[p?e(i,{src:p,alt:"Scene",className:"absolute inset-0 h-full w-full object-contain",draggable:!1}):e("div",{className:"absolute inset-0 flex items-center justify-center text-sm text-slate-400",children:"No scene image"}),b.map(r=>e(u,{zone:r,studentObject:Z,correctObject:I,isStudentZone:r.id===y,isCorrectZone:r.id===v,isStudentCorrect:!!S},r.id))]})}),r("div","correct"===C?{className:"mt-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-emerald-700",children:"Vị trí đúng"}),r("p",{className:"mt-0.5 text-emerald-800",children:[e("span",{className:"font-medium",children:I?.label||j||"—"}),e("span",{className:"mx-1.5 text-emerald-500",children:"→"}),e("span",{children:q?.label||v||"—"})]})]}:{className:"mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2",children:[r("div",{className:"rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2",children:[e("p",{className:"text-[11px] font-semibold uppercase tracking-wide text-emerald-700",children:"Vị trí đúng"}),r("p",{className:"mt-0.5 text-emerald-800",children:[e("span",{className:"font-medium",children:I?.label||j||"—"}),e("span",{className:"mx-1.5 text-emerald-500",children:"→"}),e("span",{children:q?.label||v||"—"})]})]}),r("div",{className:d("rounded-lg border px-3 py-2","incorrect"===C?"border-red-200 bg-red-50":"border-slate-200 bg-white"),children:[e("p",{className:d("text-[11px] font-semibold uppercase tracking-wide","incorrect"===C?"text-red-700":"text-slate-500"),children:"Vị trí của bạn"}),k?r("p",{className:"mt-0.5 text-red-800",children:[e("span",{className:"font-medium",children:Z?.label||w||"—"}),e("span",{className:"mx-1.5 text-red-500",children:"→"}),e("span",{children:A?.label||y||"—"})]}):e("p",{className:"mt-0.5 italic text-slate-500",children:"Bạn chưa trả lời"})]})]})]},t.id)})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ReviewListenDragObjectsRenderer
+ *
+ * Renders LISTEN_AND_DRAG_OBJECTS_INTO_SCENE questions in review mode.
+ * Shows the scene background with drop zones outlined, and visualises:
+ *   - The correct object placed in the correct drop zone (emerald)
+ *   - The student's placement (red if incorrect, green if correct)
+ *   - A summary table showing object → drop zone for both student and correct.
+ */
+import { Check, X } from 'lucide-react';
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import { cn } from '../../../shared/lib/utils';
+import { ReviewListeningHeader, ListeningLegend, getListeningStatus } from './ReviewListeningHeader';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function readString(value, key) {
+    if (!isRecord(value))
+        return '';
+    return typeof value[key] === 'string' ? value[key] : '';
+}
+function parsePayload(group) {
+    let payload = group?.payload;
+    if (typeof payload === 'string') {
+        try {
+            payload = JSON.parse(payload);
+        }
+        catch {
+            return {};
+        }
+    }
+    if (!isRecord(payload))
+        return {};
+    const objectNodes = Array.isArray(payload.objectNodes)
+        ? payload.objectNodes.flatMap((value) => {
+            if (!isRecord(value) || typeof value.id !== 'string')
+                return [];
+            return [{
+                    id: value.id,
+                    label: typeof value.label === 'string' ? value.label : '',
+                    imageUrl: typeof value.imageUrl === 'string' ? value.imageUrl : '',
+                }];
+        })
+        : [];
+    const dropZones = Array.isArray(payload.dropZones)
+        ? payload.dropZones.flatMap((value) => {
+            if (!isRecord(value) || typeof value.id !== 'string')
+                return [];
+            return [{
+                    id: value.id,
+                    label: typeof value.label === 'string' ? value.label : '',
+                    x: typeof value.x === 'number' ? value.x : 0,
+                    y: typeof value.y === 'number' ? value.y : 0,
+                    width: typeof value.width === 'number' ? value.width : 0,
+                    height: typeof value.height === 'number' ? value.height : 0,
+                }];
+        })
+        : [];
+    return {
+        backgroundImageUrl: typeof payload.backgroundImageUrl === 'string' ? payload.backgroundImageUrl : undefined,
+        objectNodes,
+        dropZones,
+    };
+}
+function DropZoneOverlay({ zone, studentObject, correctObject, isStudentZone, isCorrectZone, isStudentCorrect, }) {
+    let frame = 'border-2 border-dashed border-slate-300/80 bg-white/30';
+    let badge = null;
+    let displayObject;
+    if (isCorrectZone && isStudentZone) {
+        frame = isStudentCorrect
+            ? 'border-2 border-emerald-500 bg-emerald-50/70 ring-2 ring-emerald-400/40'
+            : 'border-2 border-red-500 bg-red-50/70 ring-2 ring-red-400/40';
+        badge = isStudentCorrect ? (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white", children: _jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 3 }) })) : (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow ring-2 ring-white", children: _jsx(X, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }));
+        displayObject = studentObject;
+    }
+    else if (isStudentZone) {
+        frame = 'border-2 border-red-500 bg-red-50/70 ring-2 ring-red-400/40';
+        badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-white shadow ring-2 ring-white", children: _jsx(X, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }));
+        displayObject = studentObject;
+    }
+    else if (isCorrectZone) {
+        frame = 'border-2 border-emerald-500 bg-emerald-50/70 ring-2 ring-emerald-400/40';
+        badge = (_jsx("span", { className: "absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 text-white shadow ring-2 ring-white", children: _jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 3 }) }));
+        displayObject = correctObject;
+    }
+    return (_jsx("div", { className: "absolute", style: {
+            left: `${zone.x}%`,
+            top: `${zone.y}%`,
+            width: `${zone.width}%`,
+            height: `${zone.height}%`,
+        }, children: _jsxs("div", { className: cn('relative flex h-full w-full items-center justify-center rounded-md', frame), children: [displayObject?.imageUrl ? (_jsx(ResolvedImage, { src: displayObject.imageUrl, alt: displayObject.label, className: "h-full w-full object-contain p-1", draggable: false })) : (_jsx("span", { className: "px-1 text-center text-[10px] font-medium text-slate-500", children: zone.label })), badge] }) }));
+}
+export function ReviewListenDragObjectsRenderer({ partNumber, questionCount, partName, questions, studentAnswers, rawCorrectAnswerMap, isCorrectMap, questionScoreMap, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-6 pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: true }), questions.map((question) => {
+                const payload = parsePayload(question.questionGroup);
+                const objectNodes = payload.objectNodes ?? [];
+                const dropZones = payload.dropZones ?? [];
+                const backgroundUrl = payload.backgroundImageUrl ?? '';
+                const audioKey = readString(question.content, 'audioUrl') ||
+                    readString(question.content, 'audio');
+                const studentObjectId = readString(studentAnswers[question.id], 'objectId');
+                const studentZoneId = readString(studentAnswers[question.id], 'dropZoneId');
+                const correctObjectId = readString(rawCorrectAnswerMap[question.id], 'objectId');
+                const correctZoneId = readString(rawCorrectAnswerMap[question.id], 'dropZoneId');
+                const hasAnswered = !!studentObjectId || !!studentZoneId;
+                const isCorrect = isCorrectMap[question.id] ?? null;
+                const status = getListeningStatus(isCorrect, hasAnswered);
+                const scoreInfo = questionScoreMap[question.id] ?? {
+                    score: null,
+                    maxScore: Number(question.total_points || 0),
+                };
+                const studentObject = objectNodes.find((o) => o.id === studentObjectId);
+                const correctObject = objectNodes.find((o) => o.id === correctObjectId);
+                const studentZone = dropZones.find((z) => z.id === studentZoneId);
+                const correctZone = dropZones.find((z) => z.id === correctZoneId);
+                return (_jsxs("div", { className: "rounded-2xl border border-slate-100 bg-slate-50/60 p-4 md:p-5", children: [_jsx(ReviewListeningHeader, { questionNumber: question.question_number, typeLabel: "Listen & drag object", status: status, score: scoreInfo.score, maxScore: scoreInfo.maxScore, audioKey: audioKey }), _jsx(ListeningLegend, { showCorrect: true, showStudent: hasAnswered && !isCorrect }), _jsx("div", { className: "mt-3 overflow-hidden rounded-xl border border-slate-200 bg-white", children: _jsxs("div", { className: "relative w-full", style: { aspectRatio: '16 / 9' }, children: [backgroundUrl ? (_jsx(ResolvedImage, { src: backgroundUrl, alt: "Scene", className: "absolute inset-0 h-full w-full object-contain", draggable: false })) : (_jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-slate-400", children: "No scene image" })), dropZones.map((zone) => (_jsx(DropZoneOverlay, { zone: zone, studentObject: studentObject, correctObject: correctObject, isStudentZone: zone.id === studentZoneId, isCorrectZone: zone.id === correctZoneId, isStudentCorrect: !!isCorrect }, zone.id)))] }) }), status === 'correct' ? (_jsxs("div", { className: "mt-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-emerald-700", children: "V\u1ECB tr\u00ED \u0111\u00FAng" }), _jsxs("p", { className: "mt-0.5 text-emerald-800", children: [_jsx("span", { className: "font-medium", children: correctObject?.label || correctObjectId || '—' }), _jsx("span", { className: "mx-1.5 text-emerald-500", children: "\u2192" }), _jsx("span", { children: correctZone?.label || correctZoneId || '—' })] })] })) : (_jsxs("div", { className: "mt-3 grid grid-cols-1 gap-2 text-sm sm:grid-cols-2", children: [_jsxs("div", { className: "rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2", children: [_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-wide text-emerald-700", children: "V\u1ECB tr\u00ED \u0111\u00FAng" }), _jsxs("p", { className: "mt-0.5 text-emerald-800", children: [_jsx("span", { className: "font-medium", children: correctObject?.label || correctObjectId || '—' }), _jsx("span", { className: "mx-1.5 text-emerald-500", children: "\u2192" }), _jsx("span", { children: correctZone?.label || correctZoneId || '—' })] })] }), _jsxs("div", { className: cn('rounded-lg border px-3 py-2', status === 'incorrect'
+                                        ? 'border-red-200 bg-red-50'
+                                        : 'border-slate-200 bg-white'), children: [_jsx("p", { className: cn('text-[11px] font-semibold uppercase tracking-wide', status === 'incorrect' ? 'text-red-700' : 'text-slate-500'), children: "V\u1ECB tr\u00ED c\u1EE7a b\u1EA1n" }), hasAnswered ? (_jsxs("p", { className: "mt-0.5 text-red-800", children: [_jsx("span", { className: "font-medium", children: studentObject?.label || studentObjectId || '—' }), _jsx("span", { className: "mx-1.5 text-red-500", children: "\u2192" }), _jsx("span", { children: studentZone?.label || studentZoneId || '—' })] })) : (_jsx("p", { className: "mt-0.5 italic text-slate-500", children: "B\u1EA1n ch\u01B0a tr\u1EA3 l\u1EDDi" }))] })] }))] }, question.id));
+            })] }));
+}

package/dist/components/results/renderers/ReviewListeningHeader.js

@@ -1 +1,104 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Check as r,Volume2 as n,X as a,Pause as s,Play as l}from"lucide-react";import{useCallback as i,useEffect as d,useRef as c,useState as o}from"react";import{Badge as u}from"../../../components/ui/badge";import{cn as m}from"../../../shared/lib/utils";import{usePresignedFileUrl as x}from"../../../shared/lib/hooks/usePresignedFileUrl";export function getListeningStatus(e,t){return t?!0===e?"correct":!1===e?"incorrect":"unanswered":"unanswered"}export function ListeningStatusBadge({status:n}){return t("span","correct"===n?{className:"inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700",children:[e("span",{className:"flex h-4 w-4 items-center justify-center rounded-full bg-emerald-500",children:e(r,{className:"h-2.5 w-2.5 text-white",strokeWidth:3})}),"Đúng"]}:"incorrect"===n?{className:"inline-flex items-center gap-1 rounded-full border border-red-200 bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-700",children:[e("span",{className:"flex h-4 w-4 items-center justify-center rounded-full bg-red-500",children:e(a,{className:"h-2.5 w-2.5 text-white",strokeWidth:3})}),"Sai"]}:{className:"inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-xs font-semibold text-slate-600",children:[e("span",{className:"flex h-4 w-4 items-center justify-center rounded-full bg-slate-400",children:e(a,{className:"h-2.5 w-2.5 text-white",strokeWidth:3})}),"Chưa trả lời"]})}export function ListeningScorePill({score:r,maxScore:n,status:a}){const s=null==r?"—":r;return t("div",{className:m("flex flex-shrink-0 items-baseline gap-1 rounded-full border px-3 py-1","correct"===a?"border-emerald-200 bg-emerald-50 text-emerald-700":"incorrect"===a?"border-red-200 bg-red-50 text-red-700":"border-slate-200 bg-slate-50 text-slate-600"),children:[e("span",{className:"text-sm font-bold leading-none",children:s}),t("span",{className:"text-xs font-medium opacity-80",children:["/ ",n," điểm"]})]})}function h(e){if(!isFinite(e))return"0:00";return`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`}export function ListeningAudioBar({audioKey:r}){const{previewUrl:a}=x(r),u=c(null),[m,p]=o(!1),[f,b]=o(0),[g,w]=o(0),N=i(()=>{const e=u.current;e&&(m?e.pause():e.play().catch(e=>{console.warn("Audio play request was interrupted:",e)}))},[m]),y=i(e=>{const t=u.current;if(!t)return;const r=Number(e.target.value);t.currentTime=r,b(r)},[]);return d(()=>{p(!1),b(0)},[a]),t("div",{className:"flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-3 py-2",children:[a&&e("audio",{ref:u,src:a,onPlay:()=>p(!0),onPause:()=>p(!1),onEnded:()=>p(!1),onTimeUpdate:e=>b(e.currentTarget.currentTime),onLoadedMetadata:e=>w(e.currentTarget.duration),preload:"metadata"}),e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-50 text-blue-600",children:e(n,{className:"h-4 w-4"})}),e("button",{type:"button",onClick:N,disabled:!a,className:"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-white shadow-sm transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-40","aria-label":m?"Tạm dừng":"Phát âm thanh câu hỏi",children:m?e(s,{className:"h-4 w-4"}):e(l,{className:"ml-0.5 h-4 w-4"})}),e("span",{className:"w-10 text-xs tabular-nums text-slate-500",children:h(f)}),e("input",{type:"range",min:0,max:g||0,step:.01,value:f,onChange:y,className:"h-1 flex-1 cursor-pointer appearance-none rounded-full bg-slate-200 accent-blue-600","aria-label":"Tua âm thanh"}),e("span",{className:"w-10 text-right text-xs tabular-nums text-slate-500",children:h(g)})]})}export function ReviewListeningHeader({questionNumber:r,typeLabel:n,status:a,score:s,maxScore:l,audioKey:i,title:d,rightExtra:c}){return t("div",{className:"mb-3 space-y-3",children:[t("div",{className:"flex items-start gap-3",children:[e("span",{className:"mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white",children:r}),t("div",{className:"min-w-0 flex-1",children:[t("div",{className:"flex flex-wrap items-center gap-2",children:[e(u,{variant:"secondary",className:"bg-slate-100 text-slate-700 hover:bg-slate-100",children:n}),e(ListeningStatusBadge,{status:a}),c]}),d?e("p",{className:"mt-1.5 text-sm font-medium text-slate-700",children:d}):null]}),e(ListeningScorePill,{score:s,maxScore:l,status:a})]}),i?e(ListeningAudioBar,{audioKey:i}):null]})}export function ListeningLegend({showCorrect:r=!0,showStudent:n=!0}){return r||n?t("div",{className:"flex flex-wrap items-center gap-3 text-xs text-slate-600",children:[r?t("span",{className:"inline-flex items-center gap-1.5",children:[e("span",{className:"inline-block h-3 w-3 rounded-full border-2 border-emerald-500 bg-emerald-50"}),"Đáp án đúng"]}):null,n?t("span",{className:"inline-flex items-center gap-1.5",children:[e("span",{className:"inline-block h-3 w-3 rounded-full border-2 border-red-500 bg-red-50"}),"Đáp án của bạn"]}):null]}):null}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ReviewListeningHeader
+ *
+ * Shared per-question header for the three listening question reviewers:
+ *   - LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE
+ *   - LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP
+ *   - LISTEN_AND_DRAG_OBJECTS_INTO_SCENE
+ *
+ * Renders question number, type badge, textual+icon correctness label, score
+ * pill, a compact audio prompt bar (speaker icon, no recording chrome) and a
+ * legend for the visualization (Correct / Your answer).
+ */
+import { Check, Volume2, X, Pause, Play } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Badge } from '../../../components/ui/badge';
+import { cn } from '../../../shared/lib/utils';
+import { usePresignedFileUrl } from '../../../shared/lib/hooks/usePresignedFileUrl';
+export function getListeningStatus(isCorrect, hasStudentAnswer) {
+    if (!hasStudentAnswer)
+        return 'unanswered';
+    if (isCorrect === true)
+        return 'correct';
+    if (isCorrect === false)
+        return 'incorrect';
+    return 'unanswered';
+}
+/**
+ * Combined icon + textual correctness badge. Provides redundancy beyond colour
+ * for accessibility / quick scanning.
+ */
+export function ListeningStatusBadge({ status }) {
+    if (status === 'correct') {
+        return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700", children: [_jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-emerald-500", children: _jsx(Check, { className: "h-2.5 w-2.5 text-white", strokeWidth: 3 }) }), "\u0110\u00FAng"] }));
+    }
+    if (status === 'incorrect') {
+        return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-red-200 bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-700", children: [_jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-red-500", children: _jsx(X, { className: "h-2.5 w-2.5 text-white", strokeWidth: 3 }) }), "Sai"] }));
+    }
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-xs font-semibold text-slate-600", children: [_jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-slate-400", children: _jsx(X, { className: "h-2.5 w-2.5 text-white", strokeWidth: 3 }) }), "Ch\u01B0a tr\u1EA3 l\u1EDDi"] }));
+}
+export function ListeningScorePill({ score, maxScore, status }) {
+    const tone = status === 'correct'
+        ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
+        : status === 'incorrect'
+            ? 'border-red-200 bg-red-50 text-red-700'
+            : 'border-slate-200 bg-slate-50 text-slate-600';
+    const display = score === null || score === undefined ? '—' : score;
+    return (_jsxs("div", { className: cn('flex flex-shrink-0 items-baseline gap-1 rounded-full border px-3 py-1', tone), children: [_jsx("span", { className: "text-sm font-bold leading-none", children: display }), _jsxs("span", { className: "text-xs font-medium opacity-80", children: ["/ ", maxScore, " \u0111i\u1EC3m"] })] }));
+}
+function formatTime(s) {
+    if (!isFinite(s))
+        return '0:00';
+    const m = Math.floor(s / 60);
+    const sec = Math.floor(s % 60).toString().padStart(2, '0');
+    return `${m}:${sec}`;
+}
+/**
+ * Minimal audio bar tailored for listening prompts in review mode.
+ * Uses a speaker icon (not a microphone) so it reads as "audio to listen to",
+ * not "your recording".
+ */
+export function ListeningAudioBar({ audioKey }) {
+    const { previewUrl } = usePresignedFileUrl(audioKey);
+    const audioRef = useRef(null);
+    const [isPlaying, setPlaying] = useState(false);
+    const [time, setTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const toggle = useCallback(() => {
+        const el = audioRef.current;
+        if (!el)
+            return;
+        if (isPlaying) {
+            el.pause();
+        }
+        else {
+            el.play().catch((err) => {
+                console.warn('Audio play request was interrupted:', err);
+            });
+        }
+    }, [isPlaying]);
+    const seek = useCallback((e) => {
+        const el = audioRef.current;
+        if (!el)
+            return;
+        const v = Number(e.target.value);
+        el.currentTime = v;
+        setTime(v);
+    }, []);
+    useEffect(() => {
+        setPlaying(false);
+        setTime(0);
+    }, [previewUrl]);
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-3 py-2", children: [previewUrl && (_jsx("audio", { ref: audioRef, src: previewUrl, onPlay: () => setPlaying(true), onPause: () => setPlaying(false), onEnded: () => setPlaying(false), onTimeUpdate: (e) => setTime(e.currentTarget.currentTime), onLoadedMetadata: (e) => setDuration(e.currentTarget.duration), preload: "metadata" })), _jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-50 text-blue-600", children: _jsx(Volume2, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: toggle, disabled: !previewUrl, className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-white shadow-sm transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-40", "aria-label": isPlaying ? 'Tạm dừng' : 'Phát âm thanh câu hỏi', children: isPlaying ? _jsx(Pause, { className: "h-4 w-4" }) : _jsx(Play, { className: "ml-0.5 h-4 w-4" }) }), _jsx("span", { className: "w-10 text-xs tabular-nums text-slate-500", children: formatTime(time) }), _jsx("input", { type: "range", min: 0, max: duration || 0, step: 0.01, value: time, onChange: seek, className: "h-1 flex-1 cursor-pointer appearance-none rounded-full bg-slate-200 accent-blue-600", "aria-label": "Tua \u00E2m thanh" }), _jsx("span", { className: "w-10 text-right text-xs tabular-nums text-slate-500", children: formatTime(duration) })] }));
+}
+export function ReviewListeningHeader({ questionNumber, typeLabel, status, score, maxScore, audioKey, title, rightExtra, }) {
+    return (_jsxs("div", { className: "mb-3 space-y-3", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: "mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white", children: questionNumber }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { variant: "secondary", className: "bg-slate-100 text-slate-700 hover:bg-slate-100", children: typeLabel }), _jsx(ListeningStatusBadge, { status: status }), rightExtra] }), title ? (_jsx("p", { className: "mt-1.5 text-sm font-medium text-slate-700", children: title })) : null] }), _jsx(ListeningScorePill, { score: score, maxScore: maxScore, status: status })] }), audioKey ? _jsx(ListeningAudioBar, { audioKey: audioKey }) : null] }));
+}
+/** Small legend chip rendered above the visualization. Shown only when relevant. */
+export function ListeningLegend({ showCorrect = true, showStudent = true, }) {
+    if (!showCorrect && !showStudent)
+        return null;
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-3 text-xs text-slate-600", children: [showCorrect ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "inline-block h-3 w-3 rounded-full border-2 border-emerald-500 bg-emerald-50" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] })) : null, showStudent ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "inline-block h-3 w-3 rounded-full border-2 border-red-500 bg-red-50" }), "\u0110\u00E1p \u00E1n c\u1EE7a b\u1EA1n"] })) : null] }));
+}

package/dist/components/results/renderers/ReviewSpeakingAIPanel.js

@@ -1 +1,116 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Activity as t,Award as a,Bot as r,Brain as s,MessageSquare as n,TrendingUp as c}from"lucide-react";import{cn as d}from"../../../shared/lib/utils";export function ReviewSpeakingAIPanel({question:t}){if(!t.studentAudioKey)return null;return null!=t.pronunciationScore||null!=t.accuracyScore||null!=t.fluencyScore||null!=t.prosodyScore||null!=t.completenessScore||!!t.recognizedText||null!=t.contentScore||t.feedbackEn?l("div",{className:"space-y-4",children:[t.classificationTitle?e(i,{title:t.classificationTitle,tag:t.classificationTag}):null,l("div",{className:"grid grid-cols-1 gap-4 lg:grid-cols-2",children:[e(o,{question:t}),null!=t.contentScore||t.feedbackEn?e(x,{contentScore:t.contentScore,feedback:t.feedbackEn}):e(m,{})]})]}):null}function i({title:t,tag:r}){const s={Platinum:{bg:"bg-slate-50 border-slate-200",text:"text-slate-800",iconBg:"bg-slate-200/60"},Gold:{bg:"bg-amber-50/60 border-amber-200/60",text:"text-amber-800",iconBg:"bg-amber-100"},Silver:{bg:"bg-gray-50 border-gray-200",text:"text-gray-700",iconBg:"bg-gray-200"},Bronze:{bg:"bg-orange-50/60 border-orange-200/60",text:"text-orange-800",iconBg:"bg-orange-100"}}[t]??{bg:"bg-blue-50/60 border-blue-100",text:"text-blue-800",iconBg:"bg-blue-100/60"};return l("div",{className:d("flex items-center gap-3 rounded-xl border px-4 py-2.5",s.bg),children:[e("div",{className:d("flex h-8 w-8 items-center justify-center rounded-full",s.iconBg),children:e(a,{className:d("h-4 w-4",s.text)})}),e("div",{className:"flex-1",children:l("div",{className:"flex items-center gap-2",children:[e("span",{className:d("text-sm font-black",s.text),children:t}),r?e("span",{className:"rounded-[4px] border border-gray-100/60 bg-white/70 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-gray-600 shadow-sm",children:r}):null]})}),e("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-gray-400",children:"Phân loại năng lực"})]})}function o({question:a}){const r=[{label:"Phát âm",sublabel:"Pronunciation",score:a.pronunciationScore},{label:"Lưu loát",sublabel:"Fluency",score:a.fluencyScore},{label:"Ngữ điệu",sublabel:"Prosody",score:a.prosodyScore},{label:"Trọn vẹn",sublabel:"Completeness",score:a.completenessScore},{label:"Chính xác",sublabel:"Accuracy",score:a.accuracyScore}];return l("div",{className:"flex flex-col rounded-2xl border border-slate-200 bg-slate-50/60 shadow-[0_2px_8px_rgba(15,23,42,0.03)]",children:[l("div",{className:"flex items-center gap-3 px-4 py-3",children:[e(t,{className:"h-5 w-5 text-blue-600"}),e("h4",{className:"text-sm font-black tracking-wide text-slate-800",children:"Phân tích Khẩu hình"})]}),l("div",{className:"mx-4 mb-4 rounded-xl border border-slate-200 bg-white p-3.5 shadow-sm",children:[e("p",{className:"mb-1 text-[9px] font-bold uppercase tracking-wider text-blue-500",children:"AI Transcribed"}),l("p",{className:"text-sm font-medium italic leading-relaxed text-slate-800",children:["“",a.recognizedText||"Không rõ chữ / Không thể phiên âm","”"]})]}),e("div",{className:"grid grid-cols-2 gap-3 px-4 pb-4",children:r.map(l=>e(b,{...l},l.sublabel))})]})}function b({label:t,score:a}){const r=null!=a?Math.round(a):null,s=null==r?{text:"text-slate-400",bar:"bg-slate-200",bg:"bg-white border-slate-100"}:r>=80?{text:"text-emerald-600",bar:"bg-emerald-500",bg:"bg-emerald-50/50 border-emerald-100"}:r>=50?{text:"text-amber-600",bar:"bg-amber-400",bg:"bg-amber-50/50 border-amber-100"}:{text:"text-rose-600",bar:"bg-rose-400",bg:"bg-rose-50/50 border-rose-100"};return l("div",{className:d("flex flex-col gap-2 rounded-[14px] border p-3 shadow-[0_2px_10px_rgba(15,23,42,0.03)]",s.bg),children:[l("div",{className:"flex items-center justify-between",children:[e("span",{className:"text-xs font-black text-slate-700",children:t}),e("span",{className:d("text-lg font-black tracking-tight",s.text),children:null!=r?r:"N/A"})]}),e("div",{className:"h-1.5 w-full overflow-hidden rounded-full bg-slate-100",children:e("div",{className:d("h-full rounded-full transition-all duration-700 ease-out",s.bar),style:{width:`${Math.max(0,Math.min(100,r??0))}%`}})})]})}function x({contentScore:t,feedback:a}){return l("div",{className:"flex h-full flex-col rounded-2xl border border-slate-200 bg-slate-50/60 shadow-[0_2px_8px_rgba(15,23,42,0.03)]",children:[l("div",{className:"flex shrink-0 items-center gap-3 px-4 py-3",children:[e(s,{className:"h-5 w-5 text-blue-600"}),e("h4",{className:"text-sm font-black tracking-wide text-slate-800",children:"Phân tích Nội dung"})]}),null!=t?e("div",{className:"flex flex-col gap-3 px-4 pb-3",children:e(u,{label:"Phân tích Nội dung (LLM)",score:t,icon:e(c,{className:"h-3.5 w-3.5 text-blue-500"})})}):null,a?l("div",{className:"mx-4 mb-4 flex flex-1 flex-col rounded-xl border border-slate-200 border-l-[6px] border-l-blue-500 bg-white p-4 shadow-sm",children:[l("div",{className:"mb-2 flex shrink-0 items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-full bg-blue-50 text-blue-600",children:e(r,{className:"h-4 w-4"})}),e("span",{className:"text-xs font-black uppercase tracking-wider text-blue-600",children:"Nhận xét AI"})]}),e("div",{className:"flex-1 overflow-y-auto pr-1",children:e("p",{className:"text-[15px] font-medium leading-relaxed text-slate-700",children:a})})]}):null]})}function u({label:t,score:a,icon:r}){const s=Math.round(a),n=s>=80?{bar:"bg-emerald-500",text:"text-emerald-600"}:s>=50?{bar:"bg-amber-400",text:"text-amber-600"}:{bar:"bg-rose-400",text:"text-rose-600"};return l("div",{className:"flex flex-col gap-1.5 rounded-xl border border-slate-200 bg-white p-2.5 shadow-sm",children:[l("div",{className:"flex items-center justify-between",children:[l("div",{className:"flex items-center gap-1.5",children:[e("span",{className:d("opacity-70",n.text),children:r}),e("span",{className:"text-xs font-bold text-slate-700",children:t})]}),e("span",{className:d("text-xs font-black",n.text),children:s})]}),e("div",{className:"h-1 w-full overflow-hidden rounded-full bg-slate-100",children:e("div",{className:d("h-full rounded-full transition-all duration-1000 ease-out",n.bar),style:{width:`${Math.max(0,Math.min(100,a))}%`}})})]})}function m(){return l("div",{className:"flex flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-200 bg-slate-50/60 p-6 text-center",children:[e(n,{className:"h-5 w-5 text-slate-300"}),l("div",{children:[e("p",{className:"text-sm font-semibold text-slate-500",children:"Không chấm nội dung"}),e("p",{className:"mt-0.5 text-xs text-slate-400",children:"Dạng câu hỏi có kịch bản mẫu"})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, Award, Bot, Brain, MessageSquare, TrendingUp } from 'lucide-react';
+import { cn } from '../../../shared/lib/utils';
+/**
+ * AI review panel for the /student/results/:attemptId/review page.
+ *
+ * Layout mirrors SpeakingAIAssessmentPanel (speaking-review page) but uses the
+ * slate / blue-500 / emerald / amber / rose palette of the existing review page
+ * (instead of the #2874A6 tone used on speaking-review).
+ *
+ * Only renders for questions with a student audio recording. If there's no
+ * content score / feedback the right-hand card falls back to a neutral
+ * placeholder.
+ */
+export function ReviewSpeakingAIPanel({ question }) {
+    // No recording → nothing to analyse, skip entire panel.
+    if (!question.studentAudioKey)
+        return null;
+    const hasAnyPronunciationScore = question.pronunciationScore != null ||
+        question.accuracyScore != null ||
+        question.fluencyScore != null ||
+        question.prosodyScore != null ||
+        question.completenessScore != null ||
+        !!question.recognizedText;
+    if (!hasAnyPronunciationScore && question.contentScore == null && !question.feedbackEn) {
+        return null;
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [question.classificationTitle ? (_jsx(ClassificationBanner, { title: question.classificationTitle, tag: question.classificationTag })) : null, _jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [_jsx(PronunciationCard, { question: question }), question.contentScore != null || question.feedbackEn ? (_jsx(GrammarContentCard, { contentScore: question.contentScore, feedback: question.feedbackEn })) : (_jsx(NoGrammarPlaceholder, {}))] })] }));
+}
+/* ─── Classification banner ──────────────────────────────────────────────── */
+function ClassificationBanner({ title, tag }) {
+    const tierStyles = {
+        Platinum: {
+            bg: 'bg-slate-50 border-slate-200',
+            text: 'text-slate-800',
+            iconBg: 'bg-slate-200/60',
+        },
+        Gold: {
+            bg: 'bg-amber-50/60 border-amber-200/60',
+            text: 'text-amber-800',
+            iconBg: 'bg-amber-100',
+        },
+        Silver: {
+            bg: 'bg-gray-50 border-gray-200',
+            text: 'text-gray-700',
+            iconBg: 'bg-gray-200',
+        },
+        Bronze: {
+            bg: 'bg-orange-50/60 border-orange-200/60',
+            text: 'text-orange-800',
+            iconBg: 'bg-orange-100',
+        },
+    };
+    const style = tierStyles[title] ?? {
+        bg: 'bg-blue-50/60 border-blue-100',
+        text: 'text-blue-800',
+        iconBg: 'bg-blue-100/60',
+    };
+    return (_jsxs("div", { className: cn('flex items-center gap-3 rounded-xl border px-4 py-2.5', style.bg), children: [_jsx("div", { className: cn('flex h-8 w-8 items-center justify-center rounded-full', style.iconBg), children: _jsx(Award, { className: cn('h-4 w-4', style.text) }) }), _jsx("div", { className: "flex-1", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn('text-sm font-black', style.text), children: title }), tag ? (_jsx("span", { className: "rounded-[4px] border border-gray-100/60 bg-white/70 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-gray-600 shadow-sm", children: tag })) : null] }) }), _jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Ph\u00E2n lo\u1EA1i n\u0103ng l\u1EF1c" })] }));
+}
+/* ─── Pronunciation card (left) ──────────────────────────────────────────── */
+function PronunciationCard({ question }) {
+    const metrics = [
+        { label: 'Phát âm', sublabel: 'Pronunciation', score: question.pronunciationScore },
+        { label: 'Lưu loát', sublabel: 'Fluency', score: question.fluencyScore },
+        { label: 'Ngữ điệu', sublabel: 'Prosody', score: question.prosodyScore },
+        { label: 'Trọn vẹn', sublabel: 'Completeness', score: question.completenessScore },
+        { label: 'Chính xác', sublabel: 'Accuracy', score: question.accuracyScore },
+    ];
+    return (_jsxs("div", { className: "flex flex-col rounded-2xl border border-slate-200 bg-slate-50/60 shadow-[0_2px_8px_rgba(15,23,42,0.03)]", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [_jsx(Activity, { className: "h-5 w-5 text-blue-600" }), _jsx("h4", { className: "text-sm font-black tracking-wide text-slate-800", children: "Ph\u00E2n t\u00EDch Kh\u1EA9u h\u00ECnh" })] }), _jsxs("div", { className: "mx-4 mb-4 rounded-xl border border-slate-200 bg-white p-3.5 shadow-sm", children: [_jsx("p", { className: "mb-1 text-[9px] font-bold uppercase tracking-wider text-blue-500", children: "AI Transcribed" }), _jsxs("p", { className: "text-sm font-medium italic leading-relaxed text-slate-800", children: ["\u201C", question.recognizedText || 'Không rõ chữ / Không thể phiên âm', "\u201D"] })] }), _jsx("div", { className: "grid grid-cols-2 gap-3 px-4 pb-4", children: metrics.map((metric) => (_jsx(ScoreMetricCard, { ...metric }, metric.sublabel))) })] }));
+}
+function ScoreMetricCard({ label, score, }) {
+    const safeScore = score != null ? Math.round(score) : null;
+    const tone = safeScore == null
+        ? {
+            text: 'text-slate-400',
+            bar: 'bg-slate-200',
+            bg: 'bg-white border-slate-100',
+        }
+        : safeScore >= 80
+            ? {
+                text: 'text-emerald-600',
+                bar: 'bg-emerald-500',
+                bg: 'bg-emerald-50/50 border-emerald-100',
+            }
+            : safeScore >= 50
+                ? {
+                    text: 'text-amber-600',
+                    bar: 'bg-amber-400',
+                    bg: 'bg-amber-50/50 border-amber-100',
+                }
+                : {
+                    text: 'text-rose-600',
+                    bar: 'bg-rose-400',
+                    bg: 'bg-rose-50/50 border-rose-100',
+                };
+    return (_jsxs("div", { className: cn('flex flex-col gap-2 rounded-[14px] border p-3 shadow-[0_2px_10px_rgba(15,23,42,0.03)]', tone.bg), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-black text-slate-700", children: label }), _jsx("span", { className: cn('text-lg font-black tracking-tight', tone.text), children: safeScore != null ? safeScore : 'N/A' })] }), _jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-slate-100", children: _jsx("div", { className: cn('h-full rounded-full transition-all duration-700 ease-out', tone.bar), style: { width: `${Math.max(0, Math.min(100, safeScore ?? 0))}%` } }) })] }));
+}
+/* ─── Grammar & content card (right) ─────────────────────────────────────── */
+function GrammarContentCard({ contentScore, feedback, }) {
+    return (_jsxs("div", { className: "flex h-full flex-col rounded-2xl border border-slate-200 bg-slate-50/60 shadow-[0_2px_8px_rgba(15,23,42,0.03)]", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-3 px-4 py-3", children: [_jsx(Brain, { className: "h-5 w-5 text-blue-600" }), _jsx("h4", { className: "text-sm font-black tracking-wide text-slate-800", children: "Ph\u00E2n t\u00EDch N\u1ED9i dung" })] }), contentScore != null ? (_jsx("div", { className: "flex flex-col gap-3 px-4 pb-3", children: _jsx(ScoreProgressBar, { label: "Ph\u00E2n t\u00EDch N\u1ED9i dung (LLM)", score: contentScore, icon: _jsx(TrendingUp, { className: "h-3.5 w-3.5 text-blue-500" }) }) })) : null, feedback ? (_jsxs("div", { className: "mx-4 mb-4 flex flex-1 flex-col rounded-xl border border-slate-200 border-l-[6px] border-l-blue-500 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-2 flex shrink-0 items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-blue-50 text-blue-600", children: _jsx(Bot, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-xs font-black uppercase tracking-wider text-blue-600", children: "Nh\u1EADn x\u00E9t AI" })] }), _jsx("div", { className: "flex-1 overflow-y-auto pr-1", children: _jsx("p", { className: "text-[15px] font-medium leading-relaxed text-slate-700", children: feedback }) })] })) : null] }));
+}
+function ScoreProgressBar({ label, score, icon, }) {
+    const rounded = Math.round(score);
+    const tone = rounded >= 80
+        ? { bar: 'bg-emerald-500', text: 'text-emerald-600' }
+        : rounded >= 50
+            ? { bar: 'bg-amber-400', text: 'text-amber-600' }
+            : { bar: 'bg-rose-400', text: 'text-rose-600' };
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 rounded-xl border border-slate-200 bg-white p-2.5 shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: cn('opacity-70', tone.text), children: icon }), _jsx("span", { className: "text-xs font-bold text-slate-700", children: label })] }), _jsx("span", { className: cn('text-xs font-black', tone.text), children: rounded })] }), _jsx("div", { className: "h-1 w-full overflow-hidden rounded-full bg-slate-100", children: _jsx("div", { className: cn('h-full rounded-full transition-all duration-1000 ease-out', tone.bar), style: { width: `${Math.max(0, Math.min(100, score))}%` } }) })] }));
+}
+/* ─── Empty-state placeholder (no content grading) ───────────────────────── */
+function NoGrammarPlaceholder() {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-200 bg-slate-50/60 p-6 text-center", children: [_jsx(MessageSquare, { className: "h-5 w-5 text-slate-300" }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold text-slate-500", children: "Kh\u00F4ng ch\u1EA5m n\u1ED9i dung" }), _jsx("p", { className: "mt-0.5 text-xs text-slate-400", children: "D\u1EA1ng c\u00E2u h\u1ECFi c\u00F3 k\u1ECBch b\u1EA3n m\u1EABu" })] })] }));
+}

package/dist/components/results/renderers/ReviewSpeakingMedia.js

@@ -1 +1,48 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{ImageIcon as t,ImageOff as r}from"lucide-react";import{useState as l}from"react";import{ResolvedImage as s}from"../../../components/common/ResolvedImage";import{usePresignedFileUrl as i}from"../../../shared/lib/hooks/usePresignedFileUrl";import{cn as n}from"../../../shared/lib/utils";import{SpeakingResultAudioPlayer as d}from"../speaking/SpeakingResultAudioPlayer";import{ListeningAudioBar as o}from"./ReviewListeningHeader";export function PromptImage({imageKey:s,alt:n}){const{previewUrl:d,isLoading:o}=i(s||void 0),[c,m]=l(!1);return s?a("div",{className:"rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[a("div",{className:"mb-3 flex items-center gap-2",children:[e(t,{className:"h-4 w-4 text-violet-500"}),e("p",{className:"text-sm font-semibold text-gray-700",children:"Question image"})]}),e("div",{className:"flex min-h-[200px] items-center justify-center rounded-lg bg-gray-50 p-4",children:o?e("span",{className:"text-sm text-gray-400",children:"Đang tải hình ảnh..."}):d&&!c?e("img",{src:d,alt:n,className:"max-h-[320px] w-auto rounded-lg object-contain",onError:()=>m(!0)}):a("div",{className:"flex flex-col items-center justify-center text-gray-400",children:[e(r,{className:"mb-2 h-8 w-8"}),e("span",{className:"text-sm",children:"Không thể tải hình ảnh"})]})})]}):null}export function ResolvedImageItem({imageKey:t,alt:s,label:d,highlight:o,aspectRatio:c="3.3"}){const{previewUrl:m,isLoading:g}=i(t||void 0),[h,x]=l(!1);return a("div",{className:n("relative w-full overflow-hidden rounded-xl border-2 bg-slate-50",o?"border-amber-400 ring-2 ring-amber-300":"border-slate-200"),style:{aspectRatio:c},children:[d&&e("span",{className:"absolute left-1/2 top-2 z-10 -translate-x-1/2 rounded-full bg-slate-800/80 px-3 py-0.5 text-xs font-bold uppercase tracking-wide text-white shadow backdrop-blur-sm",children:d}),g?e("div",{className:"flex h-full w-full items-center justify-center",children:e("span",{className:"text-xs text-gray-400",children:"Đang tải..."})}):m&&!h?e("img",{src:m,alt:s,className:"h-full w-full object-cover",onError:()=>x(!0)}):a("div",{className:"flex h-full w-full flex-col items-center justify-center text-gray-400",children:[e(r,{className:"mb-2 h-6 w-6"}),e("span",{className:"text-xs",children:"Không có ảnh"})]})]})}export function CompareImagesSection({candidateImageUrl:r,examinerImageUrl:l}){return r||l?a("div",{className:"space-y-3 rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[a("div",{className:"mb-1 flex items-center gap-2",children:[e(t,{className:"h-4 w-4 text-violet-500"}),e("p",{className:"text-sm font-semibold text-gray-700",children:"Hình ảnh câu hỏi"})]}),e(ResolvedImageItem,{imageKey:r,alt:"Candidate's copy",label:"Candidate's copy"}),e(ResolvedImageItem,{imageKey:l,alt:"Examiner's copy",label:"Examiner's copy"})]}):null}export function StoryImagesSection({images:r}){return r&&0!==r.length?a("div",{className:"rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[a("div",{className:"mb-3 flex items-center gap-2",children:[e(t,{className:"h-4 w-4 text-violet-500"}),a("p",{className:"text-sm font-semibold text-gray-700",children:["Hình ảnh câu chuyện (",r.length," ảnh)"]})]}),e("div",{className:"grid grid-cols-2 gap-3",children:r.map((a,t)=>e(ResolvedImageItem,{imageKey:a,alt:`Story image ${t+1}`,label:`Ảnh ${t+1}`,aspectRatio:"1/1"},a+t))})]}):null}export function InfoExchangeSection({data:r}){const{title:l,imageUrl:d,candidateFields:o,examinerFields:c}=r,m=o.length>0?o:c,{previewUrl:g,isLoading:h}=i(d||void 0);return a("div",{className:"space-y-3",children:[l?e("h3",{className:"text-sm font-bold text-gray-800",children:l}):null,d?e("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:h?e("div",{className:"flex h-[220px] items-center justify-center text-sm text-gray-400",children:"Loading image..."}):g?e(s,{src:d,alt:l||"Info exchange",className:"mx-auto h-auto max-h-[260px] w-auto max-w-full object-contain p-2"}):a("div",{className:"flex h-[220px] items-center justify-center text-sm text-gray-400",children:[e(t,{className:"mr-2 h-4 w-4"}),"Image unavailable"]})}):null,m.length>0?e("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:e("table",{className:"w-full text-sm",children:e("tbody",{children:m.map((t,r)=>a("tr",{className:n("border-b border-gray-100 transition-colors last:border-0 hover:bg-blue-50/50",r%2==0?"bg-white":"bg-gray-50/50"),children:[e("td",{className:"w-1/3 px-4 py-2.5 font-bold text-gray-700",children:t.key}),e("td",{className:"px-4 py-2.5",children:t.value||t.answer?e("span",{className:"font-medium text-gray-800",children:t.value||t.answer}):e("span",{className:"italic text-gray-300",children:"—"})})]},`${t.key}-${r}`))})})}):null]})}export function OddOneOutImagesSection({groupImages:r,contentImages:l,activeId:s}){const i=r.length>0?r:l.map((e,a)=>({id:String(a),url:e,label:String(a+1)}));return 0===i.length?null:a("div",{className:"rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[a("div",{className:"mb-3 flex items-center gap-2",children:[e(t,{className:"h-4 w-4 text-violet-500"}),e("p",{className:"text-sm font-semibold text-gray-700",children:"Hình ảnh Odd One Out"})]}),e("div",{className:"grid grid-cols-2 gap-3",children:i.map(a=>e(ResolvedImageItem,{imageKey:a.url,alt:`Image ${a.label}`,label:a.id===s?`Ảnh ${a.label} ★`:`Ảnh ${a.label}`,highlight:a.id===s},a.id))})]})}export function AudioSection({title:t,subtitle:r,icon:l,audioKey:s,emptyMessage:i,useListeningBar:n=!1}){return a("div",{className:"audio-player-wrapper rounded-lg border border-gray-200 bg-white p-4 shadow-sm",children:[a("div",{className:"mb-3 flex items-center gap-2",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 text-gray-700",children:l}),a("div",{children:[e("p",{className:"text-sm font-semibold text-gray-800",children:t}),e("p",{className:"text-xs text-gray-500",children:r})]})]}),s?n?e(o,{audioKey:s}):e(d,{audioKey:s,variant:"admin"}):e("div",{className:"rounded-lg border border-dashed border-gray-300 bg-gray-50 px-4 py-3 text-sm text-gray-500",children:i})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageIcon, ImageOff } from 'lucide-react';
+import { useState } from 'react';
+import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import { usePresignedFileUrl } from '../../../shared/lib/hooks/usePresignedFileUrl';
+import { cn } from '../../../shared/lib/utils';
+import { SpeakingResultAudioPlayer } from '../speaking/SpeakingResultAudioPlayer';
+import { ListeningAudioBar } from './ReviewListeningHeader';
+export function PromptImage({ imageKey, alt }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(imageKey || undefined);
+    const [hasError, setHasError] = useState(false);
+    if (!imageKey)
+        return null;
+    return (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-violet-500" }), _jsx("p", { className: "text-sm font-semibold text-gray-700", children: "Question image" })] }), _jsx("div", { className: "flex min-h-[200px] items-center justify-center rounded-lg bg-gray-50 p-4", children: isLoading ? (_jsx("span", { className: "text-sm text-gray-400", children: "\u0110ang t\u1EA3i h\u00ECnh \u1EA3nh..." })) : previewUrl && !hasError ? (_jsx("img", { src: previewUrl, alt: alt, className: "max-h-[320px] w-auto rounded-lg object-contain", onError: () => setHasError(true) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center text-gray-400", children: [_jsx(ImageOff, { className: "mb-2 h-8 w-8" }), _jsx("span", { className: "text-sm", children: "Kh\u00F4ng th\u1EC3 t\u1EA3i h\u00ECnh \u1EA3nh" })] })) })] }));
+}
+export function ResolvedImageItem({ imageKey, alt, label, highlight, aspectRatio = '3.3', }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(imageKey || undefined);
+    const [hasError, setHasError] = useState(false);
+    return (_jsxs("div", { className: cn('relative w-full overflow-hidden rounded-xl border-2 bg-slate-50', highlight ? 'border-amber-400 ring-2 ring-amber-300' : 'border-slate-200'), style: { aspectRatio }, children: [label && (_jsx("span", { className: "absolute left-1/2 top-2 z-10 -translate-x-1/2 rounded-full bg-slate-800/80 px-3 py-0.5 text-xs font-bold uppercase tracking-wide text-white shadow backdrop-blur-sm", children: label })), isLoading ? (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx("span", { className: "text-xs text-gray-400", children: "\u0110ang t\u1EA3i..." }) })) : previewUrl && !hasError ? (_jsx("img", { src: previewUrl, alt: alt, className: "h-full w-full object-cover", onError: () => setHasError(true) })) : (_jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center text-gray-400", children: [_jsx(ImageOff, { className: "mb-2 h-6 w-6" }), _jsx("span", { className: "text-xs", children: "Kh\u00F4ng c\u00F3 \u1EA3nh" })] }))] }));
+}
+export function CompareImagesSection({ candidateImageUrl, examinerImageUrl, }) {
+    if (!candidateImageUrl && !examinerImageUrl)
+        return null;
+    return (_jsxs("div", { className: "space-y-3 rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-violet-500" }), _jsx("p", { className: "text-sm font-semibold text-gray-700", children: "H\u00ECnh \u1EA3nh c\u00E2u h\u1ECFi" })] }), _jsx(ResolvedImageItem, { imageKey: candidateImageUrl, alt: "Candidate's copy", label: "Candidate's copy" }), _jsx(ResolvedImageItem, { imageKey: examinerImageUrl, alt: "Examiner's copy", label: "Examiner's copy" })] }));
+}
+export function StoryImagesSection({ images }) {
+    if (!images || images.length === 0)
+        return null;
+    return (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-violet-500" }), _jsxs("p", { className: "text-sm font-semibold text-gray-700", children: ["H\u00ECnh \u1EA3nh c\u00E2u chuy\u1EC7n (", images.length, " \u1EA3nh)"] })] }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: images.map((url, i) => (_jsx(ResolvedImageItem, { imageKey: url, alt: `Story image ${i + 1}`, label: `Ảnh ${i + 1}`, aspectRatio: "1/1" }, url + i))) })] }));
+}
+export function InfoExchangeSection({ data, }) {
+    const { title, imageUrl, candidateFields, examinerFields } = data;
+    const fields = candidateFields.length > 0 ? candidateFields : examinerFields;
+    const { previewUrl, isLoading } = usePresignedFileUrl(imageUrl || undefined);
+    return (_jsxs("div", { className: "space-y-3", children: [title ? _jsx("h3", { className: "text-sm font-bold text-gray-800", children: title }) : null, imageUrl ? (_jsx("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: isLoading ? (_jsx("div", { className: "flex h-[220px] items-center justify-center text-sm text-gray-400", children: "Loading image..." })) : previewUrl ? (_jsx(ResolvedImage, { src: imageUrl, alt: title || 'Info exchange', className: "mx-auto h-auto max-h-[260px] w-auto max-w-full object-contain p-2" })) : (_jsxs("div", { className: "flex h-[220px] items-center justify-center text-sm text-gray-400", children: [_jsx(ImageIcon, { className: "mr-2 h-4 w-4" }), "Image unavailable"] })) })) : null, fields.length > 0 ? (_jsx("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: _jsx("table", { className: "w-full text-sm", children: _jsx("tbody", { children: fields.map((field, idx) => (_jsxs("tr", { className: cn('border-b border-gray-100 transition-colors last:border-0 hover:bg-blue-50/50', idx % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'), children: [_jsx("td", { className: "w-1/3 px-4 py-2.5 font-bold text-gray-700", children: field.key }), _jsx("td", { className: "px-4 py-2.5", children: field.value || field.answer ? (_jsx("span", { className: "font-medium text-gray-800", children: field.value || field.answer })) : (_jsx("span", { className: "italic text-gray-300", children: "\u2014" })) })] }, `${field.key}-${idx}`))) }) }) })) : null] }));
+}
+export function OddOneOutImagesSection({ groupImages, contentImages, activeId, }) {
+    const images = groupImages.length > 0
+        ? groupImages
+        : contentImages.map((url, i) => ({ id: String(i), url, label: String(i + 1) }));
+    if (images.length === 0)
+        return null;
+    return (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-violet-500" }), _jsx("p", { className: "text-sm font-semibold text-gray-700", children: "H\u00ECnh \u1EA3nh Odd One Out" })] }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: images.map((img) => (_jsx(ResolvedImageItem, { imageKey: img.url, alt: `Image ${img.label}`, label: img.id === activeId ? `Ảnh ${img.label} ★` : `Ảnh ${img.label}`, highlight: img.id === activeId }, img.id))) })] }));
+}
+export function AudioSection({ title, subtitle, icon, audioKey, emptyMessage, useListeningBar = false, }) {
+    return (_jsxs("div", { className: "audio-player-wrapper rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 text-gray-700", children: icon }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold text-gray-800", children: title }), _jsx("p", { className: "text-xs text-gray-500", children: subtitle })] })] }), audioKey ? (useListeningBar ? (_jsx(ListeningAudioBar, { audioKey: audioKey })) : (_jsx(SpeakingResultAudioPlayer, { audioKey: audioKey, variant: "admin" }))) : (_jsx("div", { className: "rounded-lg border border-dashed border-gray-300 bg-gray-50 px-4 py-3 text-sm text-gray-500", children: emptyMessage }))] }));
+}