function MainComponent({ onSend, messages, loading, onGenerate }) { const renderMessages = messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-4 max-w-[70%] ${message.role === 'user' ? 'bg-[#D9FDD3] self-end' : 'bg-[#F0F0F0] self-start'}`, style: { borderRadius: '15px' }, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-[#333] ${message.role === 'user' ? 'text-right' : 'text-left'}`, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, message.content), message.imageUrl && /*#__PURE__*/ React.createElement("img", { src: message.imageUrl, alt: "Generated content", className: "max-w-full h-auto mt-2", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full justify-between", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, renderMessages, loading && /*#__PURE__*/ React.createElement("p", { className: "text-center text-[#aaa]", __source: { fileName: "", lineNumber: 17, columnNumber: 21 }, __self: this }, "送信中...")), /*#__PURE__*/ React.createElement("div", { className: "flex p-4 space-x-2", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex-1 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: onSend, __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "チャット送信"), /*#__PURE__*/ React.createElement("button", { className: "flex-1 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", onClick: onGenerate, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "画像生成"))); } function StoryComponent() { const messages = [ { role: 'system', content: '画像生成の準備ができました！' }, { role: 'user', content: 'お花の画像を生成してください。' }, { role: 'assistant', content: 'お花の画像を生成中です...' }, { role: 'assistant', content: '画像が生成されました！', imageUrl: '/path/to/generated/image.jpg' } ]; return /*#__PURE__*/ React.createElement("div", { className: "h-screen p-4 flex justify-center items-center bg-[#E5E5E5]", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg w-full max-w-md flex flex-col", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { messages: messages, loading: false, onSend: ()=>console.log("送信"), onGenerate: ()=>console.log("画像生成"), __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }))); }