function MainComponent() { const [chatMessages, setChatMessages] = React.useState([]); const [userInput, setUserInput] = React.useState(""); const [generatedImage, setGeneratedImage] = React.useState("/assets/IMG_2170.jpg"); const handleSend = ()=>{ const newMessages = [ ...chatMessages, { role: "user", content: userInput } ]; setChatMessages(newMessages); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `${userInput} ドラゴンのふりをして返事してください` } ] }) }).then((response)=>response.json()).then((data)=>{ const assistantMessage = data?.choices?.[0]?.message?.content; if (assistantMessage) { setChatMessages([ ...newMessages, { role: "assistant", content: assistantMessage } ]); } }); setUserInput(""); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full min-h-screen p-4 bg-gray-100", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "タイトル：ドラゴンアイの感想"), /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-1/2 mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "Generated image based on ドラゴンアイの感想", className: "w-full h-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-1/2 bg-white p-4 rounded shadow-md", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-between h-full", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "chat-container", className: "flex flex-col space-y-2 mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, chatMessages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `self-${message.role === "user" ? 'start' : 'end'} ${message.role === "user" ? 'bg-gray-200 text-black' : 'bg-blue-500 text-white'} p-2 rounded font-roboto`, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, message.content))), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-2 border rounded-l font-roboto", name: "userInput", placeholder: "Type your message...", value: userInput, onChange: (e)=>setUserInput(e.target.value), __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded-r font-roboto", name: "sendButton", onClick: handleSend, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "送信"))))); }