function MainComponent() { const [thread, setThread] = React.useState({ title: '', content: '', generatedContent: [] }); React.useEffect(()=>{ if (thread.title && thread.content) { const fetchData = async ()=>{ const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `${thread.title}\n${thread.content}\nコメントを生成してください。` } ] }) }); const data = await response.json(); const generatedResponses = data.choices[0].message.content.split('\n').filter((line)=>line.trim() !== ""); setThread((prevState)=>({ ...prevState, generatedContent: generatedResponses })); }; fetchData().catch(console.error); } }, [ thread.title, thread.content ]); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const title = formData.get('title'); const content = formData.get('content'); setThread({ title: title, content: content }); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0F0F0] min-h-screen flex flex-col items-center py-10", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-[#333] mb-5", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "2chスレジェネレーター"), /*#__PURE__*/ React.createElement("form", { className: "mb-4 w-full max-w-[500px] flex flex-col gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", placeholder: "スレタイトルを入力", className: "border-2 border-[#CCC] p-2", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "content", placeholder: "スタート内容を入力", className: "border-2 border-[#CCC] p-2 h-[200px]", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007BFF] text-white font-semibold p-2 hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "スレを生成")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px]", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg text-[#333] mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "生成されたスレ:"), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-[#DDD] p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#666]", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "スレタイトル: ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 44, columnNumber: 58 }, __self: this }, thread.title)), thread.generatedContent.map((content, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "font-roboto text-[#666]", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, index + 1, ": ", content))))); }