` }; setChatHistory((chatHistory)=>[ ...chatHistory, imageContent ]); } } } } catch (error) { setChatHistory((chatHistory)=>[ ...chatHistory, { role: 'assistant', content: 'エラーが発生しました。' } ]); } finally{ setIsLoading(false); setUserMessage(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f0f0] h-screen p-4 overflow-hidden", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg max-w-[90%] md:max-w-[600px] h-[90vh] mx-auto overflow-hidden flex flex-col", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#00B900] text-white p-4 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-xl", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "無料のAI画像作成ツール")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, chatHistory.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === 'user' ? 'justify-end' : 'justify-start'} mb-2`, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, message.role !== 'user' && /*#__PURE__*/ React.createElement("div", { className: "rounded-full h-12 w-12 bg-[#dedede] flex items-center justify-center mr-3", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, "🤖")), /*#__PURE__*/ React.createElement("div", { className: `rounded-xl p-4 max-w-[70%] ${message.role === 'user' ? 'bg-[#00B900] text-white' : 'bg-[#e0e0e0]'}`, dangerouslySetInnerHTML: { __html: message.content }, __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 71, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full", role: "status", __source: { fileName: "", lineNumber: 71, columnNumber: 62 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-[#efefef] p-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userMessage", placeholder: "ここに入力...", value: userMessage, onChange: handleMessageChange, className: "flex-grow p-2 rounded-md border-2 border-transparent focus:outline-none focus:border-[#00B900]", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#00B900] text-white rounded-md px-4 py-2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "送信")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, ` @keyframes spinner-border { to { transform: rotate(360deg); } } .spinner-border { display: inline-block; width: 1em; height: 1em; vertical-align: text-bottom; border: .2em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border .75s linear infinite; } `)); }