@messenger-box/tailwind-ui-inbox 10.0.3-alpha.71 → 10.0.3-alpha.72

package/lib/container/InboxTemplate1.js

@@ -0,0 +1,1375 @@
+import React__default,{createContext,useCallback,useMemo,useContext,useRef,useEffect,useReducer}from'react';import {orderBy,uniqBy}from'lodash-es';import {useSendMessagesMutation,MessagesDocument,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'react-i18next';import {config}from'../config/env-config.js';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'../enums/messenger-slot-fill-name-enum.js';import'../components/InboxMessage/ServiceInboxItem.js';import {InputComponent}from'../components/InboxMessage/InputComponent.js';import {MessagesBuilderUi}from'../components/InboxMessage/MessagesBuilderUi.js';import {objectId}from'@messenger-box/core';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;
+// Context for sharing tab state between header and sidebar
+const TabContext = createContext({
+  activeTab: 'design',
+  setActiveTab: () => {}
+});
+// 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 InboxTemplate1 = props => {
+  const [activeTab, setActiveTab] = React__default.useState('design');
+  return React__default.createElement(TabContext.Provider, {
+    value: {
+      activeTab,
+      setActiveTab
+    }
+  }, React__default.createElement(InboxTemplate1Internal, {
+    ...props
+  }));
+};
+const InboxTemplate1Internal = 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}/ai-messenger/${channelId}/${pId}` : `/o/${orgName}/ai-messenger/${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 && React__default.createElement(RightSidebarContent, {
+    MessagesLoaderQuery: data?.[1],
+    selectedPost: null,
+    detailSidebarOptions: detailSidebarOptions,
+    windowWidth: windowWidth,
+    windowHeight: windowHeight
+  }));
+};
+const HeaderWithTabs = React__default.memo(props => {
+  const {
+    channelName,
+    isMobileView,
+    isSmallTabletView,
+    isSmallScreen,
+    mobilePreviewState,
+    setBottomDrawer
+  } = props;
+  return 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)));
+});
+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(HeaderWithTabs, {
+    channelName: channelName,
+    isMobileView: isMobileView,
+    isSmallTabletView: isSmallTabletView,
+    isSmallScreen: isSmallScreen,
+    mobilePreviewState: mobilePreviewState,
+    setBottomDrawer: setBottomDrawer,
+    loaderdata: loaderdata
+  }), (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 {
+    activeTab,
+    setActiveTab
+  } = useContext(TabContext);
+  const sortedMessages = useMemo(() => {
+    const messages = data?.messages?.data || [];
+    return orderBy(uniqBy(messages, 'id'), ['createdAt'], ['asc']);
+  }, [data?.messages?.data]);
+  const handleRefreshSandbox = useCallback(() => {
+    console.log('Refreshing sandbox...');
+  }, []);
+  if (!sortedMessages.length) return null;
+  return React__default.createElement("div", {
+    className: "h-full flex flex-col overflow-hidden bg-white"
+  }, React__default.createElement("div", {
+    className: "flex-shrink-0 border-b border-gray-200"
+  }, React__default.createElement("div", {
+    className: "flex items-center justify-between px-4 py-3"
+  }, React__default.createElement("div", {
+    className: "flex items-center space-x-1"
+  }, React__default.createElement("button", {
+    onClick: () => setActiveTab('design'),
+    className: `flex items-center space-x-2 px-3 py-2 text-sm font-medium rounded-lg transition-colors ${activeTab === 'design' ? 'bg-blue-500 text-white' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'}`
+  }, React__default.createElement("svg", {
+    className: "w-4 h-4",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
+  })), React__default.createElement("span", null, "Design")), React__default.createElement("button", {
+    onClick: () => setActiveTab('interact'),
+    className: `flex items-center space-x-2 px-3 py-2 text-sm font-medium rounded-lg transition-colors ${activeTab === 'interact' ? 'bg-blue-500 text-white' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'}`
+  }, React__default.createElement("svg", {
+    className: "w-4 h-4",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+  }), React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+  })), React__default.createElement("span", null, "Interact")), React__default.createElement("button", {
+    onClick: () => setActiveTab('code'),
+    className: `flex items-center space-x-2 px-3 py-2 text-sm font-medium rounded-lg transition-colors ${activeTab === 'code' ? 'bg-blue-500 text-white' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'}`
+  }, React__default.createElement("svg", {
+    className: "w-4 h-4",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+  })), React__default.createElement("span", null, "Code"))), React__default.createElement("button", {
+    onClick: handleRefreshSandbox,
+    className: "p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors",
+    title: "Refresh Sandbox"
+  }, React__default.createElement("svg", {
+    className: "w-4 h-4",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+  }))))), React__default.createElement("div", {
+    className: "flex-1 overflow-hidden"
+  }, activeTab === 'design' ? React__default.createElement("div", {
+    className: "h-full flex items-center justify-center bg-gray-50"
+  }, React__default.createElement("div", {
+    className: "text-center"
+  }, React__default.createElement("div", {
+    className: "mb-8"
+  }, React__default.createElement("svg", {
+    className: "w-32 h-16 mx-auto text-black",
+    viewBox: "0 0 394 80",
+    fill: "currentColor"
+  }, React__default.createElement("path", {
+    d: "M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.4zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.7h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"
+  }), React__default.createElement("path", {
+    d: "M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.2 3.4 1 1.4 1.5 3 1.5 5h-5.8z"
+  }))), React__default.createElement("div", {
+    className: "space-y-4 text-gray-600"
+  }, React__default.createElement("h3", {
+    className: "text-lg font-semibold text-gray-900"
+  }, "Design View"), React__default.createElement("p", {
+    className: "font-mono text-sm bg-gray-100 px-3 py-1 rounded"
+  }, "Design components and UI"), React__default.createElement("p", null, "Customize and preview your design changes.")), React__default.createElement("div", {
+    className: "mt-8 space-y-4"
+  }, React__default.createElement("button", {
+    className: "bg-black text-white px-6 py-3 rounded-full hover:bg-gray-800 transition-colors flex items-center space-x-2 mx-auto"
+  }, React__default.createElement("svg", {
+    className: "w-4 h-4",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    d: "M12 2L2 7v10c0 5.55 3.84 9.739 9 11 5.16-1.261 9-5.45 9-11V7l-10-5z"
+  })), React__default.createElement("span", null, "Design now")), React__default.createElement("p", {
+    className: "text-sm text-gray-500 underline cursor-pointer hover:text-gray-700"
+  }, "View design docs")))) : activeTab === 'interact' ? React__default.createElement("div", {
+    className: "h-full flex items-center justify-center bg-blue-50"
+  }, React__default.createElement("div", {
+    className: "text-center"
+  }, React__default.createElement("div", {
+    className: "mb-8"
+  }, React__default.createElement("svg", {
+    className: "w-32 h-32 mx-auto text-blue-500",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1,
+    d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+  }), React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1,
+    d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+  }))), React__default.createElement("div", {
+    className: "space-y-4 text-gray-600"
+  }, React__default.createElement("h3", {
+    className: "text-lg font-semibold text-gray-900"
+  }, "Interactive Mode"), React__default.createElement("p", {
+    className: "font-mono text-sm bg-blue-100 px-3 py-1 rounded"
+  }, "Live interaction and testing"), React__default.createElement("p", null, "Test and interact with your components in real-time.")), React__default.createElement("div", {
+    className: "mt-8 space-y-4"
+  }, React__default.createElement("button", {
+    className: "bg-blue-500 text-white px-6 py-3 rounded-full hover:bg-blue-600 transition-colors flex items-center space-x-2 mx-auto"
+  }, React__default.createElement("svg", {
+    className: "w-4 h-4",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    d: "M8 5v14l11-7z"
+  })), React__default.createElement("span", null, "Start Interacting")), React__default.createElement("p", {
+    className: "text-sm text-gray-500 underline cursor-pointer hover:text-gray-700"
+  }, "Learn about interactions")))) : React__default.createElement("div", {
+    className: "h-full bg-gray-900 text-gray-300 p-4 overflow-auto"
+  }, React__default.createElement("div", {
+    className: "font-mono text-sm"
+  }, React__default.createElement("div", {
+    className: "mb-4"
+  }, React__default.createElement("div", {
+    className: "text-green-400"
+  }, "// app/page.tsx")), React__default.createElement("div", {
+    className: "space-y-2"
+  }, React__default.createElement("div", null, React__default.createElement("span", {
+    className: "text-purple-400"
+  }, "export"), ' ', React__default.createElement("span", {
+    className: "text-purple-400"
+  }, "default"), ' ', React__default.createElement("span", {
+    className: "text-blue-400"
+  }, "function"), ' ', React__default.createElement("span", {
+    className: "text-yellow-400"
+  }, "Home"), "() ", '{'), React__default.createElement("div", {
+    className: "ml-4"
+  }, React__default.createElement("span", {
+    className: "text-purple-400"
+  }, "return"), " ("), React__default.createElement("div", {
+    className: "ml-8"
+  }, '<', React__default.createElement("span", {
+    className: "text-red-400"
+  }, "main"), ' ', React__default.createElement("span", {
+    className: "text-green-400"
+  }, "className"), "=", React__default.createElement("span", {
+    className: "text-yellow-400"
+  }, "\"flex min-h-screen flex-col items-center justify-between p-24\""), '>'), React__default.createElement("div", {
+    className: "ml-12"
+  }, '<', React__default.createElement("span", {
+    className: "text-red-400"
+  }, "div"), ' ', React__default.createElement("span", {
+    className: "text-green-400"
+  }, "className"), "=", React__default.createElement("span", {
+    className: "text-yellow-400"
+  }, "\"z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex\""), '>'), React__default.createElement("div", {
+    className: "ml-16"
+  }, '<', React__default.createElement("span", {
+    className: "text-red-400"
+  }, "p"), ' ', React__default.createElement("span", {
+    className: "text-green-400"
+  }, "className"), "=", React__default.createElement("span", {
+    className: "text-yellow-400"
+  }, "\"fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30\""), '>'), React__default.createElement("div", {
+    className: "ml-20 text-gray-400"
+  }, "Get started by editing\u00A0"), React__default.createElement("div", {
+    className: "ml-20"
+  }, '<', React__default.createElement("span", {
+    className: "text-red-400"
+  }, "code"), ' ', React__default.createElement("span", {
+    className: "text-green-400"
+  }, "className"), "=", React__default.createElement("span", {
+    className: "text-yellow-400"
+  }, "\"font-mono font-bold\""), '>', "app/page.tsx", '</', React__default.createElement("span", {
+    className: "text-red-400"
+  }, "code"), '>'), React__default.createElement("div", {
+    className: "ml-16"
+  }, '</', React__default.createElement("span", {
+    className: "text-red-400"
+  }, "p"), '>'), React__default.createElement("div", {
+    className: "ml-12"
+  }, '</', React__default.createElement("span", {
+    className: "text-red-400"
+  }, "div"), '>'), React__default.createElement("div", {
+    className: "ml-8"
+  }, '</', React__default.createElement("span", {
+    className: "text-red-400"
+  }, "main"), '>'), React__default.createElement("div", {
+    className: "ml-4"
+  }, ");"), React__default.createElement("div", null, '}'))))));
+});
+const RightSidebarContent = React__default.memo(({
+  MessagesLoaderQuery,
+  selectedPost,
+  detailSidebarOptions,
+  windowWidth,
+  windowHeight
+}) => {
+  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: "border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden",
+    style: {
+      width: `${windowWidth * 0.35}px`,
+      // 35% of window width
+      height: `${windowHeight}px`,
+      maxHeight: '100vh'
+    }
+  }, React__default.createElement(RightSidebarWrapper, {
+    MessagesLoaderQuery: MessagesLoaderQuery,
+    selectedPost: selectedPost,
+    detailSidebarOptions: 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 || {};
+  // Add dummy messages with modern formatting to showcase the new UI
+  const dummyMessages = [{
+    id: 'dummy-1',
+    message: `# Modern Next.js-Style Application
+
+I'll help you build a modern Next.js-style application. Let me first examine the current homepage and then completely rebuild it to create a beautiful, modern "next app" experience.`,
+    createdAt: new Date(Date.now() + 2000).toISOString(),
+    author: {
+      id: 'ai-assistant',
+      username: 'AI Assistant',
+      givenName: 'AI',
+      familyName: 'Assistant',
+      picture: '/default-avatar.svg'
+    },
+    files: {
+      data: [],
+      totalCount: 0
+    }
+  }, {
+    id: 'dummy-2',
+    message: `## Key Features:
+
+- **Professional Navigation** - Clean header with logo and navigation links
+- **Hero Section** - Compelling headline with gradient text effects and code preview
+- **Feature Cards** - Showcase of Next.js capabilities with modern icons
+- **Call-to-Action** - Clear conversion paths for user engagement
+- **Footer** - Comprehensive site navigation and branding
+
+### Design Highlights:
+
+- Modern gradient branding (blue to purple to pink)
+- Clean typography with proper hierarchy
+- Responsive grid layouts for all screen sizes
+- Subtle backdrop blur effects and modern cards
+- Smooth scroll behavior and enhanced visual effects
+- Production-ready color palette with proper light/dark mode support`,
+    createdAt: new Date(Date.now() + 3000).toISOString(),
+    author: {
+      id: 'ai-assistant',
+      username: 'AI Assistant',
+      givenName: 'AI',
+      familyName: 'Assistant',
+      picture: '/default-avatar.svg'
+    },
+    files: {
+      data: [],
+      totalCount: 0
+    }
+  }, {
+    id: 'dummy-3',
+    message: `### Technical Implementation:
+
+Uses existing **shadcn/ui components** (Button, Card, Badge)
+.`,
+    createdAt: new Date(Date.now() + 4000).toISOString(),
+    author: {
+      id: 'ai-assistant',
+      username: 'AI Assistant',
+      givenName: 'AI',
+      familyName: 'Assistant',
+      picture: '/default-avatar.svg'
+    },
+    files: {
+      data: [],
+      totalCount: 0
+    }
+  }, {
+    id: 'dummy-4',
+    message: `\`\`\`typescript
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center">
+      <div className="z-10 max-w-5xl w-full items-center">
+        <p className="fixed left-0 top-0 flex w-full justify-center">
+          Get started by editing app/page.tsx
+        </p>
+      </div>
+    </main>
+  );
+}\`\`\`
+.`,
+    createdAt: new Date(Date.now() + 4000).toISOString(),
+    author: {
+      id: 'ai-assistant',
+      username: 'AI Assistant',
+      givenName: 'AI',
+      familyName: 'Assistant',
+      picture: '/default-avatar.svg'
+    },
+    files: {
+      data: [],
+      totalCount: 0
+    }
+  }, {
+    id: 'tool-status-1',
+    message: `<div class="px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm text-gray-700" style="border-radius: 5px !important;">🔧 Running tool</div>`,
+    createdAt: new Date(Date.now() + 5000).toISOString(),
+    author: {
+      id: 'system-tool',
+      username: 'System Tool',
+      givenName: 'System',
+      familyName: 'Tool',
+      picture: '/default-avatar.svg'
+    },
+    files: {
+      data: [],
+      totalCount: 0
+    }
+  }, {
+    id: 'tool-status-2',
+    message: `<div class="px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm text-gray-700" style="border-radius: 5px !important;">🔧 Running tool</div>`,
+    createdAt: new Date(Date.now() + 5500).toISOString(),
+    author: {
+      id: 'system-tool',
+      username: 'System Tool',
+      givenName: 'System',
+      familyName: 'Tool',
+      picture: '/default-avatar.svg'
+    },
+    files: {
+      data: [],
+      totalCount: 0
+    }
+  }, {
+    id: 'bullet-point-1',
+    message: `<div>
+                        <h1 class="text-xl font-bold">Installation process</h1>
+                         <ul>
+                        <li>Install Node.js</li>
+                        <li>Install npm</li>
+                        <li>Install React</li>
+                        <li>Install Tailwind CSS</li>
+                        <li>Install shadcn/ui</li>
+                        <li>Install Next.js</li>
+                        <li>Install TypeScript</li>
+                        <li>Install ESLint</li>
+                        <li>Install Prettier</li>
+                        </ul> </div>`,
+    createdAt: new Date(Date.now() + 5500).toISOString(),
+    author: {
+      id: 'bullet-tool',
+      username: 'System Tool',
+      givenName: 'System',
+      familyName: 'Tool',
+      picture: '/default-avatar.svg'
+    },
+    files: {
+      data: [],
+      totalCount: 0
+    }
+  }];
+  console.log('dummyMessages', JSON.stringify(dummyMessages, null, 2));
+  // Get messages directly from Apollo cache
+  const messages = useMemo(() => {
+    const messagesData = data?.messages?.data || [];
+    dummyMessages.forEach(msg => messagesData.push(msg));
+    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
+  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-white ${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',
+      backgroundAttachment: 'fixed'
+    }
+  }, 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(MessagesBuilderUi, {
+    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(InputComponent, {
+    channelId: channelId,
+    placeholder: "Message"
+  })));
+});
+// Display names for debugging
+InboxTemplate1.displayName = 'Inbox';
+InboxTemplate1Internal.displayName = 'InboxTemplate1Internal';
+HeaderWithTabs.displayName = 'HeaderWithTabs';
+ContentComponent.displayName = 'ContentComponent';
+MessagesComponent.displayName = 'MessagesComponent';
+RightSidebarWrapper.displayName = 'RightSidebarWrapper';
+RightSidebarContent.displayName = 'RightSidebarContent';
+var InboxTemplate1$1 = React__default.memo(InboxTemplate1);export{InboxTemplate1$1 as default};//# sourceMappingURL=InboxTemplate1.js.map