function MainComponent({ tasks, toggleComplete, toggleInProgress, fetchResponse }) { const [loading, setLoading] = React.useState(false); const [response, setResponse] = React.useState(""); const handleFetch = async ()=>{ setLoading(true); const res = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: 'タスク管理アプリを作って' } ], system_prompt: 'Explain this content' }) }); const data = await res.json(); const messageContent = data.choices[0].message.content; setResponse(messageContent); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold mb-4 font-sans", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "タスク管理"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, tasks.map((task, index)=>{ const taskClasses = task.completed ? "line-through text-gray-500" : task.inProgress ? "font-bold text-blue-600" : ""; return /*#__PURE__*/ React.createElement("li", { key: index, className: `p-2 border rounded flex justify-between items-center ${taskClasses}`, __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, task.title), /*#__PURE__*/ React.createElement("div", { className: "space-x-2", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-2 py-1 bg-green-500 text-white rounded", onClick: ()=>toggleComplete(index), name: "completeBtn", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "✔"), /*#__PURE__*/ React.createElement("button", { className: "px-2 py-1 bg-yellow-500 text-white rounded", onClick: ()=>toggleInProgress(index), name: "inProgressBtn", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "➤"))); })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleFetch, disabled: loading, className: "px-4 py-2 bg-blue-500 text-white rounded", name: "fetchResponseBtn", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, loading ? "Loading..." : "Fetch GPT-4 Response"), response && /*#__PURE__*/ React.createElement("p", { className: "mt-4 p-2 border rounded font-sans", __source: { fileName: "", lineNumber: 65, columnNumber: 22 }, __self: this }, response))); } function StoryComponent() { const [tasks, setTasks] = React.useState([ { title: "タスク1", completed: false, inProgress: true }, { title: "タスク2", completed: true, inProgress: false }, { title: "タスク3", completed: false, inProgress: true }, { title: "タスク4", completed: false, inProgress: false } ]); const toggleComplete = (index)=>{ setTasks(tasks.map((task, i)=>i === index ? { ...task, completed: !task.completed } : task)); }; const toggleInProgress = (index)=>{ setTasks(tasks.map((task, i)=>i === index ? { ...task, inProgress: !task.inProgress } : task)); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { tasks: tasks, toggleComplete: toggleComplete, toggleInProgress: toggleInProgress, __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this })); }