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

package/lib/container/InboxTemplate2.js

@@ -1,1426 +0,0 @@
-import React__default,{createContext,useState,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 {AIAgent}from'../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,
-    currentUser: currentUser
-  }) : 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,
-    currentUser
-  } = props;
-  // AI Agent mode state
-  const [isAIAgentMode, setIsAIAgentMode] = useState(false);
-  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
-  }), React__default.createElement("div", {
-    className: `${isSmallScreen ? 'mx-3' : 'mx-4'} mt-4 mb-2`
-  }, React__default.createElement("div", {
-    className: "flex items-center justify-between"
-  }, React__default.createElement("div", {
-    className: "flex items-center space-x-2"
-  }, React__default.createElement("span", {
-    className: "text-sm font-medium text-gray-700"
-  }, "AI Assistant"), React__default.createElement("div", {
-    className: "relative inline-block w-10 mr-2 align-middle select-none"
-  }, React__default.createElement("input", {
-    type: "checkbox",
-    name: "toggle",
-    id: "ai-agent-toggle",
-    checked: isAIAgentMode,
-    onChange: e => setIsAIAgentMode(e.target.checked),
-    className: "sr-only"
-  }), React__default.createElement("label", {
-    htmlFor: "ai-agent-toggle",
-    className: `block w-10 h-6 rounded-full cursor-pointer transition-all duration-200 ease-in-out shadow-inner ${isAIAgentMode ? 'bg-blue-500' : 'bg-gray-300'}`
-  }, React__default.createElement("span", {
-    className: `block w-4 h-4 bg-white rounded-full transition-transform duration-200 ease-in-out transform shadow-md ${isAIAgentMode ? 'translate-x-5' : 'translate-x-1'}`,
-    style: {
-      marginTop: '2px'
-    }
-  })))), isAIAgentMode && React__default.createElement("div", {
-    className: "flex items-center space-x-2 text-xs text-blue-600"
-  }, React__default.createElement("span", {
-    className: "w-2 h-2 bg-blue-500 rounded-full animate-pulse"
-  }), React__default.createElement("span", null, "AI Mode Active")))), (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,
-    isAIAgentMode: isAIAgentMode,
-    channelName: channelName,
-    currentUser: currentUser
-  })))), (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,
-    isAIAgentMode,
-    channelName,
-    currentUser
-  } = 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
-    }
-  }];
-  // 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: currentUser?.id,
-          givenName: currentUser?.profile?.given_name || '',
-          familyName: currentUser?.profile?.family_name || '',
-          email: currentUser?.profile?.email || '',
-          username: currentUser?.profile?.nickname || '',
-          fullName: currentUser?.profile?.name || '',
-          picture: currentUser?.profile?.picture || '',
-          alias: [currentUser?.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"
-    }));
-  }
-  // If AI Agent mode is enabled, render the AI Agent component
-  if (isAIAgentMode) {
-    return React__default.createElement("div", {
-      className: "flex-1 flex flex-col min-h-0 overflow-hidden"
-    }, React__default.createElement(AIAgent, {
-      channelId: channelId,
-      placeholder: "Ask me anything...",
-      className: "h-full",
-      currentUser: currentUser,
-      channelName: channelName
-    }));
-  }
-  // Regular messages mode
-  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: currentUser,
-    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 InboxTemplate2 = React__default.memo(InboxTemplate1);export{InboxTemplate2 as default};//# sourceMappingURL=InboxTemplate2.js.map