กำลังโหลดระบบ...
บทนำ
`; const win = window.open("", "_blank"); if (win) { win.document.write(html); win.document.close(); } } // ── Main Component ──────────────────────────────────────────────────────────── function ResearchStep1() { const [phase, setPhase] = useState("setup"); const [files, setFiles] = useState([]); const [isDragging, setIsDragging] = useState(false); const [baseContext, setBaseContext] = 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 fileInputRef = useRef(null); const textareaRef = useRef(null); useEffect(() => { if (!isGenerating && textareaRef.current) textareaRef.current.focus(); }, [isGenerating, currentStep]); const readB64 = f => new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result.split(",")[1]); r.onerror = rej; r.readAsDataURL(f); }); const readText = f => new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result); r.onerror = rej; r.readAsText(f, "UTF-8"); }); const fileIcon = t => t.includes("pdf") ? "📄" : t.includes("word") || t.includes("document") ? "📝" : t.includes("image") ? "🖼️" : "📃"; const onDrop = useCallback(e => { e.preventDefault(); setIsDragging(false); setFiles(p => [...p, ...Array.from(e.dataTransfer.files)]); }, []); const buildBase = async () => { const parts = []; for (const f of files) { try { if (f.type.includes("pdf")) parts.push({ type: "document", source: { type: "base64", media_type: "application/pdf", data: await readB64(f) } });else if (f.type.includes("image")) parts.push({ type: "image", source: { type: "base64", media_type: f.type, data: await readB64(f) } });else parts.push({ type: "text", text: `[ไฟล์: ${f.name}]\n${await readText(f)}` }); } catch { parts.push({ type: "text", text: `[อ่านไม่ได้: ${f.name}]` }); } } if (baseContext.trim()) parts.push({ type: "text", text: `บริบทจากครู:\n${baseContext}` }); if (parts.length === 0) parts.push({ type: "text", text: "สร้างตัวอย่างงานวิจัยในชั้นเรียนสำหรับระดับประถมศึกษา" }); return parts; }; const callAI = async (stepIdx, base, 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: 1500, system: BASE_SYSTEM, messages: [{ role: "user", content: [...base, { type: "text", text: STEPS[stepIdx].prompt(saved) }] }] }) }); 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 () => { setIsGenerating(true); setError(null); try { const base = await buildBase(); 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 = "บทที่ 1 บทนำ\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); } catch (e) { setError(e.message); } finally { setIsDownloading(null); } }; const handlePDF = () => { downloadAsPDF(confirmed); }; // ─── CSS ──────────────────────────────────────────────────────────────────── const css = ` @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:#1a5a4a;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(61,214,181,.38);border-radius:18px;padding:22px;box-shadow:0 0 0 1px rgba(61,214,181,.08)} .btn-start{background:linear-gradient(135deg,#1a6b5c,#1e4d8c);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(26,107,92,.5)} .btn-start:disabled{opacity:.45;cursor:not-allowed} .btn-save{background:linear-gradient(135deg,#14602a,#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(20,96,42,.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:#90b8b0;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(61,214,181,.12);color:#3dd6b5;border-color:rgba(61,214,181,.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,#8c1a1a,#c0392b);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(140,26,26,.5)} .upload-zone{border:2px dashed rgba(61,214,181,.28);border-radius:14px;background:rgba(61,214,181,.03);transition:all .3s;cursor:pointer;padding:26px 20px;text-align:center} .upload-zone:hover,.upload-zone.drag{border-color:#3dd6b5;background:rgba(61,214,181,.09)} .file-chip{background:rgba(26,107,92,.18);border:1px solid rgba(61,214,181,.22);border-radius:8px;padding:7px 11px;display:flex;align-items:center;gap:7px} .edit-area{width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(61,214,181,.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:150px} .edit-area:focus{border-color:rgba(61,214,181,.55);box-shadow:0 0 0 3px rgba(61,214,181,.07)} .confirmed-card{background:rgba(61,214,181,.04);border:1px solid rgba(61,214,181,.16);border-radius:12px;padding:13px 16px;cursor:pointer;transition:all .2s} .confirmed-card:hover{background:rgba(61,214,181,.09);border-color:rgba(61,214,181,.3)} .shine{background:linear-gradient(135deg,#3dd6b5,#7eb8e8,#c4a0e8);-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{color:#2e5548} .hint-box{font-size:12px;color:#4a7060;background:rgba(255,255,255,.02);border-left:3px solid rgba(61,214,181,.3);border-radius:0 8px 8px 0;padding:8px 12px;margin-bottom:12px} .download-bar{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 20px} `; 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, css), /*#__PURE__*/React.createElement("div", { style: { maxWidth: 800, margin: "0 auto 22px", textAlign: "center" } }, /*#__PURE__*/React.createElement("div", { style: { display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(26,107,92,.18)", border: "1px solid rgba(61,214,181,.28)", borderRadius: 30, padding: "5px 16px", marginBottom: 14, fontSize: 11, color: "#3dd6b5", letterSpacing: 2, fontFamily: "'Chakra Petch',sans-serif" } }, "\u2726 CLASSROOM ACTION RESEARCH \u2014 STEP 1 \u2726"), /*#__PURE__*/React.createElement("h1", { className: "shine", style: { fontFamily: "'Chakra Petch',sans-serif", fontSize: "clamp(19px,3.5vw,28px)", fontWeight: 700, margin: "0 0 5px" } }, "\u0E23\u0E30\u0E1A\u0E1A\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E1A\u0E17\u0E17\u0E35\u0E48 1 \u0E1A\u0E17\u0E19\u0E33"), /*#__PURE__*/React.createElement("p", { style: { color: "#4a7060", fontSize: 13, margin: 0 } }, "AI \u0E2A\u0E23\u0E49\u0E32\u0E07\u0E17\u0E35\u0E25\u0E30\u0E2B\u0E31\u0E27\u0E02\u0E49\u0E2D \xB7 \u0E04\u0E23\u0E39\u0E41\u0E01\u0E49\u0E44\u0E02\u0E41\u0E25\u0E30\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01 \xB7 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")), /*#__PURE__*/React.createElement("div", { style: { maxWidth: 800, 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: {} }), /*#__PURE__*/React.createElement("div", { className: "card" }, /*#__PURE__*/React.createElement(Label, { num: "01", color: "#3dd6b5", title: "\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E40\u0E2D\u0E01\u0E2A\u0E32\u0E23 / \u0E2B\u0E25\u0E31\u0E01\u0E10\u0E32\u0E19\u0E1B\u0E31\u0E0D\u0E2B\u0E32" }), /*#__PURE__*/React.createElement("div", { className: `upload-zone${isDragging ? " drag" : ""}`, onDragOver: e => { e.preventDefault(); setIsDragging(true); }, onDragLeave: () => setIsDragging(false), onDrop: onDrop, onClick: () => fileInputRef.current?.click() }, /*#__PURE__*/React.createElement("div", { style: { fontSize: 32, marginBottom: 5 } }, "\uD83D\uDCC1"), /*#__PURE__*/React.createElement("p", { style: { margin: "0 0 3px", fontWeight: 600, color: "#7acab8", fontSize: 14 } }, "\u0E27\u0E32\u0E07\u0E44\u0E1F\u0E25\u0E4C\u0E17\u0E35\u0E48\u0E19\u0E35\u0E48 \u0E2B\u0E23\u0E37\u0E2D\u0E04\u0E25\u0E34\u0E01\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E40\u0E25\u0E37\u0E2D\u0E01"), /*#__PURE__*/React.createElement("p", { style: { margin: 0, fontSize: 11.5, color: "#2e5548" } }, "PDF \xB7 Word (.docx) \xB7 \u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E \xB7 \u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21"), /*#__PURE__*/React.createElement("input", { ref: fileInputRef, type: "file", multiple: true, accept: ".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png,.gif,.webp", style: { display: "none" }, onChange: e => setFiles(p => [...p, ...Array.from(e.target.files)]) })), files.length > 0 && /*#__PURE__*/React.createElement("div", { style: { marginTop: 11, display: "flex", flexWrap: "wrap", gap: 7 } }, files.map((f, i) => /*#__PURE__*/React.createElement("div", { key: i, className: "file-chip" }, /*#__PURE__*/React.createElement("span", null, fileIcon(f.type)), /*#__PURE__*/React.createElement("span", { style: { fontSize: 12.5, color: "#7acab8", maxWidth: 140, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, f.name), /*#__PURE__*/React.createElement("button", { onClick: e => { e.stopPropagation(); setFiles(p => p.filter((_, j) => j !== i)); }, style: { background: "none", border: "none", color: "#3a6055", cursor: "pointer", padding: 0, fontSize: 13 } }, "\u2715"))))), /*#__PURE__*/React.createElement("div", { className: "card" }, /*#__PURE__*/React.createElement(Label, { num: "02", color: "#7eb8e8", title: "\u0E1A\u0E23\u0E34\u0E1A\u0E17\u0E02\u0E2D\u0E07\u0E04\u0E23\u0E39", sub: "\u2014 \u0E22\u0E34\u0E48\u0E07\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14\u0E22\u0E34\u0E48\u0E07\u0E14\u0E35" }), /*#__PURE__*/React.createElement("textarea", { className: "edit-area", value: baseContext, onChange: e => setBaseContext(e.target.value), rows: 5, placeholder: `กรอกข้อมูลให้ AI ใช้ เช่น\n• ชั้นเรียน: ป.5/2 โรงเรียนบ้านดอนแก้ว จำนวน 32 คน\n• ปัญหา: นักเรียน 18/32 คน (56%) ทำคะแนนอ่านจับใจความต่ำกว่า 50%\n• วิชา: ภาษาไทย หน่วยการอ่านจับใจความ\n• นวัตกรรม: บัตรคำถาม 5W1H + การเรียนรู้แบบร่วมมือ\n• ภาคเรียนที่ 1 ปีการศึกษา 2568` })), 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..." : "🚀 เริ่มสร้างบทที่ 1 บทนำ"), /*#__PURE__*/React.createElement("p", { style: { color: "#2e4e48", 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 \u0E41\u0E25\u0E49\u0E27 AI \u0E19\u0E33\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E19\u0E31\u0E49\u0E19\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, onClickStep: editConfirmed }), 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: "#3dd6b5", display: "flex", alignItems: "center", gap: 7 } }, /*#__PURE__*/React.createElement("span", { style: { background: "rgba(61,214,181,.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: "#3dd6b5" } }, "\u270F\uFE0F \u0E41\u0E01\u0E49\u0E44\u0E02")), /*#__PURE__*/React.createElement("p", { style: { margin: 0, fontSize: 12.5, color: "#587870", 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: "#3dd6b5", 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: 150, 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: "#3dd6b5", fontSize: 14, margin: 0, textAlign: "center" } }, "AI \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2A\u0E23\u0E49\u0E32\u0E07 \"", STEPS[currentStep].label, "\"", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", { style: { fontSize: 12, color: "#2e5548" } }, "\u0E42\u0E14\u0E22\u0E43\u0E0A\u0E49\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E17\u0E35\u0E48\u0E04\u0E23\u0E39\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E44\u0E27\u0E49\u0E40\u0E1B\u0E47\u0E19\u0E1A\u0E23\u0E34\u0E1A\u0E17"))) : /*#__PURE__*/React.createElement("textarea", { ref: textareaRef, className: "edit-area", value: draft, onChange: e => setDraft(e.target.value), rows: 8, 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 สร้างหัวข้อถัดไป →" : "✅ บันทึกและสรุปบทที่ 1 บทนำ")))), 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\uDF89"), /*#__PURE__*/React.createElement("h2", { className: "shine", style: { fontFamily: "'Chakra Petch',sans-serif", fontSize: 22, fontWeight: 700, margin: "0 0 4px" } }, "\u0E1A\u0E17\u0E17\u0E35\u0E48 1 \u0E1A\u0E17\u0E19\u0E33 \u0E2A\u0E21\u0E1A\u0E39\u0E23\u0E13\u0E4C!"), /*#__PURE__*/React.createElement("p", { style: { color: "#4a7060", fontSize: 13, margin: "0 0 2px" } }, "\u0E0A\u0E37\u0E48\u0E2D\u0E07\u0E32\u0E19\u0E27\u0E34\u0E08\u0E31\u0E22:"), /*#__PURE__*/React.createElement("p", { style: { color: "#a0d8cc", fontSize: 14, fontWeight: 600, margin: 0, padding: "0 20px" } }, confirmed.researchTitle)), /*#__PURE__*/React.createElement(StepBar, { steps: STEPS, current: STEPS.length, confirmed: confirmed, 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: handlePDF }, /*#__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" ? "✓ คัดลอกแล้ว" : "📋 คัดลอกทั้งหมด")), /*#__PURE__*/React.createElement("p", { style: { color: "#2e5548", fontSize: 11.5, margin: "10px 0 0" } }, "Word: \u0E14\u0E32\u0E27\u0E19\u0E4C\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E1F\u0E25\u0E4C .docx \u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E40\u0E2D\u0E01\u0E2A\u0E32\u0E23\u0E27\u0E34\u0E08\u0E31\u0E22 \xB7 PDF: \u0E40\u0E1B\u0E34\u0E14\u0E2B\u0E19\u0E49\u0E32\u0E1E\u0E34\u0E21\u0E1E\u0E4C \u2192 \u0E40\u0E25\u0E37\u0E2D\u0E01 \"Save as PDF\"")), error && /*#__PURE__*/React.createElement("p", { style: { color: "#ff8080", fontSize: 13, textAlign: "center" } }, "\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(61,214,181,.06)", padding: "11px 18px", display: "flex", justifyContent: "space-between", alignItems: "center" } }, /*#__PURE__*/React.createElement("h3", { style: { margin: 0, fontSize: 14.5, color: "#9ad5c8", 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: "#b8d8d0", 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(30,77,140,.14),rgba(26,107,92,.14))", border: "1px solid rgba(126,184,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: "#7eb8e8", marginBottom: 3 } }, "\u0E02\u0E31\u0E49\u0E19\u0E15\u0E2D\u0E19\u0E16\u0E31\u0E14\u0E44\u0E1B"), /*#__PURE__*/React.createElement("div", { style: { fontSize: 14, color: "#b8d0f0" } }, "\uD83D\uDCDA \u0E02\u0E31\u0E49\u0E19\u0E15\u0E2D\u0E19\u0E17\u0E35\u0E48 2 \xB7 \u0E28\u0E36\u0E01\u0E29\u0E32\u0E40\u0E2D\u0E01\u0E2A\u0E32\u0E23\u0E41\u0E25\u0E30\u0E17\u0E24\u0E29\u0E0E\u0E35\u0E17\u0E35\u0E48\u0E40\u0E01\u0E35\u0E48\u0E22\u0E27\u0E02\u0E49\u0E2D\u0E07")), /*#__PURE__*/React.createElement("span", { style: { fontSize: 20, opacity: .3 } }, "\u2192")))), /*#__PURE__*/React.createElement("p", { style: { textAlign: "center", color: "#162828", 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 Label({ 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: "#2e5548", fontFamily: "'Sarabun',sans-serif", fontWeight: 400 } }, sub)); } function StepBar({ steps, current, confirmed, 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 ? "rgba(61,214,181,.18)" : active ? "rgba(126,184,232,.18)" : "rgba(255,255,255,.04)", border: `2px solid ${done ? "#3dd6b5" : active ? "#7eb8e8" : "rgba(255,255,255,.1)"}`, color: done ? "#3dd6b5" : active ? "#7eb8e8" : "#2e4e48" } }, done ? "✓" : i + 1), /*#__PURE__*/React.createElement("span", { style: { fontSize: 9, color: done ? "#3dd6b5" : active ? "#7eb8e8" : "#2e4e48", whiteSpace: "nowrap" } }, s.icon)), i < steps.length - 1 && /*#__PURE__*/React.createElement("div", { style: { flex: 1, height: 2, background: done ? "rgba(61,214,181,.35)" : "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(ResearchStep1)); 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 + '

'; } })();