function MainComponent({ services, chatRooms, user, aiModels }) { const handleSendMessage = (event)=>{ if (event.key === 'Enter' && !event.shiftKey) { // Add logic to send message event.preventDefault(); } }; const expandedChatRooms = [ { title: 'Today', rooms: chatRooms.slice(0, 2) }, { title: 'Yesterday', rooms: chatRooms.slice(2, 4) }, { title: 'Before', rooms: chatRooms.slice(4) } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen font-meiryo", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[250px] bg-gray-100 border-r-2", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[50px] flex items-center justify-between px-4 border-b-2", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars cursor-pointer", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-pencil cursor-pointer", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center py-4 px-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/service-icon.png", alt: "Service Icon", className: "w-8 h-8", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "ホーム")), services.map((service)=>/*#__PURE__*/ React.createElement("div", { key: service.id, className: "flex items-center py-4 px-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: service.icon, alt: service.name, className: "w-8 h-8", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, service.name)))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[calc(100vh-100px)] mt-2 px-2", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, expandedChatRooms.map((group, index)=>/*#__PURE__*/ React.createElement("div", { key: index, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 font-bold px-2", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, group.title), group.rooms.map((room)=>/*#__PURE__*/ React.createElement("div", { key: room.id, className: "flex justify-between items-center px-2 py-2 hover:bg-gray-200 group", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, room.name), /*#__PURE__*/ React.createElement("div", { className: "invisible group-hover:visible flex", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-edit cursor-pointer mx-1", __source: { fileName: "", lineNumber: 44, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-trash cursor-pointer mx-1", __source: { fileName: "", lineNumber: 45, columnNumber: 21 }, __self: this })))))))), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col flex-1", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "h-[50px] border-b-2 flex items-center justify-between px-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "border rounded px-2 py-1", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, aiModels.map((model)=>/*#__PURE__*/ React.createElement("option", { key: model.id, value: model.name, __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, model.name))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-gray-400 text-white rounded-full w-8 h-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, user.initials), /*#__PURE__*/ React.createElement("div", { className: "ml-2 relative", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-cog cursor-pointer", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bg-white shadow-md w-32 rounded border mt-2 hidden group-hover:block", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 border-b cursor-pointer", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "設定"), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 cursor-pointer", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, "ログアウト"))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center justify-center", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/logo.png", alt: "Logo", className: "w-24 h-24", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("footer", { className: "border-t-2 p-4 flex items-center", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paperclip cursor-pointer", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "message", className: "flex-1 mx-4 p-2 border rounded", placeholder: "メッセージを入力し送信する", rows: "1", onKeyPress: handleSendMessage, style: { resize: 'none' }, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane cursor-pointer", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-2 bg-green-600", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this })); } function StoryComponent() { const services = [ { id: 1, name: '拡張機能1', icon: '/path/to/icon1.png' }, { id: 2, name: '拡張機能2', icon: '/path/to/icon2.png' } ]; const chatRooms = [ { id: 1, name: 'チャットルーム1' }, { id: 2, name: 'チャットルーム2' }, { id: 3, name: 'チャットルーム1' }, { id: 4, name: 'チャットルーム2' }, { id: 5, name: 'チャットルーム1' }, { id: 6, name: 'チャットルーム2' } ]; const user = { initials: 'SY' }; const aiModels = [ { id: 1, name: 'GPT-4' }, { id: 2, name: 'Gemini' } ]; return /*#__PURE__*/ React.createElement(MainComponent, { services: services, chatRooms: chatRooms, user: user, aiModels: aiModels, __source: { fileName: "", lineNumber: 120, columnNumber: 10 }, __self: this }); }