function ChatInput({ onSend, onAttach, disabled, placeholder = "Type a message..." }) { const [message, setMessage] = useState(""); const [upload, { loading }] = useUpload(); const [error, setError] = useState(null); const handleSubmit = useCallback(async (e)=>{ e.preventDefault(); if (message.trim() || loading) { onSend?.(message.trim()); setMessage(""); } }, [ message, onSend, loading ]); const handleFileChange = useCallback(async (e)=>{ const file = e.target.files?.[0]; if (file) { const { url, error } = await upload({ file }); if (error) { setError(error); return; } onAttach?.(url); } }, [ upload, onAttach ]); return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex items-center gap-2 w-full bg-white p-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "cursor-pointer text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*,.pdf,.doc,.docx", onChange: handleFileChange, className: "hidden", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-paperclip text-xl", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "text", value: message, onChange: (e)=>setMessage(e.target.value), placeholder: placeholder, disabled: disabled, className: "flex-1 px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: disabled || !message.trim() && !loading, className: "px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-sm absolute bottom-full left-0 mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, error)); } function ChatInputStory() { const handleSend = (message)=>{ console.log("Message sent:", message); }; const handleAttach = (url)=>{ console.log("File attached:", url); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border rounded-lg", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold p-4 border-b", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "Default Chat Input"), /*#__PURE__*/ React.createElement(ChatInput, { onSend: handleSend, onAttach: handleAttach, __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "border rounded-lg", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold p-4 border-b", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "Disabled Chat Input"), /*#__PURE__*/ React.createElement(ChatInput, { onSend: handleSend, onAttach: handleAttach, disabled: true, placeholder: "Cannot send messages...", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }))); } function UserList({ chats = [] }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, chats.map((chat)=>/*#__PURE__*/ React.createElement("div", { key: chat.id, className: "flex items-center p-4 hover:bg-gray-50 cursor-pointer transition-colors", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-12 w-12 rounded-full overflow-hidden flex-shrink-0", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: chat.profilePicture, alt: `${chat.name}'s profile picture`, className: "h-full w-full object-cover", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4 flex-1 min-w-0", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-gray-900 font-medium truncate", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, chat.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-gray-500 truncate", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, chat.lastMessage)))))); } function UserListStory() { const sampleChats = [ { id: 1, name: "Sarah Wilson", lastMessage: "Hey, are we still meeting today?", profilePicture: "/profile1.jpg" }, { id: 2, name: "James Rodriguez", lastMessage: "Thanks for the update!", profilePicture: "/profile2.jpg" }, { id: 3, name: "Emma Thompson", lastMessage: "The project looks great!", profilePicture: "/profile3.jpg" }, { id: 4, name: "Michael Chen", lastMessage: "See you tomorrow at the meeting", profilePicture: "/profile4.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UserList, { chats: sampleChats, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this })); } function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isProfileOpen, setIsProfileOpen] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#4a154b] text-white p-4 fixed top-0 left-0 right-0 z-50", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-poppins", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "K-CHAT")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-6", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "font-poppins hover:text-[#ffffff80]", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/chat", className: "font-poppins hover:text-[#ffffff80]", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "Chat"), /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "font-poppins hover:text-[#ffffff80]", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Settings")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center space-x-2", onClick: ()=>setIsProfileOpen(!isProfileOpen), __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-[#ffffff20] flex items-center justify-center", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 32, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "hidden md:inline font-poppins", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, "User Profile"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down ml-2", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this })), isProfileOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-cog mr-2", __source: { fileName: "", lineNumber: 46, columnNumber: 21 }, __self: this }), "Profile Settings"), /*#__PURE__*/ React.createElement("a", { href: "/settings?tab=theme", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paint-brush mr-2", __source: { fileName: "", lineNumber: 53, columnNumber: 21 }, __self: this }), "Theme Settings"), /*#__PURE__*/ React.createElement("a", { href: "/settings?tab=privacy", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shield-alt mr-2", __source: { fileName: "", lineNumber: 60, columnNumber: 21 }, __self: this }), "Privacy Settings"), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-100", __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt mr-2", __source: { fileName: "", lineNumber: 65, columnNumber: 21 }, __self: this }), "Logout"))), /*#__PURE__*/ React.createElement("button", { className: "md:hidden", onClick: ()=>setIsMenuOpen(!isMenuOpen), __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this })))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden mt-4 space-y-4 px-4", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block font-poppins hover:text-[#ffffff80]", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/chat", className: "block font-poppins hover:text-[#ffffff80]", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Chat"), /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "block font-poppins hover:text-[#ffffff80]", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Settings"))), /*#__PURE__*/ React.createElement("div", { className: "mt-[72px]", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this })); } function HeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 108, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this })); } function ChatMessage({ sender, content, timestamp, type = "text", imageUrl, reactions = [] }) { const [localReactions, setLocalReactions] = useState(reactions); const addReaction = useCallback((emoji)=>{ setLocalReactions((prev)=>[ ...prev, emoji ]); }, []); const formattedTime = new Date(timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); return /*#__PURE__*/ React.createElement("div", { className: "inline-block max-w-[80%] bg-white rounded-2xl p-4 shadow-md", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start gap-2", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-bold text-[#2C3E50] font-roboto mb-1", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, sender), type === "text" && /*#__PURE__*/ React.createElement("p", { className: "text-[#34495E] font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, content), type === "image" && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Message attachment", className: "rounded-lg max-w-full h-auto", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-[#95A5A6] mt-2 font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, formattedTime), localReactions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-1 mt-2", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, localReactions.map((reaction, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "text-sm bg-[#F7F9FA] rounded-full px-2 py-1", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, reaction)))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>addReaction("❤️"), className: "text-[#95A5A6] hover:text-[#E74C3C] transition-colors", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })))); } function ChatMessageStory() { const now = new Date(); const fiveMinutesAgo = new Date(now - 5 * 60000); return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4 bg-[#F8F9FA]", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatMessage, { sender: "Alice Smith", content: "Hey everyone! How's it going?", timestamp: fiveMinutesAgo, type: "text", reactions: [ "👋", "😊" ], __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChatMessage, { sender: "Bob Johnson", content: "Check out this photo!", timestamp: now, type: "image", imageUrl: "/example-image.jpg", reactions: [ "❤️", "😍" ], __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChatMessage, { sender: "Charlie Brown", content: "This is a simple text message without any reactions yet.", timestamp: now, type: "text", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this })); } function MainComponent() { const [activeTab, setActiveTab] = useState("profile"); const [name, setName] = useState(""); const [bio, setBio] = useState(""); const [email, setEmail] = useState(""); const [statusMessage, setStatusMessage] = useState(""); const [language, setLanguage] = useState("english"); const [theme, setTheme] = useState("light"); const [wallpaper, setWallpaper] = useState("#ffffff"); const [colorScheme, setColorScheme] = useState("#4a154b"); const [fontSize, setFontSize] = useState(16); const [lastSeen, setLastSeen] = useState("everyone"); const [profileVisibility, setProfileVisibility] = useState("public"); const [twoFactor, setTwoFactor] = useState(false); const [chatBackup, setChatBackup] = useState(true); const [kVault, setKVault] = useState(false); const [messageNotifications, setMessageNotifications] = useState(true); const [groupNotifications, setGroupNotifications] = useState(true); const [callNotifications, setCallNotifications] = useState(true); const [notificationSound, setNotificationSound] = useState("default"); const [avatar, setAvatar] = useState(null); const [upload, { loading }] = useUpload(); const [error, setError] = useState(null); const wallpapers = [ "#ffffff", "#f0f2f5", "#e5ddd5", "#d4e4ef" ]; const colorSchemes = [ "#4a154b", "#1a73e8", "#34a853", "#ea4335" ]; const handleAvatarUpload = async (e)=>{ if (e.target.files) { const file = e.target.files[0]; const { url, error } = await upload({ file }); if (error) { setError(error); return; } setAvatar(url); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-4 md:p-8", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-6", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("profile"), className: `p-2 text-left rounded ${activeTab === "profile" ? "bg-blue-50 text-blue-600" : "hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }), "Profile"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("privacy"), className: `p-2 text-left rounded ${activeTab === "privacy" ? "bg-blue-50 text-blue-600" : "hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shield-alt mr-2", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }), "Privacy"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("theme"), className: `p-2 text-left rounded ${activeTab === "theme" ? "bg-blue-50 text-blue-600" : "hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paint-brush mr-2", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }), "Theme"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("notifications"), className: `p-2 text-left rounded ${activeTab === "notifications" ? "bg-blue-50 text-blue-600" : "hover:bg-gray-50"}`, __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell mr-2", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }), "Notifications"))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-3/4", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, activeTab === "profile" && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 80, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: avatar || "/default-avatar.png", alt: "User profile picture", className: "w-[100px] h-[100px] rounded-full object-cover", __source: { fileName: "", lineNumber: 81, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "absolute bottom-0 right-0 bg-blue-500 p-2 rounded-full cursor-pointer", __source: { fileName: "", lineNumber: 86, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera text-white", __source: { fileName: "", lineNumber: 87, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", className: "hidden", onChange: handleAvatarUpload, __source: { fileName: "", lineNumber: 88, columnNumber: 25 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500", __source: { fileName: "", lineNumber: 96, columnNumber: 31 }, __self: this }, error)), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 100, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 101, columnNumber: 23 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: name, onChange: (e)=>setName(e.target.value), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 102, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 110, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 111, columnNumber: 23 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 112, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 120, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 121, columnNumber: 23 }, __self: this }, "Bio"), /*#__PURE__*/ React.createElement("textarea", { name: "bio", value: bio, onChange: (e)=>setBio(e.target.value), className: "w-full p-2 border rounded h-24", __source: { fileName: "", lineNumber: 122, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 129, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 130, columnNumber: 23 }, __self: this }, "Status Message"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "status", value: statusMessage, onChange: (e)=>setStatusMessage(e.target.value), className: "w-full p-2 border rounded", placeholder: "What's on your mind?", __source: { fileName: "", lineNumber: 131, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 140, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 141, columnNumber: 23 }, __self: this }, "Language"), /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "w-full p-2 border rounded", name: "language", __source: { fileName: "", lineNumber: 142, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "english", __source: { fileName: "", lineNumber: 148, columnNumber: 25 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "spanish", __source: { fileName: "", lineNumber: 149, columnNumber: 25 }, __self: this }, "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "french", __source: { fileName: "", lineNumber: 150, columnNumber: 25 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "german", __source: { fileName: "", lineNumber: 151, columnNumber: 25 }, __self: this }, "German"), /*#__PURE__*/ React.createElement("option", { value: "chinese", __source: { fileName: "", lineNumber: 152, columnNumber: 25 }, __self: this }, "Chinese"), /*#__PURE__*/ React.createElement("option", { value: "japanese", __source: { fileName: "", lineNumber: 153, columnNumber: 25 }, __self: this }, "Japanese"))))), activeTab === "theme" && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 163, columnNumber: 21 }, __self: this }, "Theme Preference"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 164, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTheme("light"), className: `p-4 border rounded ${theme === "light" ? "border-blue-500" : ""}`, __source: { fileName: "", lineNumber: 165, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sun text-2xl", __source: { fileName: "", lineNumber: 169, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 170, columnNumber: 25 }, __self: this }, "Light")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTheme("dark"), className: `p-4 border rounded ${theme === "dark" ? "border-blue-500" : ""}`, __source: { fileName: "", lineNumber: 172, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-moon text-2xl", __source: { fileName: "", lineNumber: 176, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 177, columnNumber: 25 }, __self: this }, "Dark")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 181, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 182, columnNumber: 21 }, __self: this }, "Chat Wallpaper"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 183, columnNumber: 21 }, __self: this }, wallpapers.map((wp, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setWallpaper(wp), className: `h-20 w-full rounded-lg border-2 ${wallpaper === wp ? "border-blue-500" : "border-transparent"}`, style: { backgroundColor: wp }, __source: { fileName: "", lineNumber: 185, columnNumber: 25 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 194, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 195, columnNumber: 21 }, __self: this }, "Chat Color Scheme"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 196, columnNumber: 21 }, __self: this }, colorSchemes.map((scheme, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setColorScheme(scheme), className: `h-20 w-full rounded-lg border-2 ${colorScheme === scheme ? "border-blue-500" : "border-transparent"}`, style: { backgroundColor: scheme }, __source: { fileName: "", lineNumber: 198, columnNumber: 25 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 208, columnNumber: 21 }, __self: this }, "Font Size"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "12", max: "24", value: fontSize, onChange: (e)=>setFontSize(e.target.value), className: "w-full", name: "fontSize", __source: { fileName: "", lineNumber: 209, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-2", __source: { fileName: "", lineNumber: 218, columnNumber: 21 }, __self: this }, fontSize, "px"))), activeTab === "privacy" && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 226, columnNumber: 21 }, __self: this }, "Last Seen"), /*#__PURE__*/ React.createElement("select", { value: lastSeen, onChange: (e)=>setLastSeen(e.target.value), className: "w-full p-2 border rounded", name: "lastSeen", __source: { fileName: "", lineNumber: 227, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "everyone", __source: { fileName: "", lineNumber: 233, columnNumber: 23 }, __self: this }, "Everyone"), /*#__PURE__*/ React.createElement("option", { value: "contacts", __source: { fileName: "", lineNumber: 234, columnNumber: 23 }, __self: this }, "Contacts Only"), /*#__PURE__*/ React.createElement("option", { value: "nobody", __source: { fileName: "", lineNumber: 235, columnNumber: 23 }, __self: this }, "Nobody"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 238, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 239, columnNumber: 21 }, __self: this }, "Profile Visibility"), /*#__PURE__*/ React.createElement("select", { value: profileVisibility, onChange: (e)=>setProfileVisibility(e.target.value), className: "w-full p-2 border rounded", name: "visibility", __source: { fileName: "", lineNumber: 240, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "public", __source: { fileName: "", lineNumber: 246, columnNumber: 23 }, __self: this }, "Public"), /*#__PURE__*/ React.createElement("option", { value: "private", __source: { fileName: "", lineNumber: 247, columnNumber: 23 }, __self: this }, "Private"), /*#__PURE__*/ React.createElement("option", { value: "friends", __source: { fileName: "", lineNumber: 248, columnNumber: 23 }, __self: this }, "Friends Only"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 251, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 252, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: twoFactor, onChange: (e)=>setTwoFactor(e.target.checked), className: "form-checkbox", name: "twoFactor", __source: { fileName: "", lineNumber: 253, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 260, columnNumber: 23 }, __self: this }, "Enable Two-Factor Authentication"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 263, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 264, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: chatBackup, onChange: (e)=>setChatBackup(e.target.checked), className: "form-checkbox", name: "chatBackup", __source: { fileName: "", lineNumber: 265, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 272, columnNumber: 23 }, __self: this }, "Enable Chat Backup"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 275, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 276, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: kVault, onChange: (e)=>setKVault(e.target.checked), className: "form-checkbox", name: "kVault", __source: { fileName: "", lineNumber: 277, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 284, columnNumber: 23 }, __self: this }, "Enable K-Vault Security")))), activeTab === "notifications" && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 291, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 292, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 293, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: messageNotifications, onChange: (e)=>setMessageNotifications(e.target.checked), className: "form-checkbox", name: "messageNotifications", __source: { fileName: "", lineNumber: 294, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 303, columnNumber: 23 }, __self: this }, "Message Notifications"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 306, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 307, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: groupNotifications, onChange: (e)=>setGroupNotifications(e.target.checked), className: "form-checkbox", name: "groupNotifications", __source: { fileName: "", lineNumber: 308, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 317, columnNumber: 23 }, __self: this }, "Group Notifications"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 320, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 321, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: callNotifications, onChange: (e)=>setCallNotifications(e.target.checked), className: "form-checkbox", name: "callNotifications", __source: { fileName: "", lineNumber: 322, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 329, columnNumber: 23 }, __self: this }, "Call Notifications"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 332, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 333, columnNumber: 21 }, __self: this }, "Notification Sound"), /*#__PURE__*/ React.createElement("select", { value: notificationSound, onChange: (e)=>setNotificationSound(e.target.value), className: "w-full p-2 border rounded", name: "sound", __source: { fileName: "", lineNumber: 334, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "default", __source: { fileName: "", lineNumber: 340, columnNumber: 23 }, __self: this }, "Default"), /*#__PURE__*/ React.createElement("option", { value: "chime", __source: { fileName: "", lineNumber: 341, columnNumber: 23 }, __self: this }, "Chime"), /*#__PURE__*/ React.createElement("option", { value: "bell", __source: { fileName: "", lineNumber: 342, columnNumber: 23 }, __self: this }, "Bell"), /*#__PURE__*/ React.createElement("option", { value: "none", __source: { fileName: "", lineNumber: 343, columnNumber: 23 }, __self: this }, "None")))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex justify-end", __source: { fileName: "", lineNumber: 349, 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: 350, columnNumber: 17 }, __self: this }, "Save Changes"))))))); }