function UserFriendlyChatRoomList({ rooms, onRoomClick }) { return /*#__PURE__*/ React.createElement("ul", { className: "list-none p-0", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, rooms.map((room)=>/*#__PURE__*/ React.createElement("li", { key: room.id, className: "p-3 hover:bg-gray-100 cursor-pointer", onClick: ()=>onRoomClick(room.id), __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, room.name))); } function UserFriendlyChatRoomListStory() { const demoRooms = [ { id: 1, name: 'General' }, { id: 2, name: 'Development' }, { id: 3, name: 'Design' } ]; const handleRoomClick = (roomId)=>{ console.log(`Navigate to chat history of room: ${roomId}`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UserFriendlyChatRoomList, { rooms: demoRooms, onRoomClick: handleRoomClick, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); } function OutlineButton({ text, onClick, bgColor = 'bg-white' }) { const textColor = bgColor === 'bg-white' ? 'text-black' : 'text-white'; return /*#__PURE__*/ React.createElement("button", { className: `px-8 py-2 rounded-full border border-current ${textColor} font-inter bg-transparent hover:bg-opacity-10 transition-colors duration-300 w-[240px] h-[60px]`, onClick: onClick, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, text); } function OutlineButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col space-y-4 justify-center items-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(OutlineButton, { text: "Click me", onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(OutlineButton, { text: "Dark version", onClick: ()=>alert('Dark button clicked!'), bgColor: "bg-black", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function UiDesignAndCodeViewer({ activeView, currentDesign, currentCode }) { const isDesignView = activeView === 'design'; return /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-4 border-r", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, isDesignView ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "UI Design Viewer"), currentDesign ? /*#__PURE__*/ React.createElement("img", { src: currentDesign, alt: "Generated UI Design", className: "w-full h-auto", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 h-64 flex items-center justify-center text-gray-500", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "No design generated yet")) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Code Viewer"), currentCode ? /*#__PURE__*/ React.createElement("pre", { className: "bg-gray-800 text-white p-4 rounded overflow-auto h-64", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("code", { __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, currentCode)) : /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 h-64 flex items-center justify-center text-gray-500", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "No code generated yet"))); } function UiDesignAndCodeViewerStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UiDesignAndCodeViewer, { activeView: "design", currentDesign: "", currentCode: "", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(UiDesignAndCodeViewer, { activeView: "code", currentDesign: "", currentCode: `function example() {\n console.log('Hello, World!');\n}`, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this })); } function ChatHistoryDisplay({ chatHistory }) { return /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-auto border-t md:border-t-0", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Chat History"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 h-[400px] overflow-y-auto", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, chatHistory.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-3 rounded shadow", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, message)))); } function ChatHistoryDisplayStory() { const sampleChatHistory = [ "Hello there!", "How are you doing today?", "What's up?", "This is a sample message.", "Feel free to scroll through." ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatHistoryDisplay, { chatHistory: sampleChatHistory, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this })); } function MainComponent() { const [chatHistory, setChatHistory] = React.useState([]); const [currentDesign, setCurrentDesign] = React.useState(null); const [currentCode, setCurrentCode] = React.useState(null); const [chatRooms, setChatRooms] = React.useState([ { id: 1, name: 'UI Design Project 1' }, { id: 2, name: 'Code Generation Task' }, { id: 3, name: 'Multimodal Chat' } ]); const [isMenuOpen, setIsMenuOpen] = React.useState(false); const [activeView, setActiveView] = React.useState('design'); const handleRoomClick = (roomId)=>{ console.log(`Navigate to chat history of room: ${roomId}`); setIsMenuOpen(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `fixed inset-y-0 left-0 transform ${isMenuOpen ? 'translate-x-0' : '-translate-x-full'} w-64 bg-white border-r transition duration-200 ease-in-out z-20 md:relative md:translate-x-0`, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold p-4 border-b", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Chat Rooms"), /*#__PURE__*/ React.createElement(UserFriendlyChatRoomList, { rooms: chatRooms, onRoomClick: handleRoomClick, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white border-b p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "text-2xl md:hidden", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveView('design'), className: `px-4 py-2 rounded-l-lg ${activeView === 'design' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "UI Design"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveView('code'), className: `px-4 py-2 rounded-r-lg ${activeView === 'code' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Code"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 md:w-1/2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(UiDesignAndCodeViewer, { activeView: activeView, currentDesign: currentDesign, currentCode: currentCode, __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 flex flex-col", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(ChatHistoryDisplay, { chatHistory: chatHistory, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border rounded", placeholder: "Type your message or upload an image...", rows: "3", name: "message", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "Send"), /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 hover:text-blue-600", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paperclip", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }), " Attach"))))))); }