@messenger-box/slack-ui-browser 10.0.3-alpha.176

package/lib/screens/Home/HomeScreen.js

@@ -0,0 +1,664 @@
+import {jsx,jsxs}from'react/jsx-runtime';import React,{createContext,useState,useMemo,useEffect,useCallback}from'react';import {useSelector}from'react-redux';import {userSelector}from'@adminide-stack/user-auth0-client';import {useLocation,useNavigate}from'@remix-run/react';import {RoomType,ApplicationRoles}from'common';import'@react-icons/all-files/fi/FiChevronDown.js';import'@react-icons/all-files/fi/FiChevronRight.js';import'@react-icons/all-files/fi/FiChevronLeft.js';import'@react-icons/all-files/fi/FiPlus.js';import {FiSearch}from'@react-icons/all-files/fi/FiSearch.js';import {FiHash}from'@react-icons/all-files/fi/FiHash.js';import {FiLock}from'@react-icons/all-files/fi/FiLock.js';import'@react-icons/all-files/fi/FiRefreshCw.js';import {FiUser}from'@react-icons/all-files/fi/FiUser.js';import {FiUserPlus}from'@react-icons/all-files/fi/FiUserPlus.js';import {FiShare2}from'@react-icons/all-files/fi/FiShare2.js';import {FiMail}from'@react-icons/all-files/fi/FiMail.js';import {FiX}from'@react-icons/all-files/fi/FiX.js';import {FiEdit}from'@react-icons/all-files/fi/FiEdit.js';import'@react-icons/all-files/fi/FiEdit2.js';import {FiMessageSquare}from'@react-icons/all-files/fi/FiMessageSquare.js';import {FiBookmark}from'@react-icons/all-files/fi/FiBookmark.js';import'@react-icons/all-files/fi/FiSend.js';import'@react-icons/all-files/fi/FiMoreHorizontal.js';import'@react-icons/all-files/fi/FiMoreVertical.js';import'@react-icons/all-files/fi/FiSettings.js';import'@react-icons/all-files/fi/FiHome.js';import'@react-icons/all-files/fi/FiInbox.js';import {FiUsers}from'@react-icons/all-files/fi/FiUsers.js';import'@react-icons/all-files/fi/FiMessageCircle.js';import {FiBell}from'@react-icons/all-files/fi/FiBell.js';import'@react-icons/all-files/fi/FiLogOut.js';import'@react-icons/all-files/fi/FiMenu.js';import'@react-icons/all-files/fi/FiTrash2.js';import'@react-icons/all-files/fi/FiCopy.js';import {FiCheck}from'@react-icons/all-files/fi/FiCheck.js';import {FiAlertCircle}from'@react-icons/all-files/fi/FiAlertCircle.js';import'@react-icons/all-files/fi/FiInfo.js';import'@react-icons/all-files/vsc/VscChromeClose.js';import'@react-icons/all-files/vsc/VscAdd.js';import'@react-icons/all-files/vsc/VscSearch.js';import'@react-icons/all-files/vsc/VscMenu.js';import'@react-icons/all-files/go/GoGlobe.js';import'@react-icons/all-files/go/GoOrganization.js';import'@react-icons/all-files/go/GoPerson.js';import'@react-icons/all-files/go/GoComment.js';import'@react-icons/all-files/ri/RiAdminFill.js';import'@react-icons/all-files/ri/RiAdminLine.js';import'@react-icons/all-files/ri/RiTeamLine.js';import'@react-icons/all-files/ri/RiTeamFill.js';import'@react-icons/all-files/ai/AiOutlineHome.js';import'@react-icons/all-files/ai/AiOutlineInbox.js';import'@react-icons/all-files/ai/AiOutlineMessage.js';import'@react-icons/all-files/ai/AiOutlineTeam.js';import'@react-icons/all-files/ai/AiOutlineSetting.js';import'@react-icons/all-files/ai/AiOutlineUser.js';import'@react-icons/all-files/ai/AiOutlinePlus.js';import'@react-icons/all-files/ai/AiOutlineClose.js';import'@react-icons/all-files/ai/AiOutlineSearch.js';import'@react-icons/all-files/ai/AiOutlineEdit.js';import'@react-icons/all-files/ai/AiOutlineDelete.js';import'@react-icons/all-files/ai/AiOutlineSend.js';import'@react-icons/all-files/ai/AiOutlineBell.js';import'@react-icons/all-files/ai/AiOutlineLogout.js';import'@react-icons/all-files/ai/AiOutlineMenu.js';import'@react-icons/all-files/ai/AiOutlineCopy.js';import'@react-icons/all-files/ai/AiOutlineCheck.js';import'@react-icons/all-files/ai/AiOutlineWarning.js';import'@react-icons/all-files/ai/AiOutlineInfoCircle.js';import'@react-icons/all-files/bs/BsHash.js';import'@react-icons/all-files/bs/BsLock.js';import'@react-icons/all-files/bs/BsPeople.js';import'@react-icons/all-files/bs/BsPerson.js';import'@react-icons/all-files/bs/BsChat.js';import'@react-icons/all-files/bs/BsChatDots.js';import'@react-icons/all-files/bs/BsThreeDots.js';import'@react-icons/all-files/bs/BsThreeDotsVertical.js';import'@react-icons/all-files/hi/HiOutlineHashtag.js';import'@react-icons/all-files/hi/HiOutlineLockClosed.js';import'@react-icons/all-files/hi/HiOutlineUserGroup.js';import'@react-icons/all-files/hi/HiOutlineUser.js';import'@react-icons/all-files/hi/HiOutlineChat.js';import'@react-icons/all-files/hi/HiOutlinePencil.js';import'@react-icons/all-files/hi/HiOutlineDotsHorizontal.js';import'@react-icons/all-files/hi/HiOutlineDotsVertical.js';import'@react-icons/all-files/hi/HiOutlinePlus.js';import'@react-icons/all-files/hi/HiOutlineX.js';import'@react-icons/all-files/hi/HiOutlineSearch.js';import'@react-icons/all-files/hi/HiOutlineHome.js';import'@react-icons/all-files/hi/HiOutlineInbox.js';import'@react-icons/all-files/hi/HiOutlineBell.js';import'@react-icons/all-files/hi/HiOutlineCog.js';import'@react-icons/all-files/io/IoMdAdd.js';import'@react-icons/all-files/io/IoMdClose.js';import'@react-icons/all-files/io/IoMdSearch.js';import'@react-icons/all-files/io/IoMdMenu.js';import'@react-icons/all-files/io/IoMdSettings.js';import'@react-icons/all-files/io/IoMdPerson.js';import'@react-icons/all-files/io/IoMdPeople.js';import'@react-icons/all-files/io/IoMdChatbubbles.js';import'@react-icons/all-files/io/IoMdNotifications.js';import'@react-icons/all-files/md/MdAdd.js';import'@react-icons/all-files/md/MdClose.js';import'@react-icons/all-files/md/MdSearch.js';import'@react-icons/all-files/md/MdMenu.js';import'@react-icons/all-files/md/MdSettings.js';import'@react-icons/all-files/md/MdPerson.js';import'@react-icons/all-files/md/MdPeople.js';import'@react-icons/all-files/md/MdChat.js';import'@react-icons/all-files/md/MdNotifications.js';import'@react-icons/all-files/md/MdHome.js';import'@react-icons/all-files/md/MdInbox.js';import'@react-icons/all-files/md/MdEdit.js';import'@react-icons/all-files/md/MdDelete.js';import'@react-icons/all-files/md/MdSend.js';import'@react-icons/all-files/md/MdRefresh.js';import'@react-icons/all-files/md/MdMoreHoriz.js';import'@react-icons/all-files/md/MdMoreVert.js';import'@react-icons/all-files/md/MdLock.js';import'@react-icons/all-files/md/MdPublic.js';import {FiFile}from'@react-icons/all-files/fi/FiFile.js';import {TopCommonSlider}from'../../components/Home/TopCommonSlider.js';import {Teams}from'../../components/Home/Teams.js';import {Channels}from'../../components/Home/Channels.js';import {DirectChannels}from'../../components/Home/DirectChannels.js';import {InviteMembers}from'../../components/Home/InviteMembers.js';import {useOptimizedChannelsQueries}from'../../hooks/useOptimizedChannelsQueries.js';import {useRouteState}from'../../hooks/useRouteState.js';import {slackUiRoutePaths}from'../../constants/routes.js';import {useAddChannelMutation,useAddDirectChannelMutation,useCreateTeamMutation,useSendOrganizationInvitationMutation}from'../../queries/slackuiQueries.js';import {useGetOrganizationMembersQuery,useGetOrganizationDetailQuery}from'common/graphql';const RefetchContext = createContext({
+  shouldRefetch: false,
+  setRefetchStatus: (status) => {
+  }
+});
+const ChannelsDataContext = createContext({
+  channelsData: [],
+  directChannelsData: [],
+  loading: false,
+  error: null,
+  refetchChannels: () => {
+  },
+  hasChannels: false,
+  hasDirectChannels: false
+});
+const HomeScreen = () => {
+  const currentUser = useSelector(userSelector);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [shouldRefetch, setShouldRefetch] = useState(false);
+  const orgSlug = location.pathname.split("/")[2];
+  const {
+    channelsData,
+    directChannelsData,
+    loading,
+    error,
+    refetchChannels,
+    hasChannels,
+    hasDirectChannels
+  } = useOptimizedChannelsQueries({
+    orgName: orgSlug,
+    enabled: !!orgSlug
+  });
+  const refetchContextValue = useMemo(() => ({
+    shouldRefetch,
+    setRefetchStatus: setShouldRefetch
+  }), [shouldRefetch]);
+  const channelsDataContextValue = useMemo(() => ({
+    channelsData,
+    directChannelsData,
+    loading,
+    error,
+    refetchChannels,
+    hasChannels,
+    hasDirectChannels
+  }), [channelsData, directChannelsData, loading, error, refetchChannels, hasChannels, hasDirectChannels]);
+  useEffect(() => {
+    if (orgSlug) {
+      refetchChannels();
+    }
+  }, [orgSlug]);
+  const handleNewMessage = useCallback(() => {
+    navigate(slackUiRoutePaths.messageNew(orgSlug));
+  }, [navigate, orgSlug]);
+  if (!currentUser) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full bg-white", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500" }) });
+  }
+  if (!orgSlug) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full bg-white", children: /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "No Organization found" }) });
+  }
+  return /* @__PURE__ */ jsx(RefetchContext.Provider, { value: refetchContextValue, children: /* @__PURE__ */ jsx(ChannelsDataContext.Provider, { value: channelsDataContextValue, children: /* @__PURE__ */ jsxs("div", { className: "flex h-full bg-white", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-72 flex-shrink-0 border-r border-gray-200 flex flex-col h-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-4 border-b border-gray-200", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 truncate", children: orgSlug }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+        /* @__PURE__ */ jsx(TopCommonSlider, {}),
+        /* @__PURE__ */ jsx("hr", { className: "border-gray-200 my-2" }),
+        /* @__PURE__ */ jsx(Teams, { teams: [], loading: false, error: null, onRefetch: () => {
+        } }),
+        /* @__PURE__ */ jsx("hr", { className: "border-gray-200 my-2" }),
+        /* @__PURE__ */ jsx(Channels, { channels: channelsData, loading, error, onRefetch: refetchChannels, currentUser }),
+        /* @__PURE__ */ jsx("hr", { className: "border-gray-200 my-2" }),
+        /* @__PURE__ */ jsx(DirectChannels, { directChannels: directChannelsData, loading, error, onRefetch: refetchChannels, currentUser }),
+        /* @__PURE__ */ jsx("hr", { className: "border-gray-200 my-2" }),
+        /* @__PURE__ */ jsx(InviteMembers, { organizationName: orgSlug })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 border-t border-gray-200", children: /* @__PURE__ */ jsxs("button", { onClick: handleNewMessage, className: "w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors", children: [
+        /* @__PURE__ */ jsx(FiEdit, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsx("span", { children: "New Message" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col h-full overflow-hidden", children: /* @__PURE__ */ jsx(MessagePanel, { orgSlug, currentUser, channelsData, directChannelsData }) })
+  ] }) }) });
+};
+const MessagePanel = ({
+  orgSlug,
+  currentUser,
+  channelsData,
+  directChannelsData
+}) => {
+  const routeState = useRouteState(orgSlug);
+  const {
+    currentState,
+    channelName,
+    teamName,
+    isHome,
+    isChannelView,
+    isChannelNew,
+    isMessageView,
+    isMessageNew,
+    isTeamView,
+    isTeamNew,
+    isThreads,
+    isActivity,
+    isDrafts,
+    isSaved,
+    isFiles,
+    isSearch,
+    isInvite,
+    isInviteContacts,
+    isInviteEmail,
+    isInviteLink,
+    navigateToHome,
+    navigateToChannel,
+    navigateToChannelNew,
+    navigateToMessage,
+    navigateToMessageNew
+  } = routeState;
+  const selectedChannel = useMemo(() => {
+    if (isChannelView && channelName) {
+      return channelsData.find((ch) => ch.title === channelName || ch.name === channelName);
+    }
+    if (isMessageView && channelName) {
+      return directChannelsData.find((dm) => {
+        var _a;
+        return dm.title === channelName || dm.name === channelName || ((_a = dm.displayName) == null ? void 0 : _a.includes(channelName));
+      });
+    }
+    return null;
+  }, [isChannelView, isMessageView, channelName, channelsData, directChannelsData]);
+  if (isChannelNew) {
+    return /* @__PURE__ */ jsx(NewChannelPanel, { orgSlug, onClose: navigateToHome });
+  }
+  if (isMessageNew) {
+    return /* @__PURE__ */ jsx(NewMessagePanel, { orgSlug, currentUser, onClose: navigateToHome });
+  }
+  if (isTeamNew) {
+    return /* @__PURE__ */ jsx(GenericPanel, { title: "Create a Team", icon: /* @__PURE__ */ jsx(FiUsers, { className: "w-12 h-12 text-blue-600" }), description: "Teams help organize groups of people working together", orgSlug, onClose: navigateToHome, children: /* @__PURE__ */ jsx(NewTeamForm, { orgSlug, onClose: navigateToHome }) });
+  }
+  if (isTeamView && teamName) {
+    return /* @__PURE__ */ jsx(GenericPanel, { title: `Team: ${teamName}`, icon: /* @__PURE__ */ jsx(FiUsers, { className: "w-12 h-12 text-blue-600" }), description: "Team details and members", orgSlug });
+  }
+  if (isThreads) {
+    return /* @__PURE__ */ jsx(GenericPanel, { title: "Threads", icon: /* @__PURE__ */ jsx(FiMessageSquare, { className: "w-12 h-12 text-blue-600" }), description: "Your thread replies will appear here", orgSlug });
+  }
+  if (isInviteContacts) {
+    return /* @__PURE__ */ jsx(GenericPanel, { title: "Invite from Contacts", icon: /* @__PURE__ */ jsx(FiUserPlus, { className: "w-12 h-12 text-blue-600" }), description: "Select contacts to invite to your workspace", orgSlug, onClose: () => routeState.navigateToInvite(), children: /* @__PURE__ */ jsx(InviteContactsForm, { orgSlug }) });
+  }
+  if (isInviteEmail) {
+    return /* @__PURE__ */ jsx(GenericPanel, { title: "Invite by Email", icon: /* @__PURE__ */ jsx(FiMail, { className: "w-12 h-12 text-blue-600" }), description: "Send email invitations to join your workspace", orgSlug, onClose: () => routeState.navigateToInvite(), children: /* @__PURE__ */ jsx(InviteEmailForm, { orgSlug }) });
+  }
+  if (isInviteLink) {
+    return /* @__PURE__ */ jsx(GenericPanel, { title: "Invite Link", icon: /* @__PURE__ */ jsx(FiShare2, { className: "w-12 h-12 text-blue-600" }), description: "Share this link to invite people to your workspace", orgSlug, onClose: () => routeState.navigateToInvite(), children: /* @__PURE__ */ jsx(InviteLinkForm, { orgSlug }) });
+  }
+  if (isInvite) {
+    return /* @__PURE__ */ jsx(InvitePanel, { orgSlug, routeState });
+  }
+  if (isActivity) {
+    return /* @__PURE__ */ jsx(GenericPanel, { title: "Activity", icon: /* @__PURE__ */ jsx(FiBell, { className: "w-12 h-12 text-blue-600" }), description: "Your recent activity and notifications", orgSlug });
+  }
+  if (isDrafts) {
+    return /* @__PURE__ */ jsx(GenericPanel, { title: "Drafts", icon: /* @__PURE__ */ jsx(FiEdit, { className: "w-12 h-12 text-blue-600" }), description: "Your unsent message drafts", orgSlug });
+  }
+  if (isSaved) {
+    return /* @__PURE__ */ jsx(GenericPanel, { title: "Saved Items", icon: /* @__PURE__ */ jsx(FiBookmark, { className: "w-12 h-12 text-blue-600" }), description: "Messages and files you've saved for later", orgSlug });
+  }
+  if (isFiles) {
+    return /* @__PURE__ */ jsx(GenericPanel, { title: "Files", icon: /* @__PURE__ */ jsx(FiFile, { className: "w-12 h-12 text-blue-600" }), description: "Files shared in your workspace", orgSlug });
+  }
+  if (isSearch) {
+    return /* @__PURE__ */ jsx(GenericPanel, { title: "Search", icon: /* @__PURE__ */ jsx(FiSearch, { className: "w-12 h-12 text-blue-600" }), description: "Search messages, files, and channels", orgSlug, children: /* @__PURE__ */ jsx(SearchForm, { orgSlug }) });
+  }
+  if (selectedChannel) {
+    return /* @__PURE__ */ jsx(ChannelMessagingView, { channel: selectedChannel, currentUser, isDirectMessage: isMessageView });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center text-gray-500 p-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ jsx(FiMessageSquare, { className: "w-12 h-12 text-blue-600" }) }),
+    /* @__PURE__ */ jsxs("h3", { className: "text-xl font-semibold text-gray-900 mb-2", children: [
+      "Welcome to ",
+      orgSlug
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-center text-gray-600 mb-6 max-w-md", children: "Select a channel or direct message from the sidebar to start chatting, or create a new conversation." }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsxs("button", { onClick: navigateToChannelNew, className: "flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors", children: [
+        /* @__PURE__ */ jsx(FiHash, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsx("span", { children: "Create Channel" })
+      ] }),
+      /* @__PURE__ */ jsxs("button", { onClick: navigateToMessageNew, className: "flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors", children: [
+        /* @__PURE__ */ jsx(FiEdit, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsx("span", { children: "New Message" })
+      ] })
+    ] })
+  ] });
+};
+const NewChannelPanel = ({
+  orgSlug,
+  onClose,
+  onSuccess
+}) => {
+  const [channelName, setChannelName] = useState("");
+  const [description, setDescription] = useState("");
+  const [isPrivate, setIsPrivate] = useState(false);
+  const [error, setError] = useState(null);
+  const navigate = useNavigate();
+  const [createChannel, {
+    loading: isLoading
+  }] = useAddChannelMutation({
+    onCompleted: (data) => {
+      if (data == null ? void 0 : data.createChannel) {
+        const createdChannel = data.createChannel;
+        navigate(slackUiRoutePaths.channel(orgSlug, createdChannel.title || createdChannel.name));
+        onSuccess == null ? void 0 : onSuccess();
+      }
+    },
+    onError: (err) => {
+      console.error("Error creating channel:", err);
+      setError(err.message || "Failed to create channel. Please try again.");
+    }
+  });
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!channelName.trim()) return;
+    setError(null);
+    createChannel({
+      variables: {
+        name: channelName.toLowerCase().replace(/\s+/g, "-"),
+        description: description || void 0,
+        type: isPrivate ? RoomType.Private : RoomType.Public
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Create a Channel" }),
+      /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-100 rounded-full", children: /* @__PURE__ */ jsx(FiX, { className: "w-5 h-5 text-gray-500" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex-1 overflow-y-auto p-6 space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Channel Type" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => setIsPrivate(false), className: `flex-1 flex items-center gap-3 p-4 rounded-lg border-2 transition-colors ${!isPrivate ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300"}`, children: [
+            /* @__PURE__ */ jsx(FiHash, { className: `w-5 h-5 ${!isPrivate ? "text-blue-600" : "text-gray-400"}` }),
+            /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+              /* @__PURE__ */ jsx("div", { className: `font-medium ${!isPrivate ? "text-blue-700" : "text-gray-700"}`, children: "Public" }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: "Anyone can join" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => setIsPrivate(true), className: `flex-1 flex items-center gap-3 p-4 rounded-lg border-2 transition-colors ${isPrivate ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300"}`, children: [
+            /* @__PURE__ */ jsx(FiLock, { className: `w-5 h-5 ${isPrivate ? "text-blue-600" : "text-gray-400"}` }),
+            /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+              /* @__PURE__ */ jsx("div", { className: `font-medium ${isPrivate ? "text-blue-700" : "text-gray-700"}`, children: "Private" }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: "Invite only" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Name" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", children: isPrivate ? /* @__PURE__ */ jsx(FiLock, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(FiHash, { className: "w-4 h-4" }) }),
+          /* @__PURE__ */ jsx("input", { type: "text", value: channelName, onChange: (e) => setChannelName(e.target.value.toLowerCase().replace(/\s+/g, "-")), placeholder: "e.g. marketing", className: "w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-gray-700", children: [
+          "Description ",
+          /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "(optional)" })
+        ] }),
+        /* @__PURE__ */ jsx("textarea", { value: description, onChange: (e) => setDescription(e.target.value), placeholder: "What's this channel about?", rows: 3, className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none" })
+      ] }),
+      error && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700", children: [
+        /* @__PURE__ */ jsx(FiAlertCircle, { className: "w-5 h-5 flex-shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: error })
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "submit", disabled: !channelName.trim() || isLoading, className: "w-full py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: isLoading ? "Creating..." : "Create Channel" })
+    ] })
+  ] });
+};
+const NewMessagePanel = ({
+  orgSlug,
+  currentUser,
+  onClose,
+  onSuccess
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedUsers, setSelectedUsers] = useState([]);
+  const [error, setError] = useState(null);
+  const navigate = useNavigate();
+  const {
+    data: membersData,
+    loading: membersLoading
+  } = useGetOrganizationMembersQuery({
+    variables: {
+      orgName: orgSlug
+    },
+    skip: !orgSlug
+  });
+  const [createDirectChannel, {
+    loading: isLoading
+  }] = useAddDirectChannelMutation({
+    onCompleted: (data) => {
+      if (data == null ? void 0 : data.createDirectChannel) {
+        const channel = data.createDirectChannel;
+        navigate(slackUiRoutePaths.message(orgSlug, channel.title || channel.name || channel.id));
+        onSuccess == null ? void 0 : onSuccess();
+      }
+    },
+    onError: (err) => {
+      console.error("Error creating direct channel:", err);
+      setError(err.message || "Failed to start conversation. Please try again.");
+    }
+  });
+  const filteredMembers = useMemo(() => {
+    var _a;
+    if (!((_a = membersData == null ? void 0 : membersData.getOrganizationMembers) == null ? void 0 : _a.data)) return [];
+    const members = membersData.getOrganizationMembers.data;
+    const availableMembers = members.filter((member) => member.id !== (currentUser == null ? void 0 : currentUser.id) && !selectedUsers.some((u) => u.id === member.id));
+    if (!searchQuery.trim()) return availableMembers;
+    const query = searchQuery.toLowerCase();
+    return availableMembers.filter((member) => {
+      var _a2, _b, _c;
+      return ((_a2 = member.username) == null ? void 0 : _a2.toLowerCase().includes(query)) || ((_b = member.email) == null ? void 0 : _b.toLowerCase().includes(query)) || ((_c = member.name) == null ? void 0 : _c.toLowerCase().includes(query));
+    });
+  }, [membersData, searchQuery, selectedUsers, currentUser]);
+  const handleSelectUser = (user) => {
+    setSelectedUsers([...selectedUsers, user]);
+    setSearchQuery("");
+  };
+  const handleStartConversation = () => {
+    if (selectedUsers.length === 0) return;
+    setError(null);
+    const receiverIds = selectedUsers.map((u) => u.id);
+    const displayName = selectedUsers.length === 1 ? selectedUsers[0].username : selectedUsers.map((u) => u.username).join(", ");
+    createDirectChannel({
+      variables: {
+        receiver: receiverIds,
+        displayName,
+        channelOptions: {
+          schemeAdmin: false
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "New Message" }),
+      /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-100 rounded-full", children: /* @__PURE__ */ jsx(FiX, { className: "w-5 h-5 text-gray-500" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-b border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "To:" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-wrap gap-2", children: [
+        selectedUsers.map((user, idx) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-sm", children: [
+          user.username || user.email,
+          /* @__PURE__ */ jsx("button", { onClick: () => setSelectedUsers(selectedUsers.filter((_, i) => i !== idx)), children: /* @__PURE__ */ jsx(FiX, { className: "w-3 h-3" }) })
+        ] }, idx)),
+        /* @__PURE__ */ jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search for people...", className: "flex-1 min-w-[200px] outline-none" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-6", children: [
+      membersLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500" }) }) : filteredMembers.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filteredMembers.map((member) => /* @__PURE__ */ jsxs("button", { onClick: () => handleSelectUser(member), className: "w-full flex items-center gap-3 p-3 rounded-lg hover:bg-gray-100 transition-colors text-left", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx(FiUser, { className: "w-5 h-5 text-gray-600" }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900", children: member.username || member.name }),
+          member.email && /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: member.email })
+        ] })
+      ] }, member.id)) }) : searchQuery ? /* @__PURE__ */ jsxs("div", { className: "text-center text-gray-500 py-8", children: [
+        /* @__PURE__ */ jsx(FiUser, { className: "w-12 h-12 mx-auto mb-3 text-gray-300" }),
+        /* @__PURE__ */ jsxs("p", { children: [
+          'No members found matching "',
+          searchQuery,
+          '"'
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "text-center text-gray-500 py-8", children: [
+        /* @__PURE__ */ jsx(FiUser, { className: "w-12 h-12 mx-auto mb-3 text-gray-300" }),
+        /* @__PURE__ */ jsx("p", { children: "Search for people to start a conversation" })
+      ] }),
+      error && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700", children: [
+        /* @__PURE__ */ jsx(FiAlertCircle, { className: "w-5 h-5 flex-shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: error })
+      ] })
+    ] }),
+    selectedUsers.length > 0 && /* @__PURE__ */ jsx("div", { className: "p-4 border-t border-gray-200", children: /* @__PURE__ */ jsx("button", { onClick: handleStartConversation, disabled: isLoading, className: `w-full py-3 rounded-lg font-medium transition-colors ${isLoading ? "bg-gray-400 text-gray-200 cursor-not-allowed" : "bg-blue-600 text-white hover:bg-blue-700"}`, children: isLoading ? "Creating..." : "Start Conversation" }) })
+  ] });
+};
+const GenericPanel = ({
+  title,
+  icon,
+  description,
+  orgSlug,
+  onClose,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900", children: title }),
+      onClose && /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-100 rounded-full", children: /* @__PURE__ */ jsx(FiX, { className: "w-5 h-5 text-gray-500" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-6", children: children ? children : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-6", children: icon }),
+      /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-gray-900 mb-2", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 max-w-md", children: description })
+    ] }) })
+  ] });
+};
+const InvitePanel = ({
+  orgSlug,
+  routeState
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center px-6 py-4 border-b border-gray-200", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Invite People" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-gray-600 text-center mb-6", children: [
+        "Choose how you'd like to invite people to ",
+        orgSlug
+      ] }),
+      /* @__PURE__ */ jsxs("button", { onClick: () => routeState.navigateToInviteContacts(), className: "w-full flex items-center gap-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx(FiUserPlus, { className: "w-5 h-5 text-blue-600" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900", children: "From Contacts" }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: "Invite from your contact list" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("button", { onClick: () => routeState.navigateToInviteEmail(), className: "w-full flex items-center gap-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-green-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx(FiMail, { className: "w-5 h-5 text-green-600" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900", children: "By Email" }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: "Send email invitations" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("button", { onClick: () => routeState.navigateToInviteLink(), className: "w-full flex items-center gap-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx(FiShare2, { className: "w-5 h-5 text-purple-600" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900", children: "Share Link" }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: "Copy and share an invite link" })
+        ] })
+      ] })
+    ] }) })
+  ] });
+};
+const NewTeamForm = ({
+  orgSlug,
+  onClose
+}) => {
+  const [teamName, setTeamName] = useState("");
+  const [description, setDescription] = useState("");
+  const [formError, setFormError] = useState(null);
+  const navigate = useNavigate();
+  const [createTeam, {
+    loading,
+    error
+  }] = useCreateTeamMutation({
+    context: {
+      headers: {
+        orgname: orgSlug
+      }
+    },
+    onCompleted: (data) => {
+      if (data == null ? void 0 : data.createTeam) {
+        const teamSlug = data.createTeam.name || teamName.toLowerCase().replace(/\s+/g, "-");
+        navigate(slackUiRoutePaths.team(orgSlug, teamSlug));
+      }
+    },
+    onError: (err) => {
+      console.error("Error creating team:", err);
+      setFormError(err.message || "Failed to create team. Please try again.");
+    }
+  });
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!teamName.trim()) return;
+    setFormError(null);
+    createTeam({
+      variables: {
+        orgName: orgSlug,
+        request: {
+          name: teamName.trim().toLowerCase().replace(/\s+/g, "-"),
+          title: teamName.trim(),
+          description: description.trim() || void 0
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Team Name" }),
+      /* @__PURE__ */ jsx("input", { type: "text", value: teamName, onChange: (e) => setTeamName(e.target.value), placeholder: "e.g. Engineering", className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-gray-700", children: [
+        "Description ",
+        /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "(optional)" })
+      ] }),
+      /* @__PURE__ */ jsx("textarea", { value: description, onChange: (e) => setDescription(e.target.value), placeholder: "What's this team about?", rows: 3, className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none" })
+    ] }),
+    (formError || error) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700", children: [
+      /* @__PURE__ */ jsx(FiAlertCircle, { className: "w-5 h-5 flex-shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm", children: formError || (error == null ? void 0 : error.message) || "An error occurred" })
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "submit", disabled: !teamName.trim() || loading, className: `w-full py-3 rounded-lg font-medium transition-colors ${loading ? "bg-gray-400 text-gray-200 cursor-not-allowed" : "bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"}`, children: loading ? "Creating..." : "Create Team" })
+  ] });
+};
+const InviteContactsForm = ({
+  orgSlug
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search contacts...", className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" }),
+    /* @__PURE__ */ jsxs("div", { className: "text-center text-gray-500 py-8", children: [
+      /* @__PURE__ */ jsx(FiUsers, { className: "w-12 h-12 mx-auto mb-3 text-gray-300" }),
+      /* @__PURE__ */ jsx("p", { children: "Search for contacts to invite" })
+    ] })
+  ] });
+};
+const InviteEmailForm = ({
+  orgSlug
+}) => {
+  var _a;
+  const [email, setEmail] = useState("");
+  const [emails, setEmails] = useState([]);
+  const [formError, setFormError] = useState(null);
+  const [successMessage, setSuccessMessage] = useState(null);
+  const {
+    data: orgData
+  } = useGetOrganizationDetailQuery({
+    variables: {
+      where: {
+        name: orgSlug
+      }
+    },
+    skip: !orgSlug
+  });
+  const orgId = (_a = orgData == null ? void 0 : orgData.getOrganizationDetail) == null ? void 0 : _a.id;
+  const [sendInvitation, {
+    loading,
+    error
+  }] = useSendOrganizationInvitationMutation({
+    onCompleted: (data) => {
+      if (data == null ? void 0 : data.sendOrganizationInvitation) {
+        setSuccessMessage(`Invitation${emails.length > 1 ? "s" : ""} sent successfully!`);
+        setEmails([]);
+        setEmail("");
+        setTimeout(() => setSuccessMessage(null), 3e3);
+      }
+    },
+    onError: (err) => {
+      console.error("Error sending invitation:", err);
+      setFormError(err.message || "Failed to send invitation. Please try again.");
+    }
+  });
+  const handleAddEmail = () => {
+    const trimmedEmail = email.trim().toLowerCase();
+    if (trimmedEmail && !emails.includes(trimmedEmail) && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail)) {
+      setEmails([...emails, trimmedEmail]);
+      setEmail("");
+      setFormError(null);
+    } else if (trimmedEmail && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail)) {
+      setFormError("Please enter a valid email address");
+    }
+  };
+  const handleSendInvitations = async () => {
+    if (emails.length === 0) return;
+    if (!orgId) {
+      setFormError("Organization not found. Please try again.");
+      return;
+    }
+    setFormError(null);
+    setSuccessMessage(null);
+    for (const emailAddr of emails) {
+      await sendInvitation({
+        variables: {
+          request: {
+            email: emailAddr,
+            orgId,
+            orgName: orgSlug,
+            role: ApplicationRoles.Member
+          }
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "Enter email address", className: "flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500", onKeyDown: (e) => e.key === "Enter" && (e.preventDefault(), handleAddEmail()) }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: handleAddEmail, className: "px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors", children: "Add" })
+    ] }),
+    emails.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: emails.map((e, idx) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm", children: [
+      e,
+      /* @__PURE__ */ jsx("button", { onClick: () => setEmails(emails.filter((_, i) => i !== idx)), children: /* @__PURE__ */ jsx(FiX, { className: "w-3 h-3" }) })
+    ] }, idx)) }),
+    (formError || error) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700", children: [
+      /* @__PURE__ */ jsx(FiAlertCircle, { className: "w-5 h-5 flex-shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm", children: formError || (error == null ? void 0 : error.message) || "An error occurred" })
+    ] }),
+    successMessage && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700", children: [
+      /* @__PURE__ */ jsx(FiCheck, { className: "w-5 h-5 flex-shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm", children: successMessage })
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: handleSendInvitations, disabled: emails.length === 0 || loading, className: `w-full py-3 rounded-lg font-medium transition-colors ${loading ? "bg-gray-400 text-gray-200 cursor-not-allowed" : "bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"}`, children: loading ? "Sending..." : "Send Invitations" })
+  ] });
+};
+const InviteLinkForm = ({
+  orgSlug
+}) => {
+  const inviteLink = `${window.location.origin}/o/${orgSlug}/join`;
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(inviteLink);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-gray-600 text-sm", children: [
+      "Share this link with anyone you'd like to invite to ",
+      orgSlug
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx("input", { type: "text", value: inviteLink, readOnly: true, className: "flex-1 px-4 py-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-600" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: handleCopy, className: "px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors", children: copied ? "Copied!" : "Copy" })
+    ] })
+  ] });
+};
+const SearchForm = ({
+  orgSlug
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search messages, files, and channels...", className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" }),
+    /* @__PURE__ */ jsxs("div", { className: "text-center text-gray-500 py-8", children: [
+      /* @__PURE__ */ jsx(FiSearch, { className: "w-12 h-12 mx-auto mb-3 text-gray-300" }),
+      /* @__PURE__ */ jsx("p", { children: "Enter a search term to find messages, files, and channels" })
+    ] })
+  ] });
+};
+const ChannelMessagingView = ({
+  channel,
+  currentUser,
+  isDirectMessage
+}) => {
+  const [message, setMessage] = useState("");
+  const handleSendMessage = (e) => {
+    e.preventDefault();
+    if (!message.trim()) return;
+    console.log("Sending message:", message);
+    setMessage("");
+  };
+  const channelTitle = (channel == null ? void 0 : channel.title) || (channel == null ? void 0 : channel.name) || (channel == null ? void 0 : channel.displayName) || "Channel";
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center px-6 py-4 border-b border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      isDirectMessage ? /* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx(FiUser, { className: "w-4 h-4 text-gray-600" }) }) : /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: (channel == null ? void 0 : channel.type) === "PRIVATE" ? /* @__PURE__ */ jsx(FiLock, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(FiHash, { className: "w-5 h-5" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "font-semibold text-gray-900", children: channelTitle }),
+        (channel == null ? void 0 : channel.description) && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 truncate", children: channel.description })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-6", children: /* @__PURE__ */ jsx("div", { className: "text-center text-gray-500 py-8", children: /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+      "This is the start of your conversation in ",
+      /* @__PURE__ */ jsx("strong", { children: channelTitle })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("form", { onSubmit: handleSendMessage, className: "p-4 border-t border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("input", { type: "text", value: message, onChange: (e) => setMessage(e.target.value), placeholder: `Message ${isDirectMessage ? "" : "#"}${channelTitle}`, className: "flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" }),
+      /* @__PURE__ */ jsx("button", { type: "submit", disabled: !message.trim(), className: "px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Send" })
+    ] }) })
+  ] });
+};
+var HomeScreen$1 = React.memo(HomeScreen);export{ChannelsDataContext,RefetchContext,HomeScreen$1 as default};//# sourceMappingURL=HomeScreen.js.map