function AiAssistantInterface({ response, loading, fetchResponse }) { const message = response || `${"こんに"}${"にちは"}`; const buttonText = loading ? '読み込み中...' : '送信'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F3F3F3]", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border w-[600px] h-[400px] bg-white flex flex-col", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-none h-[30px] bg-[#0A74DA] flex items-center px-2", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "AI Assistant")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, message)), /*#__PURE__*/ React.createElement("div", { className: "flex-none h-[50px] bg-[#E4E4E4] flex items-center px-2", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `font-roboto bg-[#0A74DA] text-white py-1 px-4 rounded ${loading ? 'cursor-not-allowed opacity-50' : ''}`, onClick: fetchResponse, disabled: loading, __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, buttonText)))); } function AiAssistantInterfaceStory() { const fetchResponse = ()=>new Promise((resolve)=>setTimeout(resolve, 2000)); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AiAssistantInterface, { response: "これはAIの応答です", loading: false, fetchResponse: fetchResponse, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(AiAssistantInterface, { response: "読み込み中です…", loading: true, fetchResponse: fetchResponse, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this })); } function MainComponent() { const [response, setResponse] = React.useState(''); const [loading, setLoading] = React.useState(false); const fetchResponse = async ()=>{ setLoading(true); try { const res = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: 'こんにちは' } ] }) }); const data = await res.json(); setResponse(data.choices[0].message.content); } catch (error) { setResponse('エラーが発生しました。'); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement(AiAssistantInterface, { response: response, loading: loading, fetchResponse: fetchResponse, __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }); }