@messenger-box/tailwind-ui-inbox 10.0.3-alpha.100

package/lib/container/Inbox.js

@@ -0,0 +1,955 @@
+import React__default,{useReducer,useMemo,useEffect,useCallback,useRef}from'react';import {uniqBy,orderBy}from'lodash-es';import {MessagesDocument,useSendMessagesMutation,OnChatMessageAddedDocument}from'common/graphql';import {useUploadFiles}from'@messenger-box/platform-client';import {RoomType}from'common';import {useSelector,shallowEqual}from'react-redux';import {useParams,useNavigate}from'@remix-run/react';import'../components/inbox/FilesList.js';import'../components/inbox/MessageItem.js';import'../components/inbox/ThreadItem.js';import'date-fns';import'@react-icons/all-files/bs/BsFlag.js';import'../components/InboxMessage/ConversationItem.js';import'../components/InboxMessage/ServiceConversationItem.js';import {LeftSidebar}from'../components/InboxMessage/LeftSidebar.js';import {MessageInput}from'../components/InboxMessage/MessageInput.js';import {Messages}from'../components/InboxMessage/Messages.js';import'react-i18next';import'@react-icons/all-files/bi/BiImage.js';import'@react-icons/all-files/ai/AiOutlineSecurityScan.js';import'@react-icons/all-files/fi/FiCheck.js';import'@react-icons/all-files/bs/BsFillStarFill.js';import'@common-stack/components-pro';import'react-markdown';import'remark-gfm';import {RightSidebar}from'../components/InboxMessage/RightSidebar.js';import'../components/InboxMessage/ServiceInboxItem.js';import {config}from'../config/env-config.js';import'../components/ModelConfigPanel.js';import'../enums/messenger-slot-fill-name-enum.js';import {objectId}from'@messenger-box/core';import'../components/live-code-editor/hybrid-live-editor.js';import'../components/AIAgent/AIAgent.js';import {userSelector}from'@adminide-stack/user-auth0-client';import {applyFooterStyles}from'./apply-footer-styles.js';import {ThreadsInbox}from'./ThreadsInbox.js';import {ThreadMessagesInbox}from'./ThreadMessagesInbox.js';import {useApolloClient}from'@apollo/client/index.js';import {SubscriptionHandler}from'../components/InboxMessage/SubscriptionHandler.js';const {
+  MESSAGES_PER_PAGE
+} = config;
+// Static utility hooks and components
+const useMediaQuery = query => {
+  const [matches, setMatches] = React__default.useState(false);
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const mediaQuery = window.matchMedia(query);
+    const updateMatches = () => setMatches(mediaQuery.matches);
+    updateMatches();
+    mediaQuery.addEventListener('change', updateMatches);
+    return () => mediaQuery.removeEventListener('change', updateMatches);
+  }, [query]);
+  return matches;
+};
+// Hook to get window dimensions
+const useWindowDimensions = () => {
+  const [windowDimensions, setWindowDimensions] = React__default.useState({
+    width: typeof window !== 'undefined' ? window.innerWidth : 1024,
+    height: typeof window !== 'undefined' ? window.innerHeight : 768
+  });
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const handleResize = () => {
+      setWindowDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize(); // Set initial dimensions
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowDimensions;
+};
+// Static components
+const Spinner = React__default.memo(({
+  className = ''
+}) => React__default.createElement("div", {
+  className: `animate-spin rounded-full border-4 border-gray-200 border-t-blue-500 ${className}`
+}, React__default.createElement("span", {
+  className: "sr-only"
+}, "Loading...")));
+const Drawer = React__default.memo(({
+  isOpen,
+  onClose,
+  children,
+  title
+}) => {
+  if (!isOpen) return null;
+  return React__default.createElement("div", {
+    className: "fixed inset-0 z-50 overflow-hidden"
+  }, React__default.createElement("div", {
+    className: "absolute inset-0 bg-black bg-opacity-50",
+    onClick: onClose
+  }), React__default.createElement("div", {
+    className: "absolute bottom-0 left-0 right-0 bg-white rounded-t-lg shadow-lg max-h-[80vh] flex flex-col overflow-hidden"
+  }, React__default.createElement("div", {
+    className: "flex items-center justify-between p-4 border-b border-gray-200 flex-shrink-0"
+  }, React__default.createElement("h2", {
+    className: "text-lg font-semibold truncate"
+  }, title), React__default.createElement("button", {
+    onClick: onClose,
+    className: "p-1 hover:bg-gray-100 rounded-full transition-colors flex-shrink-0 ml-2"
+  }, React__default.createElement("svg", {
+    className: "w-6 h-6",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M6 18L18 6M6 6l12 12"
+  })))), React__default.createElement("div", {
+    className: "flex-1 p-4 overflow-y-auto",
+    style: {
+      minHeight: 0
+    }
+  }, children)));
+});
+const EmptyState = React__default.memo(() => React__default.createElement("div", {
+  className: "h-full flex items-center justify-center bg-gray-100 p-4 sm:p-6 overflow-hidden"
+}, React__default.createElement("div", {
+  className: "text-center max-w-sm mx-auto"
+}, React__default.createElement("div", {
+  className: "text-3xl sm:text-4xl text-gray-400 mb-4"
+}, "\uD83D\uDCAC"), React__default.createElement("h3", {
+  className: "text-lg sm:text-xl font-semibold text-gray-600 mb-2"
+}, "Welcome to Messenger"), React__default.createElement("p", {
+  className: "text-sm sm:text-base text-gray-500 leading-relaxed"
+}, "Select a conversation from the sidebar to start messaging"))));
+// Mobile preview reducer
+const mobilePreviewReducer = (state, action) => {
+  if (action.type === 'update') {
+    return {
+      ...state,
+      ...action.payload
+    };
+  }
+  return state;
+};
+const Inbox = props => {
+  const {
+    channelFilters: channelFilterProp,
+    channelRole,
+    supportServices,
+    data,
+    orgName,
+    pathPrefix = null
+  } = props;
+  const {
+    id: pathChannelId,
+    postId: pathPostId
+  } = useParams();
+  const navigate = useNavigate();
+  const apolloClient = useApolloClient();
+  // Reduced state - only UI state remains, data comes from Apollo cache
+  const [isBottomDrawerOpen, setBottomDrawer] = React__default.useState(false);
+  const [mobilePreviewState, localDispatch] = useReducer(mobilePreviewReducer, {
+    mobilePreviewVisibility: false,
+    mobilePreviewText: false,
+    mobilePreviewCTAText: false
+  });
+  // Hooks - improved responsive breakpoints with better granularity
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = useWindowDimensions();
+  const isMobileView = useMediaQuery('(max-width: 640px)');
+  const isSmallTabletView = useMediaQuery('(min-width: 641px) and (max-width: 900px)');
+  const isTabletView = useMediaQuery('(min-width: 901px) and (max-width: 1024px)');
+  const isDesktopView = useMediaQuery('(min-width: 1025px)');
+  const isLargeDesktopView = useMediaQuery('(min-width: 1440px)');
+  const isSmallScreen = useMediaQuery('(max-width: 900px)');
+  // const auth = useSelector(userSelector);
+  const auth = useSelector(userSelector, shallowEqual);
+  // const user = useSelector((state: any) => state.user, shallowEqual);
+  // Data destructuring from Apollo queries
+  const GetChannelsByUserQuery = data?.[0];
+  const {
+    data: userChannels,
+    loading: userChannelsLoading,
+    refetch: getChannelsRefetch
+  } = GetChannelsByUserQuery || {};
+  // Get data directly from Apollo cache instead of local state
+  const channels = useMemo(() => {
+    if (!userChannels?.channelsByUser && !userChannels?.supportServiceChannels) return [];
+    return uniqBy([...(userChannels?.supportServiceChannels ?? []), ...(userChannels?.channelsByUser ?? [])], 'id');
+  }, [userChannels]);
+  // Memoize stable channel array to prevent unnecessary re-renders
+  const stableChannels = useMemo(() => {
+    return channels || [];
+  }, [channels]);
+  // Memoized values derived from Apollo cache data
+  const channelFilters = useMemo(() => {
+    const filters = {
+      ...channelFilterProp
+    };
+    const channelType = filters?.type ?? RoomType.Direct;
+    filters.type = supportServices ? [channelType, RoomType.Service] : channelType;
+    return filters;
+  }, [channelFilterProp, supportServices]);
+  const users = useMemo(() => {
+    return channels?.reduce((acc, curr) => {
+      const newMembers = curr.members?.filter(({
+        user
+      }) => !acc.find(({
+        id
+      }) => id === user.id)) || [];
+      return [...acc, ...newMembers.map(({
+        user
+      }) => user)];
+    }, []) || [];
+  }, [channels]);
+  // const currentUser = useMemo(
+  //     () => users?.find((user) => user && user.alias?.includes(auth?.authUserId)),
+  //     [users, auth?.authUserId],
+  // );
+  const currentUser = auth;
+  const channelName = useMemo(() => {
+    if (!channels || !pathChannelId) return '';
+    const currChannel = channels?.find(ch => ch.id === pathChannelId);
+    if (!currChannel) return '';
+    const {
+      members,
+      title,
+      type
+    } = currChannel;
+    if (type === RoomType.Direct && members?.length >= 2) {
+      const otherUser = members.find(member => member.user.id !== currentUser?.id);
+      if (otherUser?.user) {
+        const {
+          givenName,
+          familyName
+        } = otherUser.user;
+        if (givenName && familyName) return `${givenName} ${familyName}`;
+        return givenName || familyName || title || 'Direct Message';
+      }
+      return title || 'Direct Message';
+    }
+    if (type === RoomType.Direct && members?.length === 1) {
+      if (members[0].user?.givenName && members[0]?.user?.familyName) {
+        return `${members[0].user?.givenName} ${members[0].user?.familyName}`;
+      }
+      return members[0].user?.givenName || members[0].user?.familyName || 'Direct Message';
+    }
+    return title || 'Channel';
+  }, [channels, pathChannelId, currentUser]);
+  // Effects
+  useEffect(() => {
+    applyFooterStyles();
+    // Optimistic refetch with cache update
+    const timeout = setTimeout(() => {
+      getChannelsRefetch?.({
+        role: channelRole,
+        criteria: orgName ? {
+          ...channelFilters,
+          orgName: channelFilters?.orgName || orgName || ''
+        } : channelFilters,
+        supportServices: !!supportServices,
+        supportServiceCriteria: {
+          type: RoomType.Service
+        }
+      });
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [channelRole, channelFilters, supportServices, getChannelsRefetch]);
+  // Optimistic navigation with cache updates
+  const handleSelectChannel = useCallback(async (channelId, pId = null) => {
+    // Optimistic UI update
+    const mainPath = orgName ? pId ? `/o/${orgName}/direct-message/${channelId}/${pId}` : `/o/${orgName}/direct-message/${channelId}` : pId ? `/inbox/${channelId}/${pId}` : `/inbox/${channelId}`;
+    const basePath = pathPrefix ? `${pathPrefix}${mainPath}` : mainPath;
+    const searchParams = new URLSearchParams();
+    // if (channelRole) searchParams.set('channelRole', channelRole);
+    // if (orgName) searchParams.set('orgName', orgName);
+    const newPath = searchParams.toString() ? `${basePath}?${searchParams.toString()}` : basePath;
+    navigate(newPath, {
+      replace: true
+    });
+    // Optimistically update Apollo cache for immediate UI feedback
+    try {
+      apolloClient.writeQuery({
+        query: MessagesDocument,
+        variables: {
+          channelId: channelId.toString(),
+          parentId: null,
+          limit: MESSAGES_PER_PAGE
+        },
+        data: {
+          messages: {
+            __typename: 'Messages',
+            data: [],
+            totalCount: 0,
+            messagesRefId: channelId
+          }
+        }
+      });
+    } catch (error) {
+      // Cache write might fail if query hasn't been executed yet, that's OK
+      console.debug('Cache write failed (expected on first load):', error);
+    }
+  }, [navigate, apolloClient, orgName, channelRole, pathPrefix]);
+  const detailSidebarOptions = useMemo(() => ({
+    isMobileView,
+    isSmallTabletView,
+    isTabletView,
+    isDesktopView,
+    isLargeDesktopView,
+    isSmallScreen,
+    setMobilePreviewCTAText: v => localDispatch({
+      payload: {
+        mobilePreviewCTAText: v
+      },
+      type: 'update'
+    }),
+    setMobilePreviewText: v => localDispatch({
+      payload: {
+        mobilePreviewText: v
+      },
+      type: 'update'
+    }),
+    setMobilePreviewVisibility: v => localDispatch({
+      payload: {
+        mobilePreviewVisibility: v
+      },
+      type: 'update'
+    })
+  }), [isMobileView, isSmallTabletView, isTabletView, isDesktopView, isLargeDesktopView, isSmallScreen]);
+  return React__default.createElement("div", {
+    className: "border-t border-gray-300 flex overflow-hidden",
+    style: {
+      height: `${windowHeight}px`,
+      maxHeight: '100vh'
+    }
+  }, React__default.createElement("div", {
+    className: `
+                flex-shrink-0 bg-gray-50 border-r border-gray-300 overflow-hidden transition-all duration-300 ease-in-out
+                ${isMobileView && pathChannelId ? 'hidden' : ''}
+            `,
+    style: {
+      width: isMobileView && !pathChannelId ? '100%' : isMobileView && pathChannelId ? '0px' : isSmallTabletView ? `${Math.min(288, windowWidth * 0.35)}px` // w-72 or 35% of window
+      : isTabletView ? `${Math.min(320, windowWidth * 0.3)}px` // w-80 or 30% of window
+      : isLargeDesktopView ? `${Math.min(384, windowWidth * 0.25)}px` // w-96 or 25% of window
+      : `${Math.min(320, windowWidth * 0.28)}px`,
+      // w-80 or 28% of window
+      height: `${windowHeight}px`,
+      maxHeight: '100vh'
+    }
+  }, React__default.createElement(LeftSidebar, {
+    currentUser: currentUser,
+    userChannels: stableChannels,
+    userChannelsLoading: userChannelsLoading,
+    users: users,
+    handleSelectChannel: handleSelectChannel,
+    selectedChannelId: pathChannelId,
+    channelToTop: 0,
+    getChannelsRefetch: getChannelsRefetch,
+    role: channelRole,
+    messagesQuery: data?.[1],
+    windowHeight: windowHeight,
+    windowWidth: windowWidth
+  })), React__default.createElement("div", {
+    className: `
+                flex-1 min-w-0 flex flex-col overflow-hidden transition-all duration-300 ease-in-out
+                ${isMobileView && !pathChannelId ? 'hidden' : 'flex'}
+            `,
+    style: {
+      minWidth: isSmallScreen ? '300px' : isDesktopView ? '500px' : '400px',
+      width: 'auto',
+      height: `${windowHeight}px`,
+      maxHeight: '100vh'
+    }
+  }, pathChannelId ? React__default.createElement(ContentComponent, {
+    channelId: pathChannelId,
+    postId: pathPostId,
+    channelRole: channelRole,
+    pathPrefix: props.pathPrefix,
+    isMobileView: isMobileView,
+    isSmallTabletView: isSmallTabletView,
+    isTabletView: isTabletView,
+    isDesktopView: isDesktopView,
+    isLargeDesktopView: isLargeDesktopView,
+    isSmallScreen: isSmallScreen,
+    windowWidth: windowWidth,
+    windowHeight: windowHeight,
+    mobilePreviewState: mobilePreviewState,
+    detailSidebarOptions: detailSidebarOptions,
+    isBottomDrawerOpen: isBottomDrawerOpen,
+    setBottomDrawer: setBottomDrawer,
+    channelName: channelName,
+    loaderdata: data
+  }) : React__default.createElement(EmptyState, null)), pathChannelId && data?.[1] && isDesktopView &&
+  // <div
+  //     className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden"
+  //     style={{
+  //         width: isLargeDesktopView
+  //             ? `${Math.min(384, windowWidth * 0.25)}px` // w-96 or 25% of window
+  //             : `${Math.min(320, windowWidth * 0.22)}px`, // w-80 or 22% of window
+  //         height: `${windowHeight}px`,
+  //         maxHeight: '100vh'
+  //     }}
+  // >
+  React__default.createElement(RightSidebarWrapper, {
+    MessagesLoaderQuery: data?.[1],
+    selectedPost: null,
+    detailSidebarOptions: detailSidebarOptions
+  })
+  // </div>
+  );
+};
+const ContentComponent = React__default.memo(props => {
+  const {
+    channelId,
+    channelRole,
+    pathPrefix,
+    postId,
+    isMobileView,
+    isSmallTabletView,
+    isTabletView,
+    isDesktopView,
+    isLargeDesktopView,
+    isSmallScreen,
+    windowWidth,
+    windowHeight,
+    mobilePreviewState,
+    detailSidebarOptions,
+    isBottomDrawerOpen,
+    setBottomDrawer,
+    channelName,
+    loaderdata
+  } = props;
+  const ViewChannelDetailLoaderQuery = loaderdata?.[2];
+  const MessagesLoaderQuery = loaderdata?.[1];
+  const [selectedPost, setSelectedPost] = React__default.useState(null);
+  const {
+    data: channelData,
+    loading: channelLoading
+  } = ViewChannelDetailLoaderQuery || {};
+  const onMessageClick = useCallback(msg => {
+    setSelectedPost(msg);
+  }, []);
+  const channelsDetail = useMemo(() => {
+    return channelData?.viewChannelDetail || null;
+  }, [channelData]);
+  return React__default.createElement("div", {
+    className: "flex overflow-hidden",
+    style: {
+      height: `${windowHeight}px`,
+      maxHeight: '100vh'
+    }
+  }, React__default.createElement("div", {
+    className: "flex-1 flex flex-col min-w-0 overflow-hidden"
+  }, channelId && React__default.createElement("div", {
+    className: `border-b border-gray-200 bg-white flex-shrink-0 z-10 ${isSmallScreen ? 'px-3 py-3' : 'px-4 sm:px-6 py-4'}`
+  }, React__default.createElement("div", {
+    className: "flex items-center justify-between"
+  }, React__default.createElement("div", {
+    className: "flex items-center space-x-2 min-w-0 flex-1"
+  }, (isMobileView || isSmallTabletView) && React__default.createElement("button", {
+    className: "p-2 hover:bg-gray-100 rounded-full transition-colors flex-shrink-0",
+    onClick: () => window.history.back(),
+    "aria-label": "Go back"
+  }, React__default.createElement("svg", {
+    className: "w-5 h-5 text-gray-600",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M15 19l-7-7 7-7"
+  }))), React__default.createElement("h2", {
+    className: `font-semibold text-gray-800 truncate ${isSmallScreen ? 'text-base' : 'text-lg'}`
+  }, channelName)), (isMobileView || isSmallTabletView) && mobilePreviewState?.mobilePreviewVisibility && React__default.createElement("button", {
+    className: "text-sm px-3 py-1 bg-teal-500 hover:bg-teal-600 text-white rounded-md transition-colors flex-shrink-0",
+    onClick: () => setBottomDrawer(true)
+  }, mobilePreviewState?.mobilePreviewCTAText))), (isMobileView || isSmallTabletView) && channelId && mobilePreviewState?.mobilePreviewVisibility && React__default.createElement("div", {
+    className: `mt-4 ${isSmallScreen ? 'mx-3' : 'mx-4'}`
+  }, React__default.createElement("div", {
+    className: "mb-2"
+  }, React__default.createElement("div", {
+    className: "w-full flex justify-between items-center gap-2 mb-[5px]"
+  }, React__default.createElement("span", {
+    className: "truncate flex-1 text-sm"
+  }, mobilePreviewState?.mobilePreviewText), React__default.createElement("button", {
+    className: "text-sm px-3 py-2 bg-teal-500 hover:bg-teal-600 text-white rounded-md transition-colors flex-shrink-0",
+    onClick: () => setBottomDrawer(true)
+  }, mobilePreviewState?.mobilePreviewCTAText))), React__default.createElement("hr", {
+    className: "border-gray-200"
+  })), React__default.createElement("div", {
+    className: "flex-1 flex flex-col min-h-0 overflow-hidden"
+  }, channelId && React__default.createElement(React__default.Fragment, null, postId ? postId === '1' ? React__default.createElement(ThreadsInbox, {
+    channelId: channelId,
+    role: channelRole,
+    pathPrefix: pathPrefix,
+    setChannelId: () => {},
+    setPostId: () => {},
+    setGoBack: () => {}
+  }) : React__default.createElement(ThreadMessagesInbox, {
+    channelId: channelId,
+    postId: postId,
+    role: channelRole,
+    goBack: false,
+    pathPrefix: pathPrefix,
+    setPostId: () => {},
+    setChannelId: () => {},
+    onMessageClick: onMessageClick
+  }) : React__default.createElement(MessagesComponent, {
+    channelId: channelId,
+    MessagesLoaderQuery: MessagesLoaderQuery,
+    channelsDetail: channelsDetail,
+    channelLoading: channelLoading,
+    onMessageClick: onMessageClick,
+    isSmallScreen: isSmallScreen,
+    isDesktopView: isDesktopView,
+    windowHeight: windowHeight,
+    windowWidth: windowWidth
+  })))), (isMobileView || isSmallTabletView) && React__default.createElement(Drawer, {
+    isOpen: isBottomDrawerOpen,
+    onClose: () => setBottomDrawer(false),
+    title: mobilePreviewState.mobilePreviewText
+  }, React__default.createElement(RightSidebarWrapper, {
+    MessagesLoaderQuery: MessagesLoaderQuery,
+    selectedPost: selectedPost,
+    detailSidebarOptions: detailSidebarOptions
+  })));
+});
+const RightSidebarWrapper = React__default.memo(({
+  MessagesLoaderQuery,
+  selectedPost,
+  detailSidebarOptions
+}) => {
+  const {
+    data
+  } = MessagesLoaderQuery || {};
+  const sortedMessages = useMemo(() => {
+    const messages = data?.messages?.data || [];
+    return orderBy(uniqBy(messages, 'id'), ['createdAt'], ['asc']);
+  }, [data?.messages?.data]);
+  if (!sortedMessages.length) return null;
+  return React__default.createElement("div", {
+    className: "h-full flex flex-col overflow-hidden"
+  }, React__default.createElement(RightSidebar, {
+    channelMessages: sortedMessages,
+    visibility: "visible",
+    selectedPost: selectedPost,
+    ...detailSidebarOptions
+  }));
+});
+const MessagesComponent = React__default.memo(props => {
+  const {
+    channelId,
+    MessagesLoaderQuery,
+    channelsDetail,
+    channelLoading,
+    onMessageClick,
+    isSmallScreen,
+    isDesktopView,
+    windowHeight = 768,
+    windowWidth = 1024
+  } = props;
+  const messageRootListRef = useRef(null);
+  const messageListRef = useRef(null);
+  useApolloClient();
+  const [isLoadingOlder, setIsLoadingOlder] = React__default.useState(false);
+  const isLoadingOlderRef = useRef(false);
+  const scrollTimeoutRef = useRef(null);
+  const auth = useSelector(userSelector);
+  const {
+    startUpload
+  } = useUploadFiles();
+  const [sendMsg] = useSendMessagesMutation();
+  const {
+    data,
+    loading: messageLoading,
+    fetchMore: fetchMoreMessages,
+    subscribeToMore
+  } = MessagesLoaderQuery || {};
+  // Get messages directly from Apollo cache
+  const messages = useMemo(() => {
+    const messagesData = data?.messages?.data || [];
+    return orderBy(uniqBy(messagesData, 'id'), ['createdAt'], ['asc']);
+  }, [data?.messages?.data]);
+  const totalCount = data?.messages?.totalCount || 0;
+  const scrollToBottom = useCallback(() => {
+    if (messageRootListRef?.current) {
+      messageRootListRef.current.scrollTop = messageRootListRef.current.scrollHeight;
+    }
+  }, []);
+  // Auto-scroll on new messages (but not when loading older messages)
+  useEffect(() => {
+    if (!isLoadingOlderRef.current) {
+      const timer = setTimeout(() => scrollToBottom(), 100);
+      return () => clearTimeout(timer);
+    }
+  }, [messages.length, scrollToBottom]);
+  const onFetchOld = useCallback(async skip => {
+    if (channelId && fetchMoreMessages && !isLoadingOlder) {
+      try {
+        setIsLoadingOlder(true);
+        isLoadingOlderRef.current = true;
+        // Capture current scroll height before fetching
+        const oldScrollHeight = messageRootListRef?.current?.scrollHeight || 0;
+        await fetchMoreMessages({
+          variables: {
+            channelId: channelId.toString(),
+            parentId: null,
+            skip
+          },
+          updateQuery: (prev, {
+            fetchMoreResult
+          }) => {
+            if (!fetchMoreResult) return prev;
+            const newMessages = fetchMoreResult.messages.data;
+            const existingMessages = prev.messages?.data || [];
+            return {
+              ...prev,
+              messages: {
+                ...fetchMoreResult.messages,
+                data: uniqBy([...newMessages, ...existingMessages], 'id')
+              }
+            };
+          }
+        });
+        // Maintain scroll position after loading older messages
+        setTimeout(() => {
+          if (messageRootListRef?.current) {
+            const newScrollHeight = messageRootListRef.current.scrollHeight;
+            const scrollDiff = newScrollHeight - oldScrollHeight;
+            // For normal flex layout, maintain position by adjusting scroll offset
+            messageRootListRef.current.scrollTop = scrollDiff;
+          }
+          // Reset the loading flag after position is maintained
+          setTimeout(() => {
+            isLoadingOlderRef.current = false;
+          }, 50);
+        }, 100);
+      } catch (error) {
+        console.error('Error fetching older messages:', error);
+        isLoadingOlderRef.current = false;
+      } finally {
+        setIsLoadingOlder(false);
+      }
+    }
+  }, [channelId, fetchMoreMessages, isLoadingOlder]);
+  // Scroll to bottom when channel changes
+  useEffect(() => {
+    if (channelId && messages.length > 0) {
+      isLoadingOlderRef.current = false; // Reset flag on channel change
+      const timer = setTimeout(() => scrollToBottom(), 200);
+      return () => clearTimeout(timer);
+    }
+  }, [channelId, scrollToBottom]);
+  // Alternative scroll detection for Firefox
+  useEffect(() => {
+    const element = messageRootListRef.current;
+    if (!element) return;
+    // Firefox-specific scroll detection using passive listeners
+    const handleScrollEnd = () => {
+      if (!isLoadingOlder && element) {
+        const {
+          scrollTop
+        } = element;
+        const isAtTop = Math.round(scrollTop) <= 30;
+        const hasMoreMessages = totalCount > messages.length;
+        if (isAtTop && hasMoreMessages) {
+          console.log('ScrollEnd triggered load more (Firefox):', {
+            scrollTop: Math.round(scrollTop),
+            totalCount,
+            messagesLength: messages.length
+          });
+          onFetchOld(messages.length);
+        }
+      }
+    };
+    // Use scrollend event if available (modern Firefox/Chrome)
+    if ('onscrollend' in element) {
+      element.addEventListener('scrollend', handleScrollEnd, {
+        passive: true
+      });
+      return () => {
+        element.removeEventListener('scrollend', handleScrollEnd);
+      };
+    }
+  }, [totalCount, messages.length, onFetchOld, isLoadingOlder]);
+  // Cleanup scroll timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, []);
+  const onMessagesScroll = useCallback(async e => {
+    // Throttle scroll events for better performance, especially in Firefox
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+    scrollTimeoutRef.current = setTimeout(async () => {
+      if (messageRootListRef.current && !isLoadingOlder) {
+        const element = messageRootListRef.current;
+        const {
+          clientHeight,
+          scrollHeight,
+          scrollTop
+        } = element;
+        // Firefox-compatible scroll detection
+        // Use Math.ceil to handle Firefox's fractional scrollTop values
+        const isAtTop = Math.ceil(scrollTop) <= 25;
+        const hasMoreMessages = totalCount > messages.length;
+        // Additional Firefox-specific check
+        const isFirefox = navigator.userAgent.includes('Firefox');
+        const firefoxAdjustedTop = isFirefox ? Math.round(scrollTop) <= 30 : isAtTop;
+        if ((isAtTop || firefoxAdjustedTop) && hasMoreMessages) {
+          console.log('Triggering load more:', {
+            scrollTop: Math.ceil(scrollTop),
+            originalScrollTop: scrollTop,
+            totalCount,
+            messagesLength: messages.length,
+            scrollHeight,
+            clientHeight,
+            browser: isFirefox ? 'Firefox' : 'Other',
+            isAtTop,
+            firefoxAdjustedTop
+          });
+          await onFetchOld(messages.length);
+        }
+      }
+    }, 100);
+  }, [totalCount, messages.length, onFetchOld, isLoadingOlder]);
+  // Optimistic message sending with Apollo cache updates
+  const handleSend = useCallback(async (message, files = []) => {
+    // Allow sending if there's either a message or files
+    if ((!message || !message.trim()) && (!files || files.length === 0)) return;
+    if (!channelId) return;
+    try {
+      const postId = objectId();
+      const currentDate = new Date();
+      const createOptimisticMessage = files => ({
+        __typename: 'Post',
+        id: postId,
+        message,
+        createdAt: currentDate.toISOString(),
+        updatedAt: currentDate.toISOString(),
+        author: {
+          __typename: 'UserAccount',
+          id: auth?.id,
+          givenName: auth?.profile?.given_name || '',
+          familyName: auth?.profile?.family_name || '',
+          email: auth?.profile?.email || '',
+          username: auth?.profile?.nickname || '',
+          fullName: auth?.profile?.name || '',
+          picture: auth?.profile?.picture || '',
+          alias: [auth?.authUserId ?? ''],
+          tokens: []
+        },
+        isDelivered: false,
+        // Will be true once confirmed by server
+        isRead: false,
+        type: 'TEXT',
+        parentId: null,
+        fromServer: false,
+        channel: {
+          __typename: 'Channel',
+          id: channelId
+        },
+        propsConfiguration: {
+          __typename: 'MachineConfiguration',
+          id: null,
+          resource: '',
+          contents: null,
+          keys: null,
+          target: null,
+          overrides: null
+        },
+        props: {},
+        files: {
+          __typename: 'FilesInfo',
+          data: files || [],
+          totalCount: files?.length || 0
+        },
+        replies: {
+          __typename: 'Messages',
+          data: [],
+          totalCount: 0
+        }
+      });
+      const optimisticMessage = createOptimisticMessage(files);
+      if (files?.length > 0) {
+        const uploadResponse = await startUpload({
+          file: files,
+          saveUploadedFile: {
+            variables: {
+              postId
+            }
+          },
+          createUploadLink: {
+            variables: {
+              postId
+            }
+          }
+        });
+        const uploadedFiles = uploadResponse.data;
+        if (uploadedFiles) {
+          const fileIds = uploadedFiles.map(f => f.id);
+          await sendMsg({
+            variables: {
+              postId,
+              channelId,
+              content: message,
+              files: fileIds
+            },
+            optimisticResponse: {
+              __typename: 'Mutation',
+              sendMessage: createOptimisticMessage(uploadedFiles)
+            },
+            update: (cache, {
+              data: mutationData
+            }) => {
+              if (!mutationData?.sendMessage) return;
+              // Update messages cache optimistically
+              const messagesQuery = {
+                query: MessagesDocument,
+                variables: {
+                  channelId: channelId.toString(),
+                  parentId: null,
+                  limit: MESSAGES_PER_PAGE
+                }
+              };
+              try {
+                const existingData = cache.readQuery(messagesQuery);
+                if (existingData?.messages) {
+                  cache.writeQuery({
+                    ...messagesQuery,
+                    data: {
+                      messages: {
+                        ...existingData.messages,
+                        data: [...(existingData.messages.data || []), mutationData.sendMessage],
+                        totalCount: (existingData.messages.totalCount || 0) + 1
+                      }
+                    }
+                  });
+                }
+              } catch (error) {
+                console.debug('Cache update failed (expected on first message):', error);
+              }
+            }
+          });
+        }
+      } else {
+        await sendMsg({
+          variables: {
+            channelId,
+            content: message
+          },
+          optimisticResponse: {
+            __typename: 'Mutation',
+            sendMessage: optimisticMessage
+          },
+          update: (cache, {
+            data: mutationData
+          }) => {
+            if (!mutationData?.sendMessage) return;
+            // Update messages cache optimistically
+            const messagesQuery = {
+              query: MessagesDocument,
+              variables: {
+                channelId: channelId.toString(),
+                parentId: null,
+                limit: MESSAGES_PER_PAGE
+              }
+            };
+            try {
+              const existingData = cache.readQuery(messagesQuery);
+              if (existingData?.messages) {
+                cache.writeQuery({
+                  ...messagesQuery,
+                  data: {
+                    messages: {
+                      ...existingData.messages,
+                      data: [...(existingData.messages.data || []), mutationData.sendMessage],
+                      totalCount: (existingData.messages.totalCount || 0) + 1
+                    }
+                  }
+                });
+              }
+            } catch (error) {
+              console.debug('Cache update failed (expected on first message):', error);
+            }
+          }
+        });
+      }
+    } catch (error) {
+      console.error('Error sending message:', error);
+    }
+  }, [channelId, auth, startUpload, sendMsg]);
+  // Show loading spinner for initial load
+  if ((messageLoading || channelLoading) && messages.length === 0) {
+    return React__default.createElement("div", {
+      className: "flex-1 flex justify-center items-center"
+    }, React__default.createElement(Spinner, {
+      className: "w-12 h-12"
+    }));
+  }
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    ref: messageRootListRef,
+    className: `overflow-y-scroll bg-gray-50 ${isSmallScreen ? 'p-2 px-3' : isDesktopView ? 'p-6 px-8' : 'p-4 px-6'}`,
+    onScroll: onMessagesScroll,
+    style: {
+      height: `${windowHeight - 140}px`,
+      // Subtract header + input height
+      maxHeight: '100vh',
+      scrollbarWidth: 'thin',
+      scrollbarColor: '#cbd5e0 #f7fafc',
+      overflowY: 'scroll',
+      WebkitOverflowScrolling: 'touch'
+    }
+  }, React__default.createElement("div", {
+    className: "min-h-full"
+  }, messages.length > 0 ? React__default.createElement(React__default.Fragment, null, isLoadingOlder && React__default.createElement("div", {
+    className: "flex justify-center py-4"
+  }, React__default.createElement("div", {
+    className: "flex items-center space-x-2 text-gray-500"
+  }, React__default.createElement(Spinner, {
+    className: "w-4 h-4"
+  }), React__default.createElement("span", {
+    className: "text-sm"
+  }, "Loading older messages..."))), React__default.createElement(Messages, {
+    innerRef: messageListRef,
+    channelId: channelId,
+    currentUser: auth,
+    channelMessages: messages,
+    totalCount: totalCount,
+    onMessageClick: onMessageClick,
+    isDesktopView: isDesktopView || false,
+    isSmallScreen: isSmallScreen || false
+  }), React__default.createElement(SubscriptionHandler, {
+    subscribeToMore: subscribeToMore,
+    document: OnChatMessageAddedDocument,
+    variables: {
+      channelId: channelId.toString()
+    },
+    enabled: !!channelId && !!subscribeToMore,
+    updateQuery: (prev, {
+      subscriptionData
+    }) => {
+      console.log('Subscription updateQuery called:', {
+        prev,
+        subscriptionData
+      });
+      if (!subscriptionData.data) {
+        console.log('No subscription data, returning prev');
+        return prev;
+      }
+      const newMessage = subscriptionData.data.chatMessageAdded;
+      console.log('New message received via subscription:', newMessage);
+      return {
+        ...prev,
+        messages: {
+          ...prev?.messages,
+          data: uniqBy([...(prev?.messages?.data || []), newMessage], 'id'),
+          totalCount: (prev?.messages?.totalCount || 0) + 1
+        }
+      };
+    },
+    onError: error => {
+      console.error('Subscription error:', error);
+    }
+  })) : React__default.createElement("div", {
+    className: "flex items-center justify-center text-gray-500 min-h-96"
+  }, React__default.createElement("div", {
+    className: "text-center max-w-sm mx-auto px-4"
+  }, React__default.createElement("div", {
+    className: "text-6xl mb-4 opacity-50"
+  }, "\uD83D\uDCAC"), React__default.createElement("h3", {
+    className: "text-lg font-semibold text-gray-600 mb-2"
+  }, "No messages yet"), React__default.createElement("p", {
+    className: "text-sm text-gray-500"
+  }, "Start the conversation by sending a message below!"))))), React__default.createElement("div", {
+    className: "flex-shrink-0 border-t border-gray-200 bg-white"
+  }, React__default.createElement(MessageInput, {
+    channelId: channelId,
+    handleSend: handleSend,
+    placeholder: "Message"
+  })));
+});
+// Display names for debugging
+Inbox.displayName = 'Inbox';
+ContentComponent.displayName = 'ContentComponent';
+MessagesComponent.displayName = 'MessagesComponent';
+RightSidebarWrapper.displayName = 'RightSidebarWrapper';
+var Inbox$1 = React__default.memo(Inbox);export{Inbox$1 as default};//# sourceMappingURL=Inbox.js.map