กำลังโหลดระบบ...
Literature Review
`; const win = window.open("", "_blank"); if (win) { win.document.write(html); win.document.close(); } } // ── Main Component ───────────────────────────────────────────────────────────── function ResearchStep2() { const [phase, setPhase] = useState("setup"); const [ch1Context, setCh1Context] = useState({ researchTitle: "", objectives: "", hypothesis: "" }); const [teacherContext, setTeacherContext] = useState(""); const [baseContent, setBaseContent] = useState([]); const [currentStep, setCurrentStep] = useState(0); const [confirmed, setConfirmed] = useState({}); const [draft, setDraft] = useState(""); const [isGenerating, setIsGenerating] = useState(false); const [isDownloading, setIsDownloading] = useState(null); const [error, setError] = useState(null); const [copied, setCopied] = useState(null); const textareaRef = useRef(null); useEffect(() => { if (!isGenerating && textareaRef.current) textareaRef.current.focus(); }, [isGenerating, currentStep]); const callAI = async (stepIdx, base, saved) => { const step = STEPS[stepIdx]; const ctx = { ...ch1Context, teacherContext, ...saved }; const res = await fetch("/research/api/ai-proxy.php", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ model: "claude-sonnet-4-20250514", max_tokens: 2000, system: BASE_SYSTEM, messages: [{ role: "user", content: [...base, { type: "text", text: step.prompt(ctx) }] }] }) }); if (!res.ok) throw new Error(`API Error ${res.status}`); const data = await res.json(); return data.content?.map(b => b.text || "").join("").trim() || ""; }; const startWizard = async () => { if (!ch1Context.researchTitle.trim()) { setError("กรุณากรอกชื่องานวิจัยจากบทที่ 1 ก่อน"); return; } setIsGenerating(true); setError(null); try { const base = [{ type: "text", text: `ชื่องานวิจัย: ${ch1Context.researchTitle}\nวัตถุประสงค์: ${ch1Context.objectives}\nสมมติฐาน: ${ch1Context.hypothesis}\nบริบทครู: ${teacherContext}` }]; setBaseContent(base); setDraft(await callAI(0, base, {})); setCurrentStep(0); setConfirmed({}); setPhase("wizard"); } catch (e) { setError(e.message); } finally { setIsGenerating(false); } }; const saveAndNext = async () => { const newConfirmed = { ...confirmed, [STEPS[currentStep].key]: draft }; setConfirmed(newConfirmed); const nextIdx = currentStep + 1; if (nextIdx >= STEPS.length) { setPhase("done"); return; } setIsGenerating(true); setError(null); setDraft(""); try { setDraft(await callAI(nextIdx, baseContent, newConfirmed)); setCurrentStep(nextIdx); } catch (e) { setError(e.message); setCurrentStep(nextIdx); } finally { setIsGenerating(false); } }; const regenerate = async () => { setIsGenerating(true); setError(null); setDraft(""); try { setDraft(await callAI(currentStep, baseContent, confirmed)); } catch (e) { setError(e.message); } finally { setIsGenerating(false); } }; const editConfirmed = idx => { if (!confirmed[STEPS[idx].key]) return; setCurrentStep(idx); setDraft(confirmed[STEPS[idx].key]); setPhase("wizard"); }; const copyText = (key, text) => { navigator.clipboard.writeText(text); setCopied(key); setTimeout(() => setCopied(null), 2000); }; const copyAll = () => { const txt = "บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง\n" + "═".repeat(50) + "\n\n" + STEPS.map(s => `${s.icon} ${s.label}\n${"─".repeat(40)}\n${confirmed[s.key] || ""}`).join("\n\n"); navigator.clipboard.writeText(txt); setCopied("all"); setTimeout(() => setCopied(null), 2000); }; const handleDOCX = async () => { setIsDownloading("docx"); setError(null); try { await downloadAsDOCX(confirmed, ch1Context); } catch (e) { setError(e.message); } finally { setIsDownloading(null); } }; // ─── CSS ────────────────────────────────────────────────────────────────────── return /*#__PURE__*/React.createElement("div", { style: { fontFamily: "'Sarabun','Noto Sans Thai',sans-serif", minHeight: "100vh", background: "#0d1b2a", color: "#ddeee8", padding: "20px 14px" } }, /*#__PURE__*/React.createElement("style", null, ` @import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&family=Chakra+Petch:wght@500;600;700&display=swap'); *{box-sizing:border-box} ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#1a3a6a;border-radius:3px} .card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:22px} .card-active{background:rgba(255,255,255,.04);border:1px solid rgba(126,184,232,.38);border-radius:18px;padding:22px;box-shadow:0 0 0 1px rgba(126,184,232,.08)} .btn-start{background:linear-gradient(135deg,#1e4d8c,#7a3b8c);border:none;color:#fff;padding:15px 42px;border-radius:12px;font-size:16px;font-family:'Sarabun',sans-serif;font-weight:700;cursor:pointer;transition:all .25s} .btn-start:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 28px rgba(30,77,140,.5)} .btn-start:disabled{opacity:.45;cursor:not-allowed} .btn-save{background:linear-gradient(135deg,#1e4d8c,#1a6b5c);border:none;color:#fff;padding:12px 26px;border-radius:11px;font-size:15px;font-family:'Sarabun',sans-serif;font-weight:700;cursor:pointer;transition:all .25s} .btn-save:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(30,77,140,.5)} .btn-save:disabled{opacity:.4;cursor:not-allowed} .btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#90aec8;padding:9px 18px;border-radius:9px;font-size:13px;font-family:'Sarabun',sans-serif;cursor:pointer;transition:all .2s} .btn-ghost:hover:not(:disabled){background:rgba(126,184,232,.12);color:#7eb8e8;border-color:rgba(126,184,232,.35)} .btn-ghost:disabled{opacity:.35;cursor:not-allowed} .btn-docx{background:linear-gradient(135deg,#1a3a8c,#2d6bb5);border:none;color:#fff;padding:12px 22px;border-radius:11px;font-size:14px;font-family:'Sarabun',sans-serif;font-weight:700;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:7px} .btn-docx:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 18px rgba(29,58,140,.5)} .btn-docx:disabled{opacity:.4;cursor:not-allowed} .btn-pdf{background:linear-gradient(135deg,#7a1a1a,#b03020);border:none;color:#fff;padding:12px 22px;border-radius:11px;font-size:14px;font-family:'Sarabun',sans-serif;font-weight:700;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:7px} .btn-pdf:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(122,26,26,.5)} .input-field{width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(126,184,232,.22);color:#ddeee8;border-radius:12px;padding:12px 14px;font-family:'Sarabun',sans-serif;font-size:14px;outline:none;transition:border .2s} .input-field:focus{border-color:rgba(126,184,232,.55);box-shadow:0 0 0 3px rgba(126,184,232,.07)} .edit-area{width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(126,184,232,.22);color:#ddeee8;border-radius:12px;padding:16px;font-family:'Sarabun',sans-serif;font-size:14.5px;line-height:2;resize:vertical;outline:none;transition:border .2s;min-height:160px} .edit-area:focus{border-color:rgba(126,184,232,.55);box-shadow:0 0 0 3px rgba(126,184,232,.07)} .confirmed-card{background:rgba(126,184,232,.04);border:1px solid rgba(126,184,232,.16);border-radius:12px;padding:13px 16px;cursor:pointer;transition:all .2s} .confirmed-card:hover{background:rgba(126,184,232,.09);border-color:rgba(126,184,232,.3)} .hint-box{font-size:12px;color:#4a6080;background:rgba(255,255,255,.02);border-left:3px solid rgba(126,184,232,.35);border-radius:0 8px 8px 0;padding:8px 12px;margin-bottom:12px} .shine2{background:linear-gradient(135deg,#7eb8e8,#c4a0e8,#3dd6b5);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .pulse{animation:pulse 1.4s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} textarea::placeholder,.input-field::placeholder{color:#2a3e58} .download-bar{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 20px} `), /*#__PURE__*/React.createElement("div", { style: { maxWidth: 820, margin: "0 auto 22px", textAlign: "center" } }, /*#__PURE__*/React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 8, marginBottom: 8 } }, /*#__PURE__*/React.createElement("a", { href: "#", style: { background: "rgba(61,214,181,.1)", border: "1px solid rgba(61,214,181,.25)", borderRadius: 20, padding: "4px 14px", fontSize: 11, color: "#3dd6b5", textDecoration: "none", fontFamily: "'Chakra Petch',sans-serif" } }, "\u2190 \u0E1A\u0E17\u0E17\u0E35\u0E48 1"), /*#__PURE__*/React.createElement("div", { style: { background: "rgba(126,184,232,.15)", border: "1px solid rgba(126,184,232,.3)", borderRadius: 20, padding: "4px 14px", fontSize: 11, color: "#7eb8e8", fontFamily: "'Chakra Petch',sans-serif" } }, "\u0E1A\u0E17\u0E17\u0E35\u0E48 2"), /*#__PURE__*/React.createElement("div", { style: { background: "rgba(255,255,255,.05)", border: "1px solid rgba(255,255,255,.1)", borderRadius: 20, padding: "4px 14px", fontSize: 11, color: "#3a5060", fontFamily: "'Chakra Petch',sans-serif" } }, "\u0E1A\u0E17\u0E17\u0E35\u0E48 3 \u2192")), /*#__PURE__*/React.createElement("h1", { className: "shine2", style: { fontFamily: "'Chakra Petch',sans-serif", fontSize: "clamp(18px,3.5vw,27px)", fontWeight: 700, margin: "0 0 5px" } }, "\u0E1A\u0E17\u0E17\u0E35\u0E48 2 \xB7 \u0E40\u0E2D\u0E01\u0E2A\u0E32\u0E23\u0E41\u0E25\u0E30\u0E07\u0E32\u0E19\u0E27\u0E34\u0E08\u0E31\u0E22\u0E17\u0E35\u0E48\u0E40\u0E01\u0E35\u0E48\u0E22\u0E27\u0E02\u0E49\u0E2D\u0E07"), /*#__PURE__*/React.createElement("p", { style: { color: "#3a5060", fontSize: 13, margin: 0 } }, "Literature Review \xB7 AI \u0E2A\u0E23\u0E49\u0E32\u0E07\u0E17\u0E35\u0E25\u0E30\u0E2B\u0E31\u0E27\u0E02\u0E49\u0E2D \u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E2D\u0E49\u0E32\u0E07\u0E2D\u0E34\u0E07 APA 7th Edition")), /*#__PURE__*/React.createElement("div", { style: { maxWidth: 820, margin: "0 auto", display: "flex", flexDirection: "column", gap: 16 } }, phase === "setup" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepBar, { steps: STEPS, current: -1, confirmed: {}, accentColor: "#7eb8e8" }), /*#__PURE__*/React.createElement("div", { className: "card" }, /*#__PURE__*/React.createElement(SectionLabel, { num: "01", color: "#7eb8e8", title: "\u0E19\u0E33\u0E40\u0E02\u0E49\u0E32\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E08\u0E32\u0E01\u0E1A\u0E17\u0E17\u0E35\u0E48 1" }), /*#__PURE__*/React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 10 } }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", { style: { fontSize: 12, color: "#7eb8e8", marginBottom: 5, display: "block" } }, "\u0E0A\u0E37\u0E48\u0E2D\u0E07\u0E32\u0E19\u0E27\u0E34\u0E08\u0E31\u0E22 ", /*#__PURE__*/React.createElement("span", { style: { color: "#ff8080" } }, "*")), /*#__PURE__*/React.createElement("input", { className: "input-field", value: ch1Context.researchTitle, onChange: e => setCh1Context(p => ({ ...p, researchTitle: e.target.value })), placeholder: "\u0E27\u0E32\u0E07\u0E0A\u0E37\u0E48\u0E2D\u0E07\u0E32\u0E19\u0E27\u0E34\u0E08\u0E31\u0E22\u0E08\u0E32\u0E01\u0E1A\u0E17\u0E17\u0E35\u0E48 1 \u0E17\u0E35\u0E48\u0E19\u0E35\u0E48..." })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", { style: { fontSize: 12, color: "#7eb8e8", marginBottom: 5, display: "block" } }, "\u0E27\u0E31\u0E15\u0E16\u0E38\u0E1B\u0E23\u0E30\u0E2A\u0E07\u0E04\u0E4C\u0E01\u0E32\u0E23\u0E27\u0E34\u0E08\u0E31\u0E22"), /*#__PURE__*/React.createElement("textarea", { className: "edit-area", rows: 3, value: ch1Context.objectives, onChange: e => setCh1Context(p => ({ ...p, objectives: e.target.value })), placeholder: "\u0E27\u0E32\u0E07\u0E27\u0E31\u0E15\u0E16\u0E38\u0E1B\u0E23\u0E30\u0E2A\u0E07\u0E04\u0E4C\u0E08\u0E32\u0E01\u0E1A\u0E17\u0E17\u0E35\u0E48 1...", style: { minHeight: 80 } })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", { style: { fontSize: 12, color: "#7eb8e8", marginBottom: 5, display: "block" } }, "\u0E2A\u0E21\u0E21\u0E15\u0E34\u0E10\u0E32\u0E19\u0E01\u0E32\u0E23\u0E27\u0E34\u0E08\u0E31\u0E22"), /*#__PURE__*/React.createElement("textarea", { className: "edit-area", rows: 2, value: ch1Context.hypothesis, onChange: e => setCh1Context(p => ({ ...p, hypothesis: e.target.value })), placeholder: "\u0E27\u0E32\u0E07\u0E2A\u0E21\u0E21\u0E15\u0E34\u0E10\u0E32\u0E19\u0E08\u0E32\u0E01\u0E1A\u0E17\u0E17\u0E35\u0E48 1...", style: { minHeight: 70 } })))), /*#__PURE__*/React.createElement("div", { className: "card" }, /*#__PURE__*/React.createElement(SectionLabel, { num: "02", color: "#c4a0e8", title: "\u0E1A\u0E23\u0E34\u0E1A\u0E17\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21\u0E08\u0E32\u0E01\u0E04\u0E23\u0E39", sub: "\u2014 \u0E2A\u0E33\u0E04\u0E31\u0E0D\u0E21\u0E32\u0E01" }), /*#__PURE__*/React.createElement("textarea", { className: "edit-area", rows: 5, value: teacherContext, onChange: e => setTeacherContext(e.target.value), placeholder: `ระบุรายละเอียดที่ AI ควรรู้ เช่น\n• วิชา: ภาษาไทย ระดับ ป.5 หน่วยการอ่านจับใจความ\n• นวัตกรรม: บัตรคำถาม 5W1H ใช้ร่วมกับการเรียนรู้แบบร่วมมือ (Cooperative Learning)\n• กลุ่มตัวอย่าง: นักเรียน ป.5/2 จำนวน 32 คน\n• ทฤษฎีที่เกี่ยวข้อง: ทฤษฎีการเรียนรู้แบบร่วมมือ (Vygotsky), BBL` })), error && /*#__PURE__*/React.createElement("p", { style: { color: "#ff8080", fontSize: 13, textAlign: "center" } }, "\u26A0\uFE0F ", error), /*#__PURE__*/React.createElement("div", { style: { textAlign: "center" } }, /*#__PURE__*/React.createElement("button", { className: "btn-start", onClick: startWizard, disabled: isGenerating }, isGenerating ? "⏳ กำลังเตรียม AI..." : "🔍 เริ่มสร้างบทที่ 2"), /*#__PURE__*/React.createElement("p", { style: { color: "#2a3e58", fontSize: 11.5, marginTop: 8 } }, "AI \u0E08\u0E30\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E17\u0E35\u0E25\u0E30\u0E2B\u0E31\u0E27\u0E02\u0E49\u0E2D \u0E04\u0E23\u0E39\u0E41\u0E01\u0E49\u0E44\u0E02+\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01 \u2192 AI \u0E43\u0E0A\u0E49\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E2B\u0E31\u0E27\u0E02\u0E49\u0E2D\u0E16\u0E31\u0E14\u0E44\u0E1B"))), phase === "wizard" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepBar, { steps: STEPS, current: currentStep, confirmed: confirmed, accentColor: "#7eb8e8", onClickStep: editConfirmed }), /*#__PURE__*/React.createElement("div", { style: { background: "rgba(126,184,232,.06)", border: "1px solid rgba(126,184,232,.15)", borderRadius: 10, padding: "10px 16px", fontSize: 13, color: "#7eb8e8" } }, "\uD83D\uDCCC ", /*#__PURE__*/React.createElement("strong", null, "\u0E07\u0E32\u0E19\u0E27\u0E34\u0E08\u0E31\u0E22:"), " ", /*#__PURE__*/React.createElement("span", { style: { color: "#b0d4f0" } }, ch1Context.researchTitle)), STEPS.slice(0, currentStep).map((s, i) => confirmed[s.key] && /*#__PURE__*/React.createElement("div", { key: s.key, className: "confirmed-card", onClick: () => editConfirmed(i) }, /*#__PURE__*/React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 } }, /*#__PURE__*/React.createElement("div", { style: { fontSize: 12, color: "#7eb8e8", display: "flex", alignItems: "center", gap: 7 } }, /*#__PURE__*/React.createElement("span", { style: { background: "rgba(126,184,232,.13)", borderRadius: 6, padding: "2px 8px" } }, "\u2713 \u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E41\u0E25\u0E49\u0E27"), /*#__PURE__*/React.createElement("span", null, s.icon, " ", s.label)), /*#__PURE__*/React.createElement("span", { style: { fontSize: 11, color: "#7eb8e8" } }, "\u270F\uFE0F \u0E41\u0E01\u0E49\u0E44\u0E02")), /*#__PURE__*/React.createElement("p", { style: { margin: 0, fontSize: 12.5, color: "#4a6080", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, confirmed[s.key].slice(0, 130), confirmed[s.key].length > 130 ? "..." : ""))), /*#__PURE__*/React.createElement("div", { className: "card-active" }, /*#__PURE__*/React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8, flexWrap: "wrap", gap: 8 } }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", { style: { fontSize: 11, color: "#7eb8e8", marginBottom: 4, fontFamily: "'Chakra Petch',sans-serif", letterSpacing: 1 } }, "\u0E2B\u0E31\u0E27\u0E02\u0E49\u0E2D\u0E17\u0E35\u0E48 ", currentStep + 1, " \u0E08\u0E32\u0E01 ", STEPS.length), /*#__PURE__*/React.createElement("h2", { style: { margin: 0, fontSize: 16, color: "#e8f4f0", display: "flex", alignItems: "center", gap: 8 } }, STEPS[currentStep].icon, " ", STEPS[currentStep].label)), /*#__PURE__*/React.createElement("button", { className: "btn-ghost", onClick: regenerate, disabled: isGenerating, style: { fontSize: 12 } }, "\uD83D\uDD04 \u0E2A\u0E23\u0E49\u0E32\u0E07\u0E43\u0E2B\u0E21\u0E48")), /*#__PURE__*/React.createElement("div", { className: "hint-box" }, "\uD83D\uDCA1 ", STEPS[currentStep].hint), isGenerating ? /*#__PURE__*/React.createElement("div", { style: { background: "rgba(0,0,0,.18)", borderRadius: 12, minHeight: 160, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10, padding: 20 } }, /*#__PURE__*/React.createElement("div", { className: "pulse", style: { fontSize: 30 } }, "\uD83E\uDD16"), /*#__PURE__*/React.createElement("p", { className: "pulse", style: { color: "#7eb8e8", fontSize: 14, margin: 0, textAlign: "center" } }, "AI \u0E01\u0E33\u0E25\u0E31\u0E07\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E41\u0E25\u0E30\u0E2A\u0E23\u0E49\u0E32\u0E07 \"", STEPS[currentStep].label, "\"", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", { style: { fontSize: 12, color: "#2a3e58" } }, "\u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E2D\u0E49\u0E32\u0E07\u0E2D\u0E34\u0E07 APA 7th Edition"))) : /*#__PURE__*/React.createElement("textarea", { ref: textareaRef, className: "edit-area", value: draft, onChange: e => setDraft(e.target.value), rows: 10, placeholder: STEPS[currentStep].placeholder }), error && /*#__PURE__*/React.createElement("p", { style: { color: "#ff8080", fontSize: 12.5, margin: "8px 0 0" } }, "\u26A0\uFE0F ", error), /*#__PURE__*/React.createElement("div", { style: { marginTop: 14, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 10 } }, /*#__PURE__*/React.createElement("button", { className: "btn-ghost", onClick: () => copyText("cur", draft), disabled: !draft, style: { fontSize: 12 } }, copied === "cur" ? "✓ คัดลอกแล้ว" : "📋 คัดลอก"), /*#__PURE__*/React.createElement("button", { className: "btn-save", onClick: saveAndNext, disabled: isGenerating || !draft.trim() }, currentStep < STEPS.length - 1 ? "✅ บันทึก และให้ AI สร้างหัวข้อถัดไป →" : "✅ บันทึกและสรุปบทที่ 2")))), phase === "done" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { style: { textAlign: "center", padding: "8px 0 4px" } }, /*#__PURE__*/React.createElement("div", { style: { fontSize: 38, marginBottom: 6 } }, "\uD83C\uDF93"), /*#__PURE__*/React.createElement("h2", { className: "shine2", style: { fontFamily: "'Chakra Petch',sans-serif", fontSize: 22, fontWeight: 700, margin: "0 0 4px" } }, "\u0E1A\u0E17\u0E17\u0E35\u0E48 2 \u0E2A\u0E21\u0E1A\u0E39\u0E23\u0E13\u0E4C!"), /*#__PURE__*/React.createElement("p", { style: { color: "#3a5060", fontSize: 13, margin: 0 } }, ch1Context.researchTitle)), /*#__PURE__*/React.createElement(StepBar, { steps: STEPS, current: STEPS.length, confirmed: confirmed, accentColor: "#7eb8e8", onClickStep: editConfirmed }), /*#__PURE__*/React.createElement("div", { className: "download-bar" }, /*#__PURE__*/React.createElement("div", { style: { fontSize: 13, color: "#7eb8e8", marginBottom: 12, fontFamily: "'Chakra Petch',sans-serif", letterSpacing: 1 } }, "\uD83D\uDCE5 \u0E14\u0E32\u0E27\u0E19\u0E4C\u0E42\u0E2B\u0E25\u0E14\u0E40\u0E2D\u0E01\u0E2A\u0E32\u0E23 \u2014 \u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E40\u0E02\u0E49\u0E32\u0E23\u0E39\u0E1B\u0E40\u0E25\u0E48\u0E21 A4"), /*#__PURE__*/React.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center" } }, /*#__PURE__*/React.createElement("button", { className: "btn-docx", onClick: handleDOCX, disabled: isDownloading === "docx" }, isDownloading === "docx" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { className: "pulse" }, "\u23F3"), " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2A\u0E23\u0E49\u0E32\u0E07...") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "\uD83D\uDCDD"), " \u0E14\u0E32\u0E27\u0E19\u0E4C\u0E42\u0E2B\u0E25\u0E14 Word (.docx)")), /*#__PURE__*/React.createElement("button", { className: "btn-pdf", onClick: () => downloadAsPDF(confirmed, ch1Context) }, /*#__PURE__*/React.createElement("span", null, "\uD83D\uDCC4"), " \u0E1E\u0E34\u0E21\u0E1E\u0E4C / \u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01 PDF"), /*#__PURE__*/React.createElement("button", { className: "btn-ghost", onClick: copyAll, style: { marginLeft: "auto" } }, copied === "all" ? "✓ คัดลอกแล้ว" : "📋 คัดลอกทั้งหมด"))), error && /*#__PURE__*/React.createElement("p", { style: { color: "#ff8080", fontSize: 13 } }, "\u26A0\uFE0F ", error), STEPS.map(s => /*#__PURE__*/React.createElement("div", { key: s.key, style: { background: "rgba(255,255,255,.03)", border: "1px solid rgba(255,255,255,.08)", borderRadius: 16, overflow: "hidden" } }, /*#__PURE__*/React.createElement("div", { style: { background: "rgba(126,184,232,.06)", padding: "11px 18px", display: "flex", justifyContent: "space-between", alignItems: "center" } }, /*#__PURE__*/React.createElement("h3", { style: { margin: 0, fontSize: 14.5, color: "#7eb8e8", display: "flex", alignItems: "center", gap: 8 } }, s.icon, " ", s.label), /*#__PURE__*/React.createElement("div", { style: { display: "flex", gap: 7 } }, /*#__PURE__*/React.createElement("button", { className: "btn-ghost", style: { fontSize: 11, padding: "4px 11px" }, onClick: () => editConfirmed(STEPS.indexOf(s)) }, "\u270F\uFE0F \u0E41\u0E01\u0E49\u0E44\u0E02"), /*#__PURE__*/React.createElement("button", { className: "btn-ghost", style: { fontSize: 11, padding: "4px 11px" }, onClick: () => copyText(s.key, confirmed[s.key] || "") }, copied === s.key ? "✓" : "📋"))), /*#__PURE__*/React.createElement("div", { style: { padding: "14px 18px", fontSize: 14, lineHeight: 2, color: "#b0c8d8", whiteSpace: "pre-wrap" } }, confirmed[s.key]))), /*#__PURE__*/React.createElement("div", { style: { display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" } }, /*#__PURE__*/React.createElement("button", { className: "btn-ghost", onClick: () => { setPhase("setup"); setConfirmed({}); setCurrentStep(0); setDraft(""); } }, "\uD83D\uDD01 \u0E40\u0E23\u0E34\u0E48\u0E21\u0E43\u0E2B\u0E21\u0E48")), /*#__PURE__*/React.createElement("div", { style: { background: "linear-gradient(135deg,rgba(122,59,140,.12),rgba(30,77,140,.12))", border: "1px solid rgba(196,160,232,.18)", borderRadius: 14, padding: "15px 20px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 10 } }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", { style: { fontSize: 11, color: "#c4a0e8", marginBottom: 3 } }, "\u0E02\u0E31\u0E49\u0E19\u0E15\u0E2D\u0E19\u0E16\u0E31\u0E14\u0E44\u0E1B"), /*#__PURE__*/React.createElement("div", { style: { fontSize: 14, color: "#d8c0f0" } }, "\uD83D\uDD2C \u0E1A\u0E17\u0E17\u0E35\u0E48 3 \xB7 \u0E27\u0E34\u0E18\u0E35\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23\u0E27\u0E34\u0E08\u0E31\u0E22")), /*#__PURE__*/React.createElement("span", { style: { fontSize: 20, opacity: .3 } }, "\u2192")))), /*#__PURE__*/React.createElement("p", { style: { textAlign: "center", color: "#162028", fontSize: 11, marginTop: 24 } }, "Powered by Claude AI \xB7 \u0E23\u0E30\u0E1A\u0E1A\u0E27\u0E34\u0E08\u0E31\u0E22\u0E43\u0E19\u0E0A\u0E31\u0E49\u0E19\u0E40\u0E23\u0E35\u0E22\u0E19 \xA9 2568")); } function SectionLabel({ num, color, title, sub }) { return /*#__PURE__*/React.createElement("h2", { style: { fontFamily: "'Chakra Petch',sans-serif", fontSize: 14.5, color, margin: "0 0 14px", display: "flex", alignItems: "center", gap: 9, flexWrap: "wrap" } }, /*#__PURE__*/React.createElement("span", { style: { background: `${color}20`, borderRadius: 7, padding: "3px 9px", fontSize: 11 } }, num), title, sub && /*#__PURE__*/React.createElement("span", { style: { fontSize: 11, color: "#2a3e58", fontFamily: "'Sarabun',sans-serif", fontWeight: 400 } }, sub)); } function StepBar({ steps, current, confirmed, accentColor = "#7eb8e8", onClickStep }) { return /*#__PURE__*/React.createElement("div", { style: { display: "flex", alignItems: "center", overflowX: "auto", paddingBottom: 2 } }, steps.map((s, i) => { const done = !!confirmed[s.key], active = i === current; return /*#__PURE__*/React.createElement("div", { key: s.key, style: { display: "flex", alignItems: "center", flex: i < steps.length - 1 ? 1 : "none", minWidth: 0 } }, /*#__PURE__*/React.createElement("div", { onClick: () => done && onClickStep?.(i), title: s.label, style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 3, cursor: done ? "pointer" : "default", flexShrink: 0 } }, /*#__PURE__*/React.createElement("div", { style: { width: 30, height: 30, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700, fontFamily: "'Chakra Petch',sans-serif", transition: "all .3s", background: done ? `${accentColor}22` : active ? `${accentColor}18` : "rgba(255,255,255,.04)", border: `2px solid ${done || active ? accentColor : "rgba(255,255,255,.1)"}`, color: done || active ? accentColor : "#2a3e58" } }, done ? "✓" : i + 1), /*#__PURE__*/React.createElement("span", { style: { fontSize: 9, color: done || active ? accentColor : "#2a3e58", whiteSpace: "nowrap" } }, s.icon)), i < steps.length - 1 && /*#__PURE__*/React.createElement("div", { style: { flex: 1, height: 2, background: done ? `${accentColor}40` : "rgba(255,255,255,.06)", margin: "0 3px", marginBottom: 12, transition: "background .4s" } })); })); } // ── Mount ───────────────────────────────────────────────────────── (function() { try { const rootEl = document.getElementById('root'); if (!rootEl) { console.error('No #root'); return; } ReactDOM.createRoot(rootEl).render(React.createElement(ResearchStep2)); const loader = document.getElementById('loading'); if (loader) { loader.style.opacity = '0'; setTimeout(() => loader.remove(), 500); } } catch(e) { console.error('Mount error:', e); const loader = document.getElementById('loading'); if (loader) loader.innerHTML = '

⚠️ เกิดข้อผิดพลาด

' + e.message + '

'; } })();