function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const [messageInput, setMessageInput] = React.useState(""); const handleSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); const newMessages = [ ...messages, { role: 'user', content: messageInput } ]; setMessages(newMessages); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages, system_prompt: 'Explain this content' }) }); const result = await response.json(); const assistantMessage = result.choices[0].message.content; setMessages([ ...newMessages, { role: 'assistant', content: assistantMessage } ]); } catch (err) { setMessages([ ...newMessages, { role: 'assistant', content: `エラーが発生しました: ${err.message}` } ]); } finally{ setIsLoading(false); } setMessageInput(""); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto bg-white p-5 rounded shadow", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "チャットGPT"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded overflow-y-auto h-[400px]", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 p-2 rounded ${msg.role === 'user' ? 'bg-blue-200 self-end' : 'bg-gray-300 self-start'}`, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, msg.content))), /*#__PURE__*/ React.createElement("form", { className: "flex", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: messageInput, onChange: (e)=>setMessageInput(e.target.value), className: "flex-1 border border-gray-300 p-2 rounded mr-2 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white font-roboto py-2 px-4 rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "送信")), isLoading && /*#__PURE__*/ React.createElement("div", { className: "font-roboto mt-4", __source: { fileName: "", lineNumber: 58, columnNumber: 25 }, __self: this }, "ロード中...")))); }