function Component({ title, userInput, onInputChange, onSubmit, loading, responses }) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8 font-noto-sans-jp", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "userInput", className: "w-full p-3 border border-gray-300 rounded-lg mb-4 font-noto-sans-jp", rows: "4", placeholder: "慰めてほしいことを入力してください", value: userInput, onChange: onInputChange, __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white py-2 rounded-lg mb-8 font-noto-sans-jp hover:bg-blue-600 transition duration-300", onClick: onSubmit, disabled: loading, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, loading ? "処理中..." : "慰めて")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 w-full max-w-4xl", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md w-full sm:w-1/3", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-2 font-noto-sans-jp", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "柴犬 (ChatGPT)"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-noto-sans-jp", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, responses.chatGPT || "返答がここに表示されます")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md w-full sm:w-1/3", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-2 font-noto-sans-jp", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "コーギー (Google Gemini)"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-noto-sans-jp", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, responses.gemini || "返答がここに表示されます")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md w-full sm:w-1/3", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-2 font-noto-sans-jp", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "シュナウザー (Claude)"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-noto-sans-jp", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, responses.claude || "返答がここに表示されます")))); } function ComponentStory() { const responses = { chatGPT: "返答例1", gemini: "返答例2", claude: "返答例3" }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { title: "犬の手も借りたい", userInput: "", onInputChange: ()=>{}, onSubmit: ()=>{}, loading: false, responses: responses, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this })); } function MainComponent() { const [userInput, setUserInput] = React.useState(""); const [responses, setResponses] = React.useState({ chatGPT: "", gemini: "", claude: "" }); const [loading, setLoading] = React.useState(false); const handleInputChange = (e)=>{ setUserInput(e.target.value); }; const handleSubmit = async ()=>{ setLoading(true); try { const [chatGPTResponse, geminiResponse, claudeResponse] = await Promise.all([ fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: userInput } ] }) }), fetch("/integrations/google-gemini-1-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: userInput } ] }) }), fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: userInput } ] }) }) ]); const chatGPTData = await chatGPTResponse.json(); const geminiData = await geminiResponse.json(); const claudeData = await claudeResponse.json(); setResponses({ chatGPT: chatGPTData.choices[0].message.content, gemini: geminiData.choices[0].message.content, claude: claudeData.choices[0].message.content }); } catch (error) { console.error("Error fetching responses:", error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement(Component, { title: "犬の手も借りたい", userInput: userInput, onInputChange: handleInputChange, onSubmit: handleSubmit, loading: loading, responses: responses, __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }); }