function ClearButtonDesign({ onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white p-3 rounded font-roboto", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "クリア"); } function ClearButtonDesignStory() { const clearForm = ()=>{ console.log("Form cleared"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ClearButtonDesign, { onClick: clearForm, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [query, setQuery] = React.useState(''); const [loading, setLoading] = React.useState(false); const [responses, setResponses] = React.useState({ chatGPT: '', claude: '', gemini: '' }); const fetchResponses = async ()=>{ setLoading(true); const chatGPTResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": query } ], system_prompt: 'Please respond to the user query' }), headers: { 'Content-Type': 'application/json' } }); const claudeResponse = await fetch('/integrations/anthropic-claude-sonnet/', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": query } ] }), headers: { 'Content-Type': 'application/json' } }); const geminiResponse = await fetch('/integrations/google-gemini/', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": query } ] }), headers: { 'Content-Type': 'application/json' } }); const chatGPTData = await chatGPTResponse.json(); const claudeData = await claudeResponse.json(); const geminiData = await geminiResponse.json(); setResponses({ chatGPT: chatGPTData.choices[0].message.content, claude: claudeData.choices[0].message.content, gemini: geminiData.choices[0].message.content }); setLoading(false); }; const clearForm = ()=>{ setQuery(''); setResponses({ chatGPT: '', claude: '', gemini: '' }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-10", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "questionInput", className: "block mb-2 font-sans text-lg text-gray-600", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "質問を入力してください:"), /*#__PURE__*/ React.createElement("input", { id: "questionInput", className: "bg-white w-full border border-gray-300 rounded-lg py-2 px-4", type: "text", value: query, onChange: (e)=>setQuery(e.target.value), placeholder: "日本語で質問を入力してください...", name: "questionInput", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mx-auto text-white bg-blue-500 hover:bg-blue-700 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2", onClick: fetchResponses, disabled: loading, type: "button", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "質問する"))), loading ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 82, columnNumber: 18 }, __self: this }, "読み込んでいます...") : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mt-4", __source: { fileName: "", lineNumber: 82, columnNumber: 39 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-2 font-semibold text-gray-900", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "ChatGPTの回答:"), /*#__PURE__*/ React.createElement("p", { className: "bg-gray-50 border-l-4 border-blue-500 text-gray-700 p-4", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, responses.chatGPT || '回答を待っています...')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-2 font-semibold text-gray-900", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Anthropic Claudeの回答:"), /*#__PURE__*/ React.createElement("p", { className: "bg-gray-50 border-l-4 border-green-500 text-gray-700 p-4", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, responses.claude || '回答を待っています...')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-2 font-semibold text-gray-900", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Google Geminiの応答:"), /*#__PURE__*/ React.createElement("p", { className: "bg-gray-50 border-l-4 border-red-500 text-gray-700 p-4", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, responses.gemini || '回答を待っています...'))), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-red-500 hover:bg-red-700 text-white font-medium rounded-lg text-sm px-5 py-2.5 text-center", onClick: clearForm, type: "button", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, "クリア")); }