function MainComponent() { const [chatMessages, setChatMessages] = React.useState([]); const [newMessage, setNewMessage] = React.useState(''); const [loading, setLoading] = React.useState(false); function addMessage(role, content) { const newChat = { role, content }; setChatMessages((prev)=>[ ...prev, newChat ]); } async function handleSubmit(e) { e.preventDefault(); if (newMessage.trim() === '') return; addMessage('user', newMessage); setLoading(true); try { const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(newMessage)}`, { method: 'GET' }); const data = await response.json(); addMessage('bot', /*#__PURE__*/ React.createElement("img", { src: data.data[0], alt: "Generated from the STABLE_DIFFUSION request", className: "max-w-full h-auto", __source: { fileName: "", lineNumber: 22, columnNumber: 25 }, __self: this })); } catch (error) { console.error(error); } finally{ setLoading(false); setNewMessage(''); } } return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-[#3C3F41] min-h-screen font-roboto flex flex-col", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#007ACC] p-4 text-white flex justify-between items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Slack風チャットアプリ")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, chatMessages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-4 rounded-lg ${msg.role === 'user' ? 'bg-[#007ACC] text-white' : 'bg-[#4D4D4D] text-[#D4D4D4]'} ml-auto mr-auto max-w-[80%] ${msg.role === 'user' ? 'self-end' : 'self-start'}`, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, typeof msg.content === 'string' ? msg.content : msg.content))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center p-2 text-[#D4D4D4]", __source: { fileName: "", lineNumber: 44, columnNumber: 21 }, __self: this }, "読み込み中..."), /*#__PURE__*/ React.createElement("form", { className: "p-4 flex space-x-2", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "newMessage", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), className: "flex-grow p-2 bg-[#2D2D2D] border border-[#3C3F41] rounded-lg focus:outline-none text-white", placeholder: "メッセージを入力...", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-[#007ACC] text-white rounded-lg hover:bg-[#005EA6] disabled:bg-[#3C3F41]", disabled: loading, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "送信")))); }