@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/types/read-passage-and-answer-questions/transform.js

@@ -1 +1,28 @@
-export const transformReadPassageAndAnswerQuestions=s=>{const e=s.answer;if(!e?.passage||!e?.singleQuestion)return{apiContent:{},apiCorrectAnswer:{}};const t=e.singleQuestion;if(!t.question)return{apiContent:{},apiCorrectAnswer:{}};const n={question:t.question,options:t.options},r={passageTitle:e.passageTitle||"",passage:e.passage,instructions:e.instructions||""};return{apiContent:n,apiCorrectAnswer:{correctAnswer:t.correctAnswer},totalPoints:t.points||1,passageData:r,groupNumber:t.groupNumber||1}};
+export const transformReadPassageAndAnswerQuestions = (question) => {
+    const answerData = question.answer;
+    if (!answerData?.passage || !answerData?.singleQuestion) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const sq = answerData.singleQuestion;
+    if (!sq.question) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const apiContent = {
+        question: sq.question,
+        options: sq.options,
+    };
+    const passageData = {
+        passageTitle: answerData.passageTitle || '',
+        passage: answerData.passage,
+        instructions: answerData.instructions || '',
+    };
+    return {
+        apiContent,
+        apiCorrectAnswer: {
+            correctAnswer: sq.correctAnswer,
+        },
+        totalPoints: sq.points || 1,
+        passageData,
+        groupNumber: sq.groupNumber || 1,
+    };
+};

package/dist/components/questions/types/speaking-conversation/SpeakingConversationCreator.js

@@ -1 +1,373 @@
-"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useRef as a,useEffect as n,useMemo as i}from"react";import{Button as s}from"../../../../components/ui/button";import{Label as l}from"../../../../components/ui/label";import{Input as o}from"../../../../components/ui/input";import{Textarea as d}from"../../../../components/ui/textarea";import{Switch as c}from"../../../../components/ui/switch";import{PointsInput as h}from"../../../../components/ui/points-input";import{Card as m,CardContent as u,CardHeader as g,CardTitle as p}from"../../../../components/ui/card";import{Badge as x}from"../../../../components/ui/badge";import{FileUpload as b}from"../../../../components/ui/file-upload";import{CreatorGuide as N}from"../../components/CreatorGuide";import{useReactHookForm as f}from"../../../../shared/lib/hooks/useReactHookForm";import{useDebouncedCallback as v}from"../../../../shared/lib/hooks/useDebouncedCallback";import{speakingConversationFormSchema as y}from"../../../../shared/lib/validation/speaking-conversation.validation";import{Users as w,Mic as A,Volume2 as U,MessageSquareText as k,BookOpen as V,Info as C,Plus as P,Trash2 as T,Image as S,User as D,UserCheck as q}from"lucide-react";import{useExamQuestionStore as B}from"../../../../shared/lib/stores/examQuestionStore";import{generateObjectId as j}from"../../_shared/utils/id-generator";function I(e,t){if(!t||0===t.length||void 0===e)return 1;let r=0;for(const a of t)if(r+=a.questionCount,e<r)return a.number;return t[t.length-1]?.number??1}export function SpeakingConversationCreator({initialData:E,onSave:G,onChange:z,externalErrors:R,validationRef:J,partId:H,groups:O,questionIndexInPart:F}){const K=E,L=Boolean(O&&O.length>0),M=I(F,O),W=i(()=>{if(!O||!O.length||void 0===F)return!0;let e=0;for(const t of O){if(F===e)return!0;e+=t.questionCount}return!1},[O,F]),_={partnerName:K?.partnerName??"",partnerAvatarUrl:K?.partnerAvatarUrl??"",images:K?.images??[]},{groupData:$,setGroupData:Q}=function({partId:e,groups:t,questionIndexInPart:r,initialData:a}){const n=B(e=>e.setSharedListData),s=B(e=>e.getSharedListData),l=B(e=>e.sharedListData),o=Boolean(t&&t.length>0),d=I(r,t),c=i(()=>{if(o&&e){const t=s(e,d),r=t?.conversationGroup;if(r)return r}return a??{}},[l,o,e,d]);return{isGrouped:o,currentGroupNumber:d,groupData:c,setGroupData:t=>{if(!o||!e)return;const r=s(e,d)||{};n(e,d,{...r,conversationGroup:t})}}}({partId:H,groups:O,questionIndexInPart:F,initialData:_}),X=f({defaultValues:{partnerName:$.partnerName??"",partnerAvatarUrl:$.partnerAvatarUrl??"",images:$.images??[],responder:K?.responder??"STUDENT",interlocutorAudioUrl:K?.interlocutorAudioUrl??"",partnerAudioUrl:K?.partnerAudioUrl??"",questionText:K?.questionText??"",isBackup:K?.isBackup??!1,expectedAnswers:K?.expectedAnswers?.length>0?K.expectedAnswers:[""],explanation:K?.explanation??"",points:K?.points??5},zodSchema:y,mode:"onBlur"}),Y=a(E),Z=a(!1),ee=a(z),te=a("");n(()=>{ee.current=z},[z]);const re=v(e=>{ee.current?.(e)},300),ae=X.watch("responder"),ne=X.watch("interlocutorAudioUrl"),ie=X.watch("partnerAudioUrl"),se=X.watch("questionText"),le=X.watch("isBackup"),oe=X.watch("expectedAnswers")||[""],de=X.watch("explanation"),ce=X.watch("points"),he=X.watch("partnerName"),me=X.watch("partnerAvatarUrl"),ue=X.watch("images")||[],ge="PARTNER"===ae;n(()=>{ge&&0!==X.getValues("points")&&X.setValue("points",0,{shouldValidate:!1})},[ge,X]),n(()=>{W&&Q({partnerName:he,partnerAvatarUrl:me,images:ue})},[he,me,JSON.stringify(ue),W]),n(()=>{W||(void 0!==$.partnerName&&X.setValue("partnerName",$.partnerName??"",{shouldValidate:!1}),void 0!==$.partnerAvatarUrl&&X.setValue("partnerAvatarUrl",$.partnerAvatarUrl??"",{shouldValidate:!1}),void 0!==$.images&&X.setValue("images",$.images??[],{shouldValidate:!1}))},[$,W]),n(()=>{J&&(J.current={triggerValidation:async()=>await X.trigger(),getFormData:()=>({responder:ae,interlocutorAudioUrl:ne,partnerAudioUrl:ie,questionText:se,isBackup:le,expectedAnswers:oe,explanation:de,points:ce,partnerName:he,partnerAvatarUrl:me,images:ue,groupNumber:L?M:void 0})})},[J,X,ae,ne,ie,se,le,oe,de,ce,he,me,ue,L,M]),n(()=>{if(!(JSON.stringify(Y.current)!==JSON.stringify(E)))return;Y.current=E;const e={partnerName:K?.partnerName??$.partnerName??"",partnerAvatarUrl:K?.partnerAvatarUrl??$.partnerAvatarUrl??"",images:K?.images??$.images??[],responder:K?.responder??"STUDENT",interlocutorAudioUrl:K?.interlocutorAudioUrl??"",partnerAudioUrl:K?.partnerAudioUrl??"",questionText:K?.questionText??"",isBackup:K?.isBackup??!1,expectedAnswers:K?.expectedAnswers?.length>0?K.expectedAnswers:[""],explanation:K?.explanation??"",points:K?.points??5},t={responder:ae,interlocutorAudioUrl:ne,partnerAudioUrl:ie,questionText:se,isBackup:le,expectedAnswers:oe,explanation:de,points:ce},r=t.responder===e.responder&&t.points===e.points&&t.explanation===e.explanation&&t.interlocutorAudioUrl===e.interlocutorAudioUrl&&t.partnerAudioUrl===e.partnerAudioUrl&&t.questionText===e.questionText&&JSON.stringify(t.expectedAnswers)===JSON.stringify(e.expectedAnswers);r&&!0===E?.isCompleted||r||(Z.current=!0,X.reset(e),setTimeout(()=>{Z.current=!1},150))},[E,X,ae,ne,ie,se,le,oe,de,ce,$]),n(()=>{const e={responder:ae,interlocutorAudioUrl:ne,partnerAudioUrl:ie,questionText:se,isBackup:le,expectedAnswers:oe,explanation:de,points:ge?0:ce,partnerName:he,partnerAvatarUrl:me,images:ue,groupNumber:L?M:void 0};if(Z.current)return void(te.current=JSON.stringify(e));const t=JSON.stringify(e);te.current!==t&&(te.current=t,re(e))},[ae,ne,ie,se,le,oe,de,ce,he,me,ue,ge,L,M,re]);const pe=(e,t,r)=>{const a=ue.map((a,n)=>n===e?{...a,[t]:r}:a);X.setValue("images",a,{shouldValidate:!0})};return t("div",{className:"space-y-6",children:[e(N,{colorScheme:"teal",steps:[{text:"Cấu hình Group Data (tên Partner, avatar) — chỉ câu đầu tiên trong nhóm được chỉnh sửa"},{text:"Chọn Responder: Partner (câu mẫu) hoặc Student (học sinh trả lời)",highlight:!0},{text:"Upload audio Interlocutor (câu hỏi) và audio Partner (câu trả lời mẫu khi responder = Partner)"},{text:"Nhập đáp án mong muốn (dùng khi responder = Student để giáo viên tham chiếu)"},{text:"Thêm giải thích nếu cần"}],tips:["Responder = Partner: tự động set is_example=true, points=0. Học sinh chỉ nghe, không ghi âm.","Responder = Student: học sinh ghi âm trả lời. Cần nhập điểm >= 1."]}),t(m,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-teal-400 to-cyan-400"}),e(g,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 shadow-sm",children:e(w,{className:"h-4 w-4 text-white"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e(p,{className:"text-lg font-bold text-gray-900",children:"Dữ liệu nhóm"}),L&&t(x,{variant:"outline",className:"border-teal-300 bg-teal-50 text-teal-700 text-xs",children:["Nhóm ",M]}),!W&&e(x,{variant:"outline",className:"border-gray-300 bg-gray-50 text-gray-500 text-xs",children:"Chỉ đọc"})]}),e("p",{className:"text-sm text-gray-500 mt-0.5",children:W?"Thông tin Partner và hình ảnh dùng chung cho toàn bộ nhóm câu hỏi":"Được quản lý bởi câu hỏi đầu tiên trong nhóm"})]})]})}),e(u,{className:"space-y-5",children:W?t(r,{children:[t("div",{className:"space-y-2",children:[t(l,{className:"flex items-center gap-2 text-sm font-semibold text-gray-700",children:[e(D,{className:"h-4 w-4 text-teal-500"}),"Tên nhân vật Partner"]}),e(o,{...X.register("partnerName"),placeholder:"VD: Bingo",className:"border-gray-200 focus:border-teal-300 focus:ring-teal-200"}),e("p",{className:"text-xs text-gray-400",children:"Tên hiển thị của nhân vật ảo (Partner) — dùng trong giao diện thi."})]}),t("div",{className:"space-y-2",children:[t(l,{className:"flex items-center gap-2 text-sm font-semibold text-gray-700",children:[e(D,{className:"h-4 w-4 text-teal-500"}),"Avatar Partner"]}),e(b,{id:"partner-avatar-url",label:"",accept:"image/*",value:me||"",onChange:e=>X.setValue("partnerAvatarUrl",e,{shouldValidate:!0}),maxSize:5,placeholder:"Upload ảnh avatar Partner (PNG, JPG, ...)",autoUpload:!0,prefix:"speaking/partner-avatar"})]}),t("div",{className:"space-y-3",children:[t("div",{className:"flex items-center justify-between",children:[t(l,{className:"flex items-center gap-2 text-sm font-semibold text-gray-700",children:[e(S,{className:"h-4 w-4 text-teal-500"}),"Hình ảnh phase (tùy chọn)"]}),t(s,{type:"button",variant:"outline",size:"sm",onClick:()=>{const e=[...ue,{id:j(),url:"",label:""}];X.setValue("images",e,{shouldValidate:!1})},className:"gap-1.5 border-teal-200 text-teal-700 hover:bg-teal-50 text-xs",children:[e(P,{className:"h-3.5 w-3.5"}),"Thêm hình"]})]}),0===ue.length?t("div",{className:"rounded-lg border-2 border-dashed border-teal-200 bg-teal-50/40 py-6 text-center",children:[e(S,{className:"mx-auto h-8 w-8 text-teal-300 mb-2"}),e("p",{className:"text-sm text-gray-400",children:"Không có hình ảnh — dùng cho Part 2 phases có tranh"})]}):e("div",{className:"space-y-3",children:ue.map((r,a)=>t("div",{className:"rounded-lg border border-gray-200 bg-gray-50 p-3 space-y-2",children:[t("div",{className:"flex items-center justify-between",children:[t("span",{className:"text-xs font-semibold text-gray-600",children:["Hình ",a+1]}),e(s,{type:"button",variant:"ghost",size:"icon",className:"h-6 w-6 text-red-400 hover:text-red-600 hover:bg-red-50",onClick:()=>(e=>{const t=ue.filter((t,r)=>r!==e);X.setValue("images",t,{shouldValidate:!0})})(a),children:e(T,{className:"h-3.5 w-3.5"})})]}),e(b,{id:`image-url-${a}`,label:"",accept:"image/*",value:r.url,onChange:e=>pe(a,"url",e),maxSize:10,placeholder:"Upload hình ảnh",autoUpload:!0,prefix:"speaking/phase-images"}),e(o,{value:r.label,onChange:e=>pe(a,"label",e.target.value),placeholder:"Nhãn hình (VD: Park, Bedroom, Library ...)",className:"border-gray-200 text-sm focus:border-teal-300"})]},r.id))})]})]}):t("div",{className:"space-y-3",children:[t("div",{className:"flex items-center gap-3 rounded-lg border border-gray-100 bg-gray-50 px-4 py-3",children:[e(D,{className:"h-4 w-4 text-teal-500 flex-shrink-0"}),t("div",{children:[e("p",{className:"text-xs text-gray-500",children:"Tên Partner"}),e("p",{className:"text-sm font-medium text-gray-800",children:$.partnerName||e("span",{className:"italic text-gray-400",children:"Chưa đặt tên"})})]})]}),$.images&&$.images.length>0&&t("div",{className:"rounded-lg border border-gray-100 bg-gray-50 px-4 py-3",children:[t("p",{className:"text-xs text-gray-500 mb-2",children:["Hình ảnh (",$.images.length,")"]}),e("div",{className:"flex flex-wrap gap-2",children:$.images.map(t=>e("span",{className:"inline-flex items-center rounded-full bg-teal-100 px-2 py-0.5 text-xs text-teal-700",children:t.label||t.id},t.id))})]})]})})]}),t(m,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r "+(ge?"from-orange-400 to-amber-400":"from-indigo-400 to-violet-400")}),e(g,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg shadow-sm "+(ge?"bg-gradient-to-br from-orange-500 to-amber-500":"bg-gradient-to-br from-indigo-500 to-violet-600"),children:e(A,{className:"h-4 w-4 text-white"})}),t("div",{className:"flex-1",children:[t("div",{className:"flex items-center gap-2",children:[e(p,{className:"text-lg font-bold text-gray-900",children:"Nội dung câu hỏi"}),ge&&e(x,{className:"bg-orange-100 text-orange-700 border-orange-200 border text-xs font-semibold",children:"Câu hỏi mẫu (Example)"})]}),e("p",{className:"text-sm text-gray-500 mt-0.5",children:ge?"Partner trả lời — học sinh chỉ nghe, không ghi âm":"Student trả lời — học sinh ghi âm câu trả lời"})]})]})}),t(u,{className:"space-y-6",children:[t("div",{className:"rounded-xl border p-4 space-y-4 "+(ge?"border-orange-200 bg-orange-50/40":"border-indigo-200 bg-indigo-50/40"),children:[e("div",{className:"flex items-center justify-between",children:t("div",{className:"space-y-1",children:[e(l,{className:"text-base font-semibold text-gray-800",children:"Người trả lời"}),e("p",{className:"text-sm text-gray-500",children:"Ai sẽ trả lời câu hỏi này trong bài thi?"})]})}),t("div",{className:"flex gap-3",children:[t("button",{type:"button",onClick:()=>X.setValue("responder","PARTNER",{shouldValidate:!0}),className:"flex flex-1 items-center gap-3 rounded-xl border-2 p-3 transition-all "+(ge?"border-orange-400 bg-orange-50 shadow-sm":"border-gray-200 bg-white hover:border-gray-300"),children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-full "+(ge?"bg-orange-500":"bg-gray-200"),children:e(D,{className:"h-4 w-4 "+(ge?"text-white":"text-gray-500")})}),t("div",{className:"text-left",children:[e("p",{className:"text-sm font-semibold "+(ge?"text-orange-800":"text-gray-700"),children:"Partner trả lời"}),e("p",{className:"text-xs "+(ge?"text-orange-600":"text-gray-500"),children:"Câu mẫu — is_example=true, points=0"})]})]}),t("button",{type:"button",onClick:()=>X.setValue("responder","STUDENT",{shouldValidate:!0}),className:"flex flex-1 items-center gap-3 rounded-xl border-2 p-3 transition-all "+(ge?"border-gray-200 bg-white hover:border-gray-300":"border-indigo-400 bg-indigo-50 shadow-sm"),children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-full "+(ge?"bg-gray-200":"bg-indigo-500"),children:e(q,{className:"h-4 w-4 "+(ge?"text-gray-500":"text-white")})}),t("div",{className:"text-left",children:[e("p",{className:"text-sm font-semibold "+(ge?"text-gray-700":"text-indigo-800"),children:"Student trả lời"}),e("p",{className:"text-xs "+(ge?"text-gray-500":"text-indigo-600"),children:"Câu thực — học sinh ghi âm"})]})]})]}),X.hasError("responder")&&e("p",{className:"text-sm text-red-600",children:X.getFieldError("responder")})]}),t("div",{className:"w-full md:w-1/2",children:[e(h,{...X.register("points",{valueAsNumber:!0}),disabled:ge,error:X.hasError("points")?X.getFieldError("points"):void 0}),ge&&e("p",{className:"mt-1.5 text-xs text-orange-600",children:"Câu hỏi mẫu (Partner) luôn có 0 điểm"})]}),t("div",{className:"space-y-2",children:[t(l,{className:"flex items-center gap-2 text-sm font-semibold text-gray-700",children:[e(U,{className:"h-4 w-4 text-blue-500"}),"Audio Interlocutor",e("span",{className:"text-xs font-normal text-gray-400",children:"(tùy chọn)"})]}),e(b,{id:"interlocutor-audio-url",label:"",accept:"audio/*",value:ne||"",onChange:e=>X.setValue("interlocutorAudioUrl",e,{shouldValidate:!0}),maxSize:20,placeholder:"Upload audio câu hỏi của Interlocutor (MP3, WAV...)",autoUpload:!0,prefix:"speaking/interlocutor"}),t("div",{className:"flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2",children:[e(C,{className:"h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"}),e("p",{className:"text-xs text-blue-700",children:"Audio của Interlocutor (người hỏi). Phát trước khi Partner hoặc Student trả lời."})]})]}),t("div",{className:"space-y-2",children:[t(l,{className:"flex items-center gap-2 text-sm font-semibold text-gray-700",children:[e(U,{className:"h-4 w-4 text-orange-500"}),"Audio Partner",ge&&e("span",{className:"text-red-500",children:"*"}),!ge&&e("span",{className:"text-xs font-normal text-gray-400",children:"(tùy chọn)"})]}),e(b,{id:"partner-audio-url",label:"",accept:"audio/*",value:ie||"",onChange:e=>X.setValue("partnerAudioUrl",e,{shouldValidate:!0}),maxSize:20,placeholder:"Upload audio trả lời của Partner (MP3, WAV...)",autoUpload:!0,prefix:"speaking/partner"}),X.hasError("partnerAudioUrl")&&e("p",{className:"text-sm text-red-600",children:X.getFieldError("partnerAudioUrl")}),t("div",{className:"flex items-start gap-2 rounded-lg border border-orange-100 bg-orange-50/60 px-3 py-2",children:[e(C,{className:"h-4 w-4 text-orange-500 mt-0.5 flex-shrink-0"}),e("p",{className:"text-xs text-orange-700",children:ge?"Bắt buộc khi responder = Partner. Phát sau audio Interlocutor.":"Tùy chọn khi responder = Student — dùng cho Talk Together (Partner nói trước, Student trả lời sau)."})]})]}),t("div",{className:"space-y-2",children:[t(l,{className:"flex items-center gap-2 text-sm font-semibold text-gray-700",children:[e(k,{className:"h-4 w-4 text-gray-500"}),"Text câu hỏi (tùy chọn)"]}),e(d,{...X.register("questionText"),placeholder:"VD: What's your name? How old are you?",rows:2,className:"min-h-[60px] border-gray-200 focus:border-indigo-300 focus:ring-indigo-200 resize-none"}),e("p",{className:"text-xs text-gray-400",children:"Chỉ hiển thị cho admin/giáo viên khi review. Học sinh chỉ nghe audio."})]}),t("div",{className:"flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 px-4 py-3",children:[t("div",{className:"space-y-0.5",children:[e(l,{className:"text-sm font-semibold text-gray-700",children:"Câu hỏi dự phòng"}),e("p",{className:"text-xs text-gray-400",children:"Đánh dấu câu hỏi này là dự phòng (backup)"})]}),e(c,{checked:le,onCheckedChange:e=>X.setValue("isBackup",e,{shouldValidate:!0})})]})]})]}),t(m,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-green-400 to-emerald-500"}),e(g,{className:"pb-4",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-sm",children:e(k,{className:"h-4 w-4 text-white"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e(p,{className:"text-lg font-semibold text-gray-800",children:"Đáp án mong muốn"}),e("span",{className:"inline-flex items-center rounded-full border border-green-200 bg-green-50 px-2.5 py-0.5 text-xs font-medium text-green-600",children:"Không bắt buộc"})]}),e("p",{className:"text-sm text-gray-500 mt-0.5",children:ge?"Câu mẫu — đáp án dùng để ghi nhớ nội dung (không chấm điểm)":"Đáp án tham chiếu để giáo viên chấm thủ công"})]})]}),t(s,{type:"button",variant:"outline",size:"sm",onClick:()=>{X.setValue("expectedAnswers",[...oe,""],{shouldValidate:!1})},className:"gap-1.5 border-green-200 text-green-700 hover:bg-green-50",children:[e(P,{className:"h-4 w-4"}),"Thêm đáp án"]})]})}),t(u,{className:"space-y-3",children:[t("div",{className:"flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5",children:[e(C,{className:"h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"}),e("p",{className:"text-xs text-blue-700",children:ge?"Câu hỏi mẫu: có thể nhập nội dung Partner nói để ghi nhớ. Không dùng để chấm điểm.":"Giáo viên dùng các đáp án này làm tham chiếu khi chấm thủ công câu trả lời của học sinh."})]}),oe.map((r,a)=>t("div",{className:"flex items-start gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-full bg-green-100 text-xs font-semibold text-green-700 mt-1.5 flex-shrink-0",children:a+1}),e(d,{value:r||"",onChange:e=>((e,t)=>{const r=[...oe];r[e]=t,X.setValue("expectedAnswers",r,{shouldValidate:!0})})(a,e.target.value),placeholder:0===a?"VD: My name is Bingo. I am 8 years old.":"Thêm đáp án mẫu khác...",rows:2,className:"min-h-[60px] border-gray-200 bg-white transition-all focus:border-green-300 focus:ring-green-200 resize-none flex-1"}),oe.length>1&&e(s,{type:"button",variant:"ghost",size:"icon",className:"mt-1.5 h-7 w-7 text-red-400 hover:text-red-600 hover:bg-red-50 flex-shrink-0",onClick:()=>(e=>{const t=[...oe];t.splice(e,1),0===t.length&&t.push(""),X.setValue("expectedAnswers",t,{shouldValidate:!0})})(a),"aria-label":`Xóa đáp án ${a+1}`,children:e(T,{className:"h-4 w-4"})})]},a))]})]}),t(m,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-amber-400 to-orange-400"}),e(g,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(V,{className:"h-4 w-4 text-white"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e(p,{className:"text-lg font-semibold text-gray-800",children:"Giải thích"}),e("span",{className:"inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"text-sm text-gray-500 mt-0.5",children:"Giải thích thêm về câu trả lời kỳ vọng, dùng khi review kết quả."})]})]})}),e(u,{children:e(d,{value:de||"",onChange:e=>X.setValue("explanation",e.target.value,{shouldValidate:!0}),placeholder:"VD: Câu trả lời đúng: 'My name is...' vì câu hỏi đang hỏi về tên và tuổi.",rows:3,className:"min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none"})})]}),R&&R.length>0&&e("div",{className:"flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4",children:t("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Cần sửa các lỗi sau:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:R.map((t,r)=>e("li",{children:t},r))})]})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useMemo } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Switch } from '../../../../components/ui/switch';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Badge } from '../../../../components/ui/badge';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { CreatorGuide } from '../../components/CreatorGuide';
+import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
+import { useDebouncedCallback } from '../../../../shared/lib/hooks/useDebouncedCallback';
+import { speakingConversationFormSchema, } from '../../../../shared/lib/validation/speaking-conversation.validation';
+import { Users, Mic, Volume2, MessageSquareText, BookOpen, Info, Plus, Trash2, Image, User, UserCheck, } from 'lucide-react';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+import { generateObjectId } from '../../_shared/utils/id-generator';
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function getGroupNumberForIndex(questionIndexInPart, groups) {
+    if (!groups || groups.length === 0 || questionIndexInPart === undefined)
+        return 1;
+    let cumulative = 0;
+    for (const group of groups) {
+        cumulative += group.questionCount;
+        if (questionIndexInPart < cumulative)
+            return group.number;
+    }
+    return groups[groups.length - 1]?.number ?? 1;
+}
+function useConversationGroup({ partId, groups, questionIndexInPart, initialData, }) {
+    const setSharedListData = useExamQuestionStore((s) => s.setSharedListData);
+    const getSharedListData = useExamQuestionStore((s) => s.getSharedListData);
+    const sharedListData = useExamQuestionStore((s) => s.sharedListData);
+    const isGrouped = Boolean(groups && groups.length > 0);
+    const currentGroupNumber = getGroupNumberForIndex(questionIndexInPart, groups);
+    const setGroupData = (data) => {
+        if (!isGrouped || !partId)
+            return;
+        const stored = getSharedListData(partId, currentGroupNumber) || {};
+        setSharedListData(partId, currentGroupNumber, {
+            ...stored,
+            conversationGroup: data,
+        });
+    };
+    // Read from store (reactive via sharedListData subscription)
+    const groupData = useMemo(() => {
+        if (isGrouped && partId) {
+            const stored = getSharedListData(partId, currentGroupNumber);
+            const conv = stored?.conversationGroup;
+            if (conv)
+                return conv;
+        }
+        return initialData ?? {};
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sharedListData, isGrouped, partId, currentGroupNumber]);
+    return { isGrouped, currentGroupNumber, groupData, setGroupData };
+}
+// ─── Component ────────────────────────────────────────────────────────────────
+export function SpeakingConversationCreator({ initialData, onSave, onChange, externalErrors, validationRef, partId, groups, questionIndexInPart, }) {
+    const apiData = initialData;
+    const isGrouped = Boolean(groups && groups.length > 0);
+    const currentGroupNumber = getGroupNumberForIndex(questionIndexInPart, groups);
+    const isFirstInGroup = useMemo(() => {
+        if (!groups || !groups.length || questionIndexInPart === undefined)
+            return true;
+        let cumulative = 0;
+        for (const group of groups) {
+            if (questionIndexInPart === cumulative)
+                return true;
+            cumulative += group.questionCount;
+        }
+        return false;
+    }, [groups, questionIndexInPart]);
+    // ─── Group shared data (partnerName, partnerAvatarUrl, images) ────────────
+    const initialGroupData = {
+        partnerName: apiData?.partnerName ?? '',
+        partnerAvatarUrl: apiData?.partnerAvatarUrl ?? '',
+        images: apiData?.images ?? [],
+    };
+    const { groupData, setGroupData } = useConversationGroup({
+        partId,
+        groups,
+        questionIndexInPart,
+        initialData: initialGroupData,
+    });
+    // ─── Per-question form ────────────────────────────────────────────────────
+    const form = useReactHookForm({
+        defaultValues: {
+            partnerName: groupData.partnerName ?? '',
+            partnerAvatarUrl: groupData.partnerAvatarUrl ?? '',
+            images: groupData.images ?? [],
+            responder: apiData?.responder ?? 'STUDENT',
+            interlocutorAudioUrl: apiData?.interlocutorAudioUrl ?? '',
+            partnerAudioUrl: apiData?.partnerAudioUrl ?? '',
+            questionText: apiData?.questionText ?? '',
+            isBackup: apiData?.isBackup ?? false,
+            expectedAnswers: apiData?.expectedAnswers?.length > 0 ? apiData.expectedAnswers : [''],
+            explanation: apiData?.explanation ?? '',
+            points: apiData?.points ?? 5,
+        },
+        zodSchema: speakingConversationFormSchema,
+        mode: 'onBlur',
+    });
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    // Watched values
+    const watchedResponder = form.watch('responder');
+    const watchedInterlocutorAudioUrl = form.watch('interlocutorAudioUrl');
+    const watchedPartnerAudioUrl = form.watch('partnerAudioUrl');
+    const watchedQuestionText = form.watch('questionText');
+    const watchedIsBackup = form.watch('isBackup');
+    const watchedExpectedAnswers = form.watch('expectedAnswers') || [''];
+    const watchedExplanation = form.watch('explanation');
+    const watchedPoints = form.watch('points');
+    const watchedPartnerName = form.watch('partnerName');
+    const watchedPartnerAvatarUrl = form.watch('partnerAvatarUrl');
+    const watchedImages = form.watch('images') || [];
+    const isPartnerResponder = watchedResponder === 'PARTNER';
+    // Auto-set points=0 when responder switches to PARTNER
+    useEffect(() => {
+        if (isPartnerResponder && form.getValues('points') !== 0) {
+            form.setValue('points', 0, { shouldValidate: false });
+        }
+    }, [isPartnerResponder, form]);
+    // Sync group data to store when first-in-group fields change
+    useEffect(() => {
+        if (!isFirstInGroup)
+            return;
+        setGroupData({
+            partnerName: watchedPartnerName,
+            partnerAvatarUrl: watchedPartnerAvatarUrl,
+            images: watchedImages,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [watchedPartnerName, watchedPartnerAvatarUrl, JSON.stringify(watchedImages), isFirstInGroup]);
+    // Sync group data from store to form for non-first questions
+    useEffect(() => {
+        if (isFirstInGroup)
+            return;
+        if (groupData.partnerName !== undefined) {
+            form.setValue('partnerName', groupData.partnerName ?? '', { shouldValidate: false });
+        }
+        if (groupData.partnerAvatarUrl !== undefined) {
+            form.setValue('partnerAvatarUrl', groupData.partnerAvatarUrl ?? '', {
+                shouldValidate: false,
+            });
+        }
+        if (groupData.images !== undefined) {
+            form.setValue('images', groupData.images ?? [], { shouldValidate: false });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [groupData, isFirstInGroup]);
+    // Expose validation ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return await form.trigger();
+                },
+                getFormData: () => ({
+                    responder: watchedResponder,
+                    interlocutorAudioUrl: watchedInterlocutorAudioUrl,
+                    partnerAudioUrl: watchedPartnerAudioUrl,
+                    questionText: watchedQuestionText,
+                    isBackup: watchedIsBackup,
+                    expectedAnswers: watchedExpectedAnswers,
+                    explanation: watchedExplanation,
+                    points: watchedPoints,
+                    partnerName: watchedPartnerName,
+                    partnerAvatarUrl: watchedPartnerAvatarUrl,
+                    images: watchedImages,
+                    groupNumber: isGrouped ? currentGroupNumber : undefined,
+                }),
+            };
+        }
+    }, [
+        validationRef,
+        form,
+        watchedResponder,
+        watchedInterlocutorAudioUrl,
+        watchedPartnerAudioUrl,
+        watchedQuestionText,
+        watchedIsBackup,
+        watchedExpectedAnswers,
+        watchedExplanation,
+        watchedPoints,
+        watchedPartnerName,
+        watchedPartnerAvatarUrl,
+        watchedImages,
+        isGrouped,
+        currentGroupNumber,
+    ]);
+    // Reset form when initialData changes externally
+    useEffect(() => {
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!initialDataChanged)
+            return;
+        previousInitialDataRef.current = initialData;
+        const normalizedData = {
+            partnerName: apiData?.partnerName ?? groupData.partnerName ?? '',
+            partnerAvatarUrl: apiData?.partnerAvatarUrl ?? groupData.partnerAvatarUrl ?? '',
+            images: apiData?.images ?? groupData.images ?? [],
+            responder: apiData?.responder ?? 'STUDENT',
+            interlocutorAudioUrl: apiData?.interlocutorAudioUrl ?? '',
+            partnerAudioUrl: apiData?.partnerAudioUrl ?? '',
+            questionText: apiData?.questionText ?? '',
+            isBackup: apiData?.isBackup ?? false,
+            expectedAnswers: apiData?.expectedAnswers?.length > 0 ? apiData.expectedAnswers : [''],
+            explanation: apiData?.explanation ?? '',
+            points: apiData?.points ?? 5,
+        };
+        const currentFormData = {
+            responder: watchedResponder,
+            interlocutorAudioUrl: watchedInterlocutorAudioUrl,
+            partnerAudioUrl: watchedPartnerAudioUrl,
+            questionText: watchedQuestionText,
+            isBackup: watchedIsBackup,
+            expectedAnswers: watchedExpectedAnswers,
+            explanation: watchedExplanation,
+            points: watchedPoints,
+        };
+        const isEcho = currentFormData.responder === normalizedData.responder &&
+            currentFormData.points === normalizedData.points &&
+            currentFormData.explanation === normalizedData.explanation &&
+            currentFormData.interlocutorAudioUrl === normalizedData.interlocutorAudioUrl &&
+            currentFormData.partnerAudioUrl === normalizedData.partnerAudioUrl &&
+            currentFormData.questionText === normalizedData.questionText &&
+            JSON.stringify(currentFormData.expectedAnswers) ===
+                JSON.stringify(normalizedData.expectedAnswers);
+        const wasJustSaved = initialData?.isCompleted === true;
+        if (isEcho && wasJustSaved)
+            return;
+        if (!isEcho) {
+            isInitializingRef.current = true;
+            form.reset(normalizedData);
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150);
+        }
+    }, [
+        initialData,
+        form,
+        watchedResponder,
+        watchedInterlocutorAudioUrl,
+        watchedPartnerAudioUrl,
+        watchedQuestionText,
+        watchedIsBackup,
+        watchedExpectedAnswers,
+        watchedExplanation,
+        watchedPoints,
+        groupData,
+    ]);
+    // Fire onChange on form value changes
+    useEffect(() => {
+        const payload = {
+            responder: watchedResponder,
+            interlocutorAudioUrl: watchedInterlocutorAudioUrl,
+            partnerAudioUrl: watchedPartnerAudioUrl,
+            questionText: watchedQuestionText,
+            isBackup: watchedIsBackup,
+            expectedAnswers: watchedExpectedAnswers,
+            explanation: watchedExplanation,
+            points: isPartnerResponder ? 0 : watchedPoints,
+            partnerName: watchedPartnerName,
+            partnerAvatarUrl: watchedPartnerAvatarUrl,
+            images: watchedImages,
+            groupNumber: isGrouped ? currentGroupNumber : undefined,
+        };
+        if (isInitializingRef.current) {
+            previousPayloadRef.current = JSON.stringify(payload);
+            return;
+        }
+        const payloadString = JSON.stringify(payload);
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            debouncedOnChange(payload);
+        }
+    }, [
+        watchedResponder,
+        watchedInterlocutorAudioUrl,
+        watchedPartnerAudioUrl,
+        watchedQuestionText,
+        watchedIsBackup,
+        watchedExpectedAnswers,
+        watchedExplanation,
+        watchedPoints,
+        watchedPartnerName,
+        watchedPartnerAvatarUrl,
+        watchedImages,
+        isPartnerResponder,
+        isGrouped,
+        currentGroupNumber,
+        debouncedOnChange,
+    ]);
+    // ─── Expected Answers handlers ────────────────────────────────────────────
+    const handleAddExpectedAnswer = () => {
+        form.setValue('expectedAnswers', [...watchedExpectedAnswers, ''], { shouldValidate: false });
+    };
+    const handleRemoveExpectedAnswer = (index) => {
+        const updated = [...watchedExpectedAnswers];
+        updated.splice(index, 1);
+        if (updated.length === 0)
+            updated.push('');
+        form.setValue('expectedAnswers', updated, { shouldValidate: true });
+    };
+    const handleExpectedAnswerChange = (index, value) => {
+        const updated = [...watchedExpectedAnswers];
+        updated[index] = value;
+        form.setValue('expectedAnswers', updated, { shouldValidate: true });
+    };
+    // ─── Images handlers ──────────────────────────────────────────────────────
+    const handleAddImage = () => {
+        const updated = [
+            ...watchedImages,
+            { id: generateObjectId(), url: '', label: '' },
+        ];
+        form.setValue('images', updated, { shouldValidate: false });
+    };
+    const handleRemoveImage = (index) => {
+        const updated = watchedImages.filter((_, i) => i !== index);
+        form.setValue('images', updated, { shouldValidate: true });
+    };
+    const handleImageChange = (index, field, value) => {
+        const updated = watchedImages.map((img, i) => i === index ? { ...img, [field]: value } : img);
+        form.setValue('images', updated, { shouldValidate: true });
+    };
+    // ─── Render ───────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(CreatorGuide, { colorScheme: "teal", steps: [
+                    {
+                        text: 'Cấu hình Group Data (tên Partner, avatar) — chỉ câu đầu tiên trong nhóm được chỉnh sửa',
+                    },
+                    {
+                        text: 'Chọn Responder: Partner (câu mẫu) hoặc Student (học sinh trả lời)',
+                        highlight: true,
+                    },
+                    {
+                        text: 'Upload audio Interlocutor (câu hỏi) và audio Partner (câu trả lời mẫu khi responder = Partner)',
+                    },
+                    { text: 'Nhập đáp án mong muốn (dùng khi responder = Student để giáo viên tham chiếu)' },
+                    { text: 'Thêm giải thích nếu cần' },
+                ], tips: [
+                    'Responder = Partner: tự động set is_example=true, points=0. Học sinh chỉ nghe, không ghi âm.',
+                    'Responder = Student: học sinh ghi âm trả lời. Cần nhập điểm >= 1.',
+                ] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 shadow-sm", children: _jsx(Users, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "D\u1EEF li\u1EC7u nh\u00F3m" }), isGrouped && (_jsxs(Badge, { variant: "outline", className: "border-teal-300 bg-teal-50 text-teal-700 text-xs", children: ["Nh\u00F3m ", currentGroupNumber] })), !isFirstInGroup && (_jsx(Badge, { variant: "outline", className: "border-gray-300 bg-gray-50 text-gray-500 text-xs", children: "Ch\u1EC9 \u0111\u1ECDc" }))] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: isFirstInGroup
+                                                ? 'Thông tin Partner và hình ảnh dùng chung cho toàn bộ nhóm câu hỏi'
+                                                : 'Được quản lý bởi câu hỏi đầu tiên trong nhóm' })] })] }) }), _jsx(CardContent, { className: "space-y-5", children: isFirstInGroup ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(User, { className: "h-4 w-4 text-teal-500" }), "T\u00EAn nh\u00E2n v\u1EADt Partner"] }), _jsx(Input, { ...form.register('partnerName'), placeholder: "VD: Bingo", className: "border-gray-200 focus:border-teal-300 focus:ring-teal-200" }), _jsx("p", { className: "text-xs text-gray-400", children: "T\u00EAn hi\u1EC3n th\u1ECB c\u1EE7a nh\u00E2n v\u1EADt \u1EA3o (Partner) \u2014 d\u00F9ng trong giao di\u1EC7n thi." })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(User, { className: "h-4 w-4 text-teal-500" }), "Avatar Partner"] }), _jsx(FileUpload, { id: "partner-avatar-url", label: "", accept: "image/*", value: watchedPartnerAvatarUrl || '', onChange: (url) => form.setValue('partnerAvatarUrl', url, { shouldValidate: true }), maxSize: 5, placeholder: "Upload \u1EA3nh avatar Partner (PNG, JPG, ...)", autoUpload: true, prefix: "speaking/partner-avatar" })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(Image, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh phase (t\u00F9y ch\u1ECDn)"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddImage, className: "gap-1.5 border-teal-200 text-teal-700 hover:bg-teal-50 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm h\u00ECnh"] })] }), watchedImages.length === 0 ? (_jsxs("div", { className: "rounded-lg border-2 border-dashed border-teal-200 bg-teal-50/40 py-6 text-center", children: [_jsx(Image, { className: "mx-auto h-8 w-8 text-teal-300 mb-2" }), _jsx("p", { className: "text-sm text-gray-400", children: "Kh\u00F4ng c\u00F3 h\u00ECnh \u1EA3nh \u2014 d\u00F9ng cho Part 2 phases c\u00F3 tranh" })] })) : (_jsx("div", { className: "space-y-3", children: watchedImages.map((img, index) => (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-xs font-semibold text-gray-600", children: ["H\u00ECnh ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-6 w-6 text-red-400 hover:text-red-600 hover:bg-red-50", onClick: () => handleRemoveImage(index), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }), _jsx(FileUpload, { id: `image-url-${index}`, label: "", accept: "image/*", value: img.url, onChange: (url) => handleImageChange(index, 'url', url), maxSize: 10, placeholder: "Upload h\u00ECnh \u1EA3nh", autoUpload: true, prefix: "speaking/phase-images" }), _jsx(Input, { value: img.label, onChange: (e) => handleImageChange(index, 'label', e.target.value), placeholder: "Nh\u00E3n h\u00ECnh (VD: Park, Bedroom, Library ...)", className: "border-gray-200 text-sm focus:border-teal-300" })] }, img.id))) }))] })] })) : (
+                        /* Read-only group data view for non-first questions */
+                        _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-gray-100 bg-gray-50 px-4 py-3", children: [_jsx(User, { className: "h-4 w-4 text-teal-500 flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-gray-500", children: "T\u00EAn Partner" }), _jsx("p", { className: "text-sm font-medium text-gray-800", children: groupData.partnerName || (_jsx("span", { className: "italic text-gray-400", children: "Ch\u01B0a \u0111\u1EB7t t\u00EAn" })) })] })] }), groupData.images && groupData.images.length > 0 && (_jsxs("div", { className: "rounded-lg border border-gray-100 bg-gray-50 px-4 py-3", children: [_jsxs("p", { className: "text-xs text-gray-500 mb-2", children: ["H\u00ECnh \u1EA3nh (", groupData.images.length, ")"] }), _jsx("div", { className: "flex flex-wrap gap-2", children: groupData.images.map((img) => (_jsx("span", { className: "inline-flex items-center rounded-full bg-teal-100 px-2 py-0.5 text-xs text-teal-700", children: img.label || img.id }, img.id))) })] }))] })) })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: `h-1 bg-gradient-to-r ${isPartnerResponder ? 'from-orange-400 to-amber-400' : 'from-indigo-400 to-violet-400'}` }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-9 w-9 items-center justify-center rounded-lg shadow-sm ${isPartnerResponder ? 'bg-gradient-to-br from-orange-500 to-amber-500' : 'bg-gradient-to-br from-indigo-500 to-violet-600'}`, children: _jsx(Mic, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "N\u1ED9i dung c\u00E2u h\u1ECFi" }), isPartnerResponder && (_jsx(Badge, { className: "bg-orange-100 text-orange-700 border-orange-200 border text-xs font-semibold", children: "C\u00E2u h\u1ECFi m\u1EABu (Example)" }))] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: isPartnerResponder
+                                                ? 'Partner trả lời — học sinh chỉ nghe, không ghi âm'
+                                                : 'Student trả lời — học sinh ghi âm câu trả lời' })] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: `rounded-xl border p-4 space-y-4 ${isPartnerResponder ? 'border-orange-200 bg-orange-50/40' : 'border-indigo-200 bg-indigo-50/40'}`, children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-base font-semibold text-gray-800", children: "Ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi" }), _jsx("p", { className: "text-sm text-gray-500", children: "Ai s\u1EBD tr\u1EA3 l\u1EDDi c\u00E2u h\u1ECFi n\u00E0y trong b\u00E0i thi?" })] }) }), _jsxs("div", { className: "flex gap-3", children: [_jsxs("button", { type: "button", onClick: () => form.setValue('responder', 'PARTNER', { shouldValidate: true }), className: `flex flex-1 items-center gap-3 rounded-xl border-2 p-3 transition-all ${isPartnerResponder
+                                                    ? 'border-orange-400 bg-orange-50 shadow-sm'
+                                                    : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsx("div", { className: `flex h-9 w-9 items-center justify-center rounded-full ${isPartnerResponder ? 'bg-orange-500' : 'bg-gray-200'}`, children: _jsx(User, { className: `h-4 w-4 ${isPartnerResponder ? 'text-white' : 'text-gray-500'}` }) }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: `text-sm font-semibold ${isPartnerResponder ? 'text-orange-800' : 'text-gray-700'}`, children: "Partner tr\u1EA3 l\u1EDDi" }), _jsx("p", { className: `text-xs ${isPartnerResponder ? 'text-orange-600' : 'text-gray-500'}`, children: "C\u00E2u m\u1EABu \u2014 is_example=true, points=0" })] })] }), _jsxs("button", { type: "button", onClick: () => form.setValue('responder', 'STUDENT', { shouldValidate: true }), className: `flex flex-1 items-center gap-3 rounded-xl border-2 p-3 transition-all ${!isPartnerResponder
+                                                    ? 'border-indigo-400 bg-indigo-50 shadow-sm'
+                                                    : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsx("div", { className: `flex h-9 w-9 items-center justify-center rounded-full ${!isPartnerResponder ? 'bg-indigo-500' : 'bg-gray-200'}`, children: _jsx(UserCheck, { className: `h-4 w-4 ${!isPartnerResponder ? 'text-white' : 'text-gray-500'}` }) }), _jsxs("div", { className: "text-left", children: [_jsx("p", { className: `text-sm font-semibold ${!isPartnerResponder ? 'text-indigo-800' : 'text-gray-700'}`, children: "Student tr\u1EA3 l\u1EDDi" }), _jsx("p", { className: `text-xs ${!isPartnerResponder ? 'text-indigo-600' : 'text-gray-500'}`, children: "C\u00E2u th\u1EF1c \u2014 h\u1ECDc sinh ghi \u00E2m" })] })] })] }), form.hasError('responder') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('responder') }))] }), _jsxs("div", { className: "w-full md:w-1/2", children: [_jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), disabled: isPartnerResponder, error: form.hasError('points') ? form.getFieldError('points') : undefined }), isPartnerResponder && (_jsx("p", { className: "mt-1.5 text-xs text-orange-600", children: "C\u00E2u h\u1ECFi m\u1EABu (Partner) lu\u00F4n c\u00F3 0 \u0111i\u1EC3m" }))] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(Volume2, { className: "h-4 w-4 text-blue-500" }), "Audio Interlocutor", _jsx("span", { className: "text-xs font-normal text-gray-400", children: "(t\u00F9y ch\u1ECDn)" })] }), _jsx(FileUpload, { id: "interlocutor-audio-url", label: "", accept: "audio/*", value: watchedInterlocutorAudioUrl || '', onChange: (url) => form.setValue('interlocutorAudioUrl', url, { shouldValidate: true }), maxSize: 20, placeholder: "Upload audio c\u00E2u h\u1ECFi c\u1EE7a Interlocutor (MP3, WAV...)", autoUpload: true, prefix: "speaking/interlocutor" }), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsx("p", { className: "text-xs text-blue-700", children: "Audio c\u1EE7a Interlocutor (ng\u01B0\u1EDDi h\u1ECFi). Ph\u00E1t tr\u01B0\u1EDBc khi Partner ho\u1EB7c Student tr\u1EA3 l\u1EDDi." })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(Volume2, { className: "h-4 w-4 text-orange-500" }), "Audio Partner", isPartnerResponder && _jsx("span", { className: "text-red-500", children: "*" }), !isPartnerResponder && (_jsx("span", { className: "text-xs font-normal text-gray-400", children: "(t\u00F9y ch\u1ECDn)" }))] }), _jsx(FileUpload, { id: "partner-audio-url", label: "", accept: "audio/*", value: watchedPartnerAudioUrl || '', onChange: (url) => form.setValue('partnerAudioUrl', url, { shouldValidate: true }), maxSize: 20, placeholder: "Upload audio tr\u1EA3 l\u1EDDi c\u1EE7a Partner (MP3, WAV...)", autoUpload: true, prefix: "speaking/partner" }), form.hasError('partnerAudioUrl') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('partnerAudioUrl') })), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-orange-100 bg-orange-50/60 px-3 py-2", children: [_jsx(Info, { className: "h-4 w-4 text-orange-500 mt-0.5 flex-shrink-0" }), _jsx("p", { className: "text-xs text-orange-700", children: isPartnerResponder
+                                                    ? 'Bắt buộc khi responder = Partner. Phát sau audio Interlocutor.'
+                                                    : 'Tùy chọn khi responder = Student — dùng cho Talk Together (Partner nói trước, Student trả lời sau).' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-700", children: [_jsx(MessageSquareText, { className: "h-4 w-4 text-gray-500" }), "Text c\u00E2u h\u1ECFi (t\u00F9y ch\u1ECDn)"] }), _jsx(Textarea, { ...form.register('questionText'), placeholder: "VD: What's your name? How old are you?", rows: 2, className: "min-h-[60px] border-gray-200 focus:border-indigo-300 focus:ring-indigo-200 resize-none" }), _jsx("p", { className: "text-xs text-gray-400", children: "Ch\u1EC9 hi\u1EC3n th\u1ECB cho admin/gi\u00E1o vi\u00EAn khi review. H\u1ECDc sinh ch\u1EC9 nghe audio." })] }), _jsxs("div", { className: "flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 px-4 py-3", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { className: "text-sm font-semibold text-gray-700", children: "C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng" }), _jsx("p", { className: "text-xs text-gray-400", children: "\u0110\u00E1nh d\u1EA5u c\u00E2u h\u1ECFi n\u00E0y l\u00E0 d\u1EF1 ph\u00F2ng (backup)" })] }), _jsx(Switch, { checked: watchedIsBackup, onCheckedChange: (checked) => form.setValue('isBackup', checked, { shouldValidate: true }) })] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-green-400 to-emerald-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-sm", children: _jsx(MessageSquareText, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "\u0110\u00E1p \u00E1n mong mu\u1ED1n" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-green-200 bg-green-50 px-2.5 py-0.5 text-xs font-medium text-green-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: isPartnerResponder
+                                                        ? 'Câu mẫu — đáp án dùng để ghi nhớ nội dung (không chấm điểm)'
+                                                        : 'Đáp án tham chiếu để giáo viên chấm thủ công' })] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddExpectedAnswer, className: "gap-1.5 border-green-200 text-green-700 hover:bg-green-50", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" }), _jsx("p", { className: "text-xs text-blue-700", children: isPartnerResponder
+                                            ? 'Câu hỏi mẫu: có thể nhập nội dung Partner nói để ghi nhớ. Không dùng để chấm điểm.'
+                                            : 'Giáo viên dùng các đáp án này làm tham chiếu khi chấm thủ công câu trả lời của học sinh.' })] }), watchedExpectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-green-100 text-xs font-semibold text-green-700 mt-1.5 flex-shrink-0", children: index + 1 }), _jsx(Textarea, { value: answer || '', onChange: (e) => handleExpectedAnswerChange(index, e.target.value), placeholder: index === 0
+                                            ? 'VD: My name is Bingo. I am 8 years old.'
+                                            : 'Thêm đáp án mẫu khác...', rows: 2, className: "min-h-[60px] border-gray-200 bg-white transition-all focus:border-green-300 focus:ring-green-200 resize-none flex-1" }), watchedExpectedAnswers.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "mt-1.5 h-7 w-7 text-red-400 hover:text-red-600 hover:bg-red-50 flex-shrink-0", onClick: () => handleRemoveExpectedAnswer(index), "aria-label": `Xóa đáp án ${index + 1}`, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }, index)))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch th\u00EAm v\u1EC1 c\u00E2u tr\u1EA3 l\u1EDDi k\u1EF3 v\u1ECDng, d\u00F9ng khi review k\u1EBFt qu\u1EA3." })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { value: watchedExplanation || '', onChange: (e) => form.setValue('explanation', e.target.value, { shouldValidate: true }), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng: 'My name is...' v\u00EC c\u00E2u h\u1ECFi \u0111ang h\u1ECFi v\u1EC1 t\u00EAn v\u00E0 tu\u1ED5i.", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] }), externalErrors && externalErrors.length > 0 && (_jsx("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4", children: _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "C\u1EA7n s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] }) }))] }));
+}

package/dist/components/questions/types/speaking-conversation/SpeakingConversationPreviewClient.js

@@ -1 +1,41 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Mic as i,Volume2 as t,CheckCircle2 as n,Play as l,Pause as a,MessageCircle as s,Users as d}from"lucide-react";import{Button as o}from"../../../../components/ui/button";import{usePresignedFileUrl as c,useAudioPreview as m}from"../../../../shared/lib/hooks";function g({audioUrl:i,label:n}){const{previewUrl:s}=c(i),{isPlaying:d,currentTime:g,duration:h,progressPercentage:u,handlePlayPause:x,handleProgressClick:b,formatTime:p}=m(s);return r("div",{className:"flex flex-col gap-1",children:[e("span",{className:"text-xs font-medium text-gray-500",children:n}),r("div",{className:"flex items-center gap-3 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200 px-4 py-2.5",children:[e(o,{variant:"outline",size:"icon",onClick:x,disabled:!s,className:"h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100",children:e(d?a:l,{className:"h-3.5 w-3.5"})}),r("div",{className:"text-muted-foreground min-w-[70px] text-xs",children:[p(g)," / ",p(h)]}),e("div",{className:"bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full",onClick:b,children:e("div",{className:"bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all",style:{width:`${u}%`}})}),e(t,{className:"h-4 w-4 text-indigo-400"})]})]})}function h({avatarUrl:i,name:t}){const{previewUrl:n}=c(i||"");return r("div",{className:"flex items-center gap-2",children:[n?e("img",{src:n,alt:t||"Partner",className:"h-10 w-10 rounded-full object-cover border-2 border-indigo-200"}):e("div",{className:"flex h-10 w-10 items-center justify-center rounded-full bg-indigo-100 border-2 border-indigo-200",children:e(d,{className:"h-5 w-5 text-indigo-500"})}),t&&e("span",{className:"text-sm font-medium text-gray-700",children:t})]})}function u({url:i,label:t}){const{previewUrl:n}=c(i);return r("div",{className:"flex flex-col items-center gap-1",children:[e("div",{className:"relative w-full aspect-square rounded-lg overflow-hidden border border-gray-200 bg-gray-50",children:n?e("img",{src:n,alt:t||"Image",className:"w-full h-full object-cover"}):e("div",{className:"w-full h-full flex items-center justify-center text-gray-300 text-xs",children:"Đang tải..."})}),t&&e("span",{className:"text-xs text-center text-gray-600 font-medium",children:t})]})}export function SpeakingConversationPreviewClient({questionData:t,isReviewMode:l=!0}){const a="PARTNER"===t.responder,d=t.images&&t.images.length>0,o=!d||t.images.length<=2?"grid-cols-2":3===t.images.length?"grid-cols-3":4===t.images.length?"grid-cols-4":"grid-cols-3";return r("div",{className:"space-y-4",children:[t.isBackup&&r("div",{className:"inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm",children:[e("span",{children:"🔄"})," Câu hỏi dự phòng"]}),r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:"flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 px-5 py-3",children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-white shadow-sm",children:e(s,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Hội thoại Speaking (KFS)"})]}),r("div",{className:"inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold "+(a?"bg-orange-100 text-orange-700 border border-orange-200":"bg-green-100 text-green-700 border border-green-200"),children:[e(i,{className:"h-3 w-3"}),a?"Bạn thi (ví dụ)":"Học sinh trả lời"]})]}),r("div",{className:"p-5 space-y-5",children:[(t.partnerName||t.partnerAvatarUrl)&&r("div",{className:"flex items-center gap-2 rounded-lg bg-orange-50 border border-orange-100 px-4 py-2.5",children:[e("span",{className:"text-xs font-medium text-orange-600",children:"Nhân vật bạn thi:"}),e(h,{avatarUrl:t.partnerAvatarUrl,name:t.partnerName})]}),t.questionText&&r("div",{className:"rounded-lg bg-blue-50 border border-blue-200 px-4 py-3",children:[e("p",{className:"text-xs font-medium text-blue-600 mb-1",children:"Nội dung câu hỏi:"}),e("p",{className:"text-sm font-semibold text-gray-800",children:t.questionText})]}),r("div",{className:"space-y-3",children:[t.interlocutorAudioUrl&&e(g,{audioUrl:t.interlocutorAudioUrl,label:"Audio người hỏi (Interlocutor)"}),t.partnerAudioUrl&&e(g,{audioUrl:t.partnerAudioUrl,label:"Audio bạn thi (Partner)"})]}),d&&r("div",{children:[e("p",{className:"text-xs font-medium text-gray-500 mb-2",children:"Hình ảnh thảo luận:"}),e("div",{className:`grid ${o} gap-3`,style:{maxWidth:"500px"},children:t.images.map(r=>e(u,{url:r.url,label:r.label},r.id))})]}),r("div",{className:"flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50",children:e(i,{className:"w-4 h-4 text-indigo-400"})}),e("p",{className:"text-xs text-gray-400",children:a?"Câu hỏi ví dụ — Bạn thi sẽ trả lời, học sinh lắng nghe":"Học sinh sẽ nhấn nút ghi âm và nói câu trả lời tại đây"})]}),l&&t.expectedAnswers&&t.expectedAnswers.length>0&&r("div",{className:"rounded-xl border border-green-200 bg-green-50/80 p-4",children:[r("div",{className:"flex items-center gap-2 mb-3",children:[e(n,{className:"h-4 w-4 text-green-600"}),e("h4",{className:"text-sm font-semibold text-green-800",children:"Các đáp án mong muốn"})]}),e("div",{className:"space-y-2",children:t.expectedAnswers.map((i,t)=>r("div",{className:"flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2",children:[e("span",{className:"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold",children:t+1}),e("span",{className:"text-sm text-green-800",children:i})]},t))})]})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mic, Volume2, CheckCircle2, Play, Pause, MessageCircle, Users } from 'lucide-react';
+import { Button } from '../../../../components/ui/button';
+import { usePresignedFileUrl, useAudioPreview } from '../../../../shared/lib/hooks';
+// ─── Sub-component: Audio Player ─────────────────────────────────────────────
+function ConversationAudioPlayer({ audioUrl, label }) {
+    const { previewUrl } = usePresignedFileUrl(audioUrl);
+    const { isPlaying, currentTime, duration, progressPercentage, handlePlayPause, handleProgressClick, formatTime } = useAudioPreview(previewUrl);
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium text-gray-500", children: label }), _jsxs("div", { className: "flex items-center gap-3 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 border border-indigo-200 px-4 py-2.5", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: handlePlayPause, disabled: !previewUrl, className: "h-8 w-8 border-indigo-300 text-indigo-600 hover:bg-indigo-100", children: isPlaying ? _jsx(Pause, { className: "h-3.5 w-3.5" }) : _jsx(Play, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "text-muted-foreground min-w-[70px] text-xs", children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsx("div", { className: "bg-indigo-200 relative h-1.5 flex-1 cursor-pointer rounded-full", onClick: handleProgressClick, children: _jsx("div", { className: "bg-indigo-500 absolute top-0 left-0 h-full rounded-full transition-all", style: { width: `${progressPercentage}%` } }) }), _jsx(Volume2, { className: "h-4 w-4 text-indigo-400" })] })] }));
+}
+// ─── Sub-component: Partner Avatar ───────────────────────────────────────────
+function PartnerAvatar({ avatarUrl, name }) {
+    const { previewUrl } = usePresignedFileUrl(avatarUrl || '');
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [previewUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            _jsx("img", { src: previewUrl, alt: name || 'Partner', className: "h-10 w-10 rounded-full object-cover border-2 border-indigo-200" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-indigo-100 border-2 border-indigo-200", children: _jsx(Users, { className: "h-5 w-5 text-indigo-500" }) })), name && _jsx("span", { className: "text-sm font-medium text-gray-700", children: name })] }));
+}
+// ─── Sub-component: Image Grid ────────────────────────────────────────────────
+function PreviewImageItem({ url, label }) {
+    const { previewUrl } = usePresignedFileUrl(url);
+    return (_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("div", { className: "relative w-full aspect-square rounded-lg overflow-hidden border border-gray-200 bg-gray-50", children: previewUrl ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                _jsx("img", { src: previewUrl, alt: label || 'Image', className: "w-full h-full object-cover" })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-gray-300 text-xs", children: "\u0110ang t\u1EA3i..." })) }), label && _jsx("span", { className: "text-xs text-center text-gray-600 font-medium", children: label })] }));
+}
+export function SpeakingConversationPreviewClient({ questionData, isReviewMode = true, }) {
+    const isPartnerQuestion = questionData.responder === 'PARTNER';
+    const hasImages = questionData.images && questionData.images.length > 0;
+    const gridCols = !hasImages || questionData.images.length <= 2
+        ? 'grid-cols-2'
+        : questionData.images.length === 3
+            ? 'grid-cols-3'
+            : questionData.images.length === 4
+                ? 'grid-cols-4'
+                : 'grid-cols-3';
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.isBackup && (_jsxs("div", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 text-xs font-bold shadow-sm", children: [_jsx("span", { children: "\uD83D\uDD04" }), " C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng"] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-blue-50 px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 text-white shadow-sm", children: _jsx(MessageCircle, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "H\u1ED9i tho\u1EA1i Speaking (KFS)" })] }), _jsxs("div", { className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold ${isPartnerQuestion
+                                    ? 'bg-orange-100 text-orange-700 border border-orange-200'
+                                    : 'bg-green-100 text-green-700 border border-green-200'}`, children: [_jsx(Mic, { className: "h-3 w-3" }), isPartnerQuestion ? 'Bạn thi (ví dụ)' : 'Học sinh trả lời'] })] }), _jsxs("div", { className: "p-5 space-y-5", children: [(questionData.partnerName || questionData.partnerAvatarUrl) && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-orange-50 border border-orange-100 px-4 py-2.5", children: [_jsx("span", { className: "text-xs font-medium text-orange-600", children: "Nh\u00E2n v\u1EADt b\u1EA1n thi:" }), _jsx(PartnerAvatar, { avatarUrl: questionData.partnerAvatarUrl, name: questionData.partnerName })] })), questionData.questionText && (_jsxs("div", { className: "rounded-lg bg-blue-50 border border-blue-200 px-4 py-3", children: [_jsx("p", { className: "text-xs font-medium text-blue-600 mb-1", children: "N\u1ED9i dung c\u00E2u h\u1ECFi:" }), _jsx("p", { className: "text-sm font-semibold text-gray-800", children: questionData.questionText })] })), _jsxs("div", { className: "space-y-3", children: [questionData.interlocutorAudioUrl && (_jsx(ConversationAudioPlayer, { audioUrl: questionData.interlocutorAudioUrl, label: "Audio ng\u01B0\u1EDDi h\u1ECFi (Interlocutor)" })), questionData.partnerAudioUrl && (_jsx(ConversationAudioPlayer, { audioUrl: questionData.partnerAudioUrl, label: "Audio b\u1EA1n thi (Partner)" }))] }), hasImages && (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-gray-500 mb-2", children: "H\u00ECnh \u1EA3nh th\u1EA3o lu\u1EADn:" }), _jsx("div", { className: `grid ${gridCols} gap-3`, style: { maxWidth: '500px' }, children: questionData.images.map((img) => (_jsx(PreviewImageItem, { url: img.url, label: img.label }, img.id))) })] })), _jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50/80 px-4 py-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-100/50", children: _jsx(Mic, { className: "w-4 h-4 text-indigo-400" }) }), _jsx("p", { className: "text-xs text-gray-400", children: isPartnerQuestion
+                                            ? 'Câu hỏi ví dụ — Bạn thi sẽ trả lời, học sinh lắng nghe'
+                                            : 'Học sinh sẽ nhấn nút ghi âm và nói câu trả lời tại đây' })] }), isReviewMode && questionData.expectedAnswers && questionData.expectedAnswers.length > 0 && (_jsxs("div", { className: "rounded-xl border border-green-200 bg-green-50/80 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-green-600" }), _jsx("h4", { className: "text-sm font-semibold text-green-800", children: "C\u00E1c \u0111\u00E1p \u00E1n mong mu\u1ED1n" })] }), _jsx("div", { className: "space-y-2", children: questionData.expectedAnswers.map((answer, index) => (_jsxs("div", { className: "flex items-center gap-2.5 rounded-lg bg-white/70 border border-green-100 px-3 py-2", children: [_jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-100 text-green-700 text-xs font-bold", children: index + 1 }), _jsx("span", { className: "text-sm text-green-800", children: answer })] }, index))) })] }))] })] })] }));
+}