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

package/src/container/Inbox.tsx

@@ -0,0 +1,1095 @@
+import React, { ReactNode, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+import { orderBy, uniqBy } from 'lodash-es';
+import {
+    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
+    useSendMessagesMutation,
+    GetChannelsByUserDocument,
+    MessagesDocument,
+} from 'common/graphql';
+import { useUploadFiles } from '@messenger-box/platform-client';
+import { IFileInfo, RoomType, PostTypeEnum } from 'common';
+import { useSelector, shallowEqual } from 'react-redux';
+import { useNavigate, useParams } from '@remix-run/react';
+import { LeftSidebar, MessageInput, Messages, RightSidebar } from '../components';
+import { Store, userSelector } from '@adminide-stack/user-auth0-client';
+import { IUserState } from '@adminide-stack/core';
+import { config } from '../config';
+import { applyFooterStyles } from './apply-footer-styles';
+import { objectId } from '@messenger-box/core';
+import { ThreadsInbox } from './ThreadsInbox';
+import { ThreadMessagesInbox } from './ThreadMessagesInbox';
+import { useApolloClient } from '@apollo/client';
+import { SubscriptionHandler } from '../components/InboxMessage/SubscriptionHandler';
+
+const { MESSAGES_PER_PAGE } = config;
+
+// Types
+interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    title?: string;
+}
+
+export interface InboxProps {
+    channelFilters?: Record<string, unknown>;
+    channelRole?: string;
+    supportServices?: boolean;
+    pathPrefix?: string;
+    data?: any;
+    orgName?: string;
+}
+
+interface MobilePreviewState {
+    mobilePreviewVisibility: boolean;
+    mobilePreviewText: string | ReactNode;
+    mobilePreviewCTAText: string | ReactNode;
+}
+
+// Static utility hooks and components
+const useMediaQuery = (query: string) => {
+    const [matches, setMatches] = React.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.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.memo(({ className = '' }: { className?: string }) => (
+    <div className={`animate-spin rounded-full border-4 border-gray-200 border-t-blue-500 ${className}`}>
+        <span className="sr-only">Loading...</span>
+    </div>
+));
+
+const Drawer = React.memo(({ isOpen, onClose, children, title }: DrawerProps) => {
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 overflow-hidden">
+            <div className="absolute inset-0 bg-black bg-opacity-50" onClick={onClose} />
+            <div className="absolute bottom-0 left-0 right-0 bg-white rounded-t-lg shadow-lg max-h-[80vh] flex flex-col overflow-hidden">
+                <div className="flex items-center justify-between p-4 border-b border-gray-200 flex-shrink-0">
+                    <h2 className="text-lg font-semibold truncate">{title}</h2>
+                    <button
+                        onClick={onClose}
+                        className="p-1 hover:bg-gray-100 rounded-full transition-colors flex-shrink-0 ml-2"
+                    >
+                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M6 18L18 6M6 6l12 12"
+                            />
+                        </svg>
+                    </button>
+                </div>
+                <div className="flex-1 p-4 overflow-y-auto" style={{ minHeight: 0 }}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+});
+
+const EmptyState = React.memo(() => (
+    <div className="h-full flex items-center justify-center bg-gray-100 p-4 sm:p-6 overflow-hidden">
+        <div className="text-center max-w-sm mx-auto">
+            <div className="text-3xl sm:text-4xl text-gray-400 mb-4">💬</div>
+            <h3 className="text-lg sm:text-xl font-semibold text-gray-600 mb-2">Welcome to Messenger</h3>
+            <p className="text-sm sm:text-base text-gray-500 leading-relaxed">
+                Select a conversation from the sidebar to start messaging
+            </p>
+        </div>
+    </div>
+));
+
+// Mobile preview reducer
+const mobilePreviewReducer = (
+    state: MobilePreviewState,
+    action: { payload: Partial<MobilePreviewState>; type: string },
+) => {
+    if (action.type === 'update') {
+        return { ...state, ...action.payload };
+    }
+    return state;
+};
+
+const Inbox = (props: InboxProps) => {
+    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.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: any = useSelector<Store.Auth, IUserState>(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: string, pId: string | null = null) => {
+            // Optimistic UI update
+            const mainPath = orgName
+                ? pId
+                    ? `/o/${orgName}/direct-message/${channelId}/${pId}`
+                    : `/o/${orgName}/direct-message/${channelId}`
+                : pId
+                ? `/inbox/${channelId}/${pId}`
+                : `/inbox/${channelId}`;
+            const basePath = pathPrefix ? `${pathPrefix}${mainPath}` : mainPath;
+
+            const searchParams = new URLSearchParams();
+            // if (channelRole) searchParams.set('channelRole', channelRole);
+            // if (orgName) searchParams.set('orgName', orgName);
+
+            const newPath = searchParams.toString() ? `${basePath}?${searchParams.toString()}` : basePath;
+            navigate(newPath, { replace: true });
+
+            // Optimistically update Apollo cache for immediate UI feedback
+            try {
+                apolloClient.writeQuery({
+                    query: MessagesDocument,
+                    variables: {
+                        channelId: channelId.toString(),
+                        parentId: null,
+                        limit: MESSAGES_PER_PAGE,
+                    },
+                    data: {
+                        messages: {
+                            __typename: 'Messages',
+                            data: [],
+                            totalCount: 0,
+                            messagesRefId: channelId,
+                        },
+                    },
+                });
+            } catch (error) {
+                // Cache write might fail if query hasn't been executed yet, that's OK
+                console.debug('Cache write failed (expected on first load):', error);
+            }
+        },
+        [navigate, apolloClient, orgName, channelRole, pathPrefix],
+    );
+
+    const detailSidebarOptions = useMemo(
+        () => ({
+            isMobileView,
+            isSmallTabletView,
+            isTabletView,
+            isDesktopView,
+            isLargeDesktopView,
+            isSmallScreen,
+            setMobilePreviewCTAText: (v: string | ReactNode) =>
+                localDispatch({ payload: { mobilePreviewCTAText: v }, type: 'update' }),
+            setMobilePreviewText: (v: string | ReactNode) =>
+                localDispatch({ payload: { mobilePreviewText: v }, type: 'update' }),
+            setMobilePreviewVisibility: (v: boolean) =>
+                localDispatch({ payload: { mobilePreviewVisibility: v }, type: 'update' }),
+        }),
+        [isMobileView, isSmallTabletView, isTabletView, isDesktopView, isLargeDesktopView, isSmallScreen],
+    );
+
+    return (
+        <div
+            className="border-t border-gray-300 flex overflow-hidden"
+            style={{
+                height: `${windowHeight}px`,
+                maxHeight: '100vh',
+            }}
+        >
+            {/* Left Sidebar - Responsive Design */}
+            <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',
+                }}
+            >
+                <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}
+                />
+            </div>
+
+            {/* Main Content Area - Responsive */}
+            <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 ? (
+                    <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}
+                    />
+                ) : (
+                    <EmptyState />
+                )}
+            </div>
+
+            {/* Right Sidebar - Desktop Only */}
+            {pathChannelId && data?.[1] && isDesktopView && (
+                // <div
+                //     className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden"
+                //     style={{
+                //         width: isLargeDesktopView
+                //             ? `${Math.min(384, windowWidth * 0.25)}px` // w-96 or 25% of window
+                //             : `${Math.min(320, windowWidth * 0.22)}px`, // w-80 or 22% of window
+                //         height: `${windowHeight}px`,
+                //         maxHeight: '100vh'
+                //     }}
+                // >
+                <RightSidebarWrapper
+                    MessagesLoaderQuery={data?.[1]}
+                    selectedPost={null}
+                    detailSidebarOptions={detailSidebarOptions}
+                />
+                // </div>
+            )}
+        </div>
+    );
+};
+
+const ContentComponent = React.memo((props: any) => {
+    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.useState(null);
+    const { data: channelData, loading: channelLoading } = ViewChannelDetailLoaderQuery || {};
+
+    const onMessageClick = useCallback((msg: any) => {
+        setSelectedPost(msg);
+    }, []);
+
+    const channelsDetail = useMemo(() => {
+        return channelData?.viewChannelDetail || null;
+    }, [channelData]);
+
+    return (
+        <div className="flex overflow-hidden" style={{ height: `${windowHeight}px`, maxHeight: '100vh' }}>
+            {/* Main Chat Content */}
+            <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+                {/* Channel Header */}
+                {channelId && (
+                    <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'
+                        }`}
+                    >
+                        <div className="flex items-center justify-between">
+                            <div className="flex items-center space-x-2 min-w-0 flex-1">
+                                {/* Mobile/Small Screen Back Button */}
+                                {(isMobileView || isSmallTabletView) && (
+                                    <button
+                                        className="p-2 hover:bg-gray-100 rounded-full transition-colors flex-shrink-0"
+                                        onClick={() => window.history.back()}
+                                        aria-label="Go back"
+                                    >
+                                        <svg
+                                            className="w-5 h-5 text-gray-600"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            viewBox="0 0 24 24"
+                                        >
+                                            <path
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth={2}
+                                                d="M15 19l-7-7 7-7"
+                                            />
+                                        </svg>
+                                    </button>
+                                )}
+                                <h2
+                                    className={`font-semibold text-gray-800 truncate ${
+                                        isSmallScreen ? 'text-base' : 'text-lg'
+                                    }`}
+                                >
+                                    {channelName}
+                                </h2>
+                            </div>
+                            {(isMobileView || isSmallTabletView) && mobilePreviewState?.mobilePreviewVisibility && (
+                                <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}
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                )}
+
+                {/* Mobile Preview */}
+                {(isMobileView || isSmallTabletView) && channelId && mobilePreviewState?.mobilePreviewVisibility && (
+                    <div className={`mt-4 ${isSmallScreen ? 'mx-3' : 'mx-4'}`}>
+                        <div className="mb-2">
+                            <div className="w-full flex justify-between items-center gap-2 mb-[5px]">
+                                <span className="truncate flex-1 text-sm">{mobilePreviewState?.mobilePreviewText}</span>
+                                <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}
+                                </button>
+                            </div>
+                        </div>
+                        <hr className="border-gray-200" />
+                    </div>
+                )}
+
+                {/* Content based on postId */}
+                <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+                    {channelId && (
+                        <>
+                            {postId ? (
+                                postId === '1' ? (
+                                    <ThreadsInbox
+                                        channelId={channelId}
+                                        role={channelRole}
+                                        pathPrefix={pathPrefix}
+                                        setChannelId={() => {}}
+                                        setPostId={() => {}}
+                                        setGoBack={() => {}}
+                                    />
+                                ) : (
+                                    <ThreadMessagesInbox
+                                        channelId={channelId}
+                                        postId={postId}
+                                        role={channelRole}
+                                        goBack={false}
+                                        pathPrefix={pathPrefix}
+                                        setPostId={() => {}}
+                                        setChannelId={() => {}}
+                                        onMessageClick={onMessageClick}
+                                    />
+                                )
+                            ) : (
+                                <MessagesComponent
+                                    channelId={channelId}
+                                    MessagesLoaderQuery={MessagesLoaderQuery}
+                                    channelsDetail={channelsDetail}
+                                    channelLoading={channelLoading}
+                                    onMessageClick={onMessageClick}
+                                    isSmallScreen={isSmallScreen}
+                                    isDesktopView={isDesktopView}
+                                    windowHeight={windowHeight}
+                                    windowWidth={windowWidth}
+                                />
+                            )}
+                        </>
+                    )}
+                </div>
+            </div>
+
+            {/* Mobile/Small Screen Drawer */}
+            {(isMobileView || isSmallTabletView) && (
+                <Drawer
+                    isOpen={isBottomDrawerOpen}
+                    onClose={() => setBottomDrawer(false)}
+                    title={mobilePreviewState.mobilePreviewText as string}
+                >
+                    <RightSidebarWrapper
+                        MessagesLoaderQuery={MessagesLoaderQuery}
+                        selectedPost={selectedPost}
+                        detailSidebarOptions={detailSidebarOptions}
+                    />
+                </Drawer>
+            )}
+        </div>
+    );
+});
+
+const RightSidebarWrapper = React.memo(({ MessagesLoaderQuery, selectedPost, detailSidebarOptions }: any) => {
+    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 (
+        <div className="h-full flex flex-col overflow-hidden">
+            <RightSidebar
+                channelMessages={sortedMessages}
+                visibility="visible"
+                selectedPost={selectedPost}
+                {...detailSidebarOptions}
+            />
+        </div>
+    );
+});
+
+const MessagesComponent = React.memo((props: any) => {
+    const {
+        channelId,
+        MessagesLoaderQuery,
+        channelsDetail,
+        channelLoading,
+        onMessageClick,
+        isSmallScreen,
+        isDesktopView,
+        windowHeight = 768,
+        windowWidth = 1024,
+    } = props;
+
+    const messageRootListRef = useRef(null);
+    const messageListRef = useRef(null);
+    const apolloClient = useApolloClient();
+    const [isLoadingOlder, setIsLoadingOlder] = React.useState(false);
+    const isLoadingOlderRef = useRef(false);
+    const scrollTimeoutRef = useRef(null);
+
+    const auth = useSelector(userSelector);
+    const { startUpload } = useUploadFiles();
+    const [sendMsg] = useSendMessagesMutation();
+
+    const { data, loading: messageLoading, fetchMore: fetchMoreMessages, subscribeToMore } = MessagesLoaderQuery || {};
+
+    // Get messages directly from Apollo cache
+    const messages = useMemo(() => {
+        const messagesData = data?.messages?.data || [];
+        return orderBy(uniqBy(messagesData, 'id'), ['createdAt'], ['asc']);
+    }, [data?.messages?.data]);
+
+    const totalCount = data?.messages?.totalCount || 0;
+
+    const scrollToBottom = useCallback(() => {
+        if (messageRootListRef?.current) {
+            messageRootListRef.current.scrollTop = messageRootListRef.current.scrollHeight;
+        }
+    }, []);
+
+    // Auto-scroll on new messages (but not when loading older messages)
+    useEffect(() => {
+        if (!isLoadingOlderRef.current) {
+            const timer = setTimeout(() => scrollToBottom(), 100);
+            return () => clearTimeout(timer);
+        }
+    }, [messages.length, scrollToBottom]);
+
+    const onFetchOld = useCallback(
+        async (skip: number) => {
+            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: any) => {
+            // Throttle scroll events for better performance, especially in Firefox
+            if (scrollTimeoutRef.current) {
+                clearTimeout(scrollTimeoutRef.current);
+            }
+
+            scrollTimeoutRef.current = setTimeout(async () => {
+                if (messageRootListRef.current && !isLoadingOlder) {
+                    const element = messageRootListRef.current;
+                    const { clientHeight, scrollHeight, scrollTop } = element;
+
+                    // Firefox-compatible scroll detection
+                    // Use Math.ceil to handle Firefox's fractional scrollTop values
+                    const isAtTop = Math.ceil(scrollTop) <= 25;
+                    const hasMoreMessages = totalCount > messages.length;
+
+                    // Additional Firefox-specific check
+                    const isFirefox = navigator.userAgent.includes('Firefox');
+                    const firefoxAdjustedTop = isFirefox ? Math.round(scrollTop) <= 30 : isAtTop;
+
+                    if ((isAtTop || firefoxAdjustedTop) && hasMoreMessages) {
+                        console.log('Triggering load more:', {
+                            scrollTop: Math.ceil(scrollTop),
+                            originalScrollTop: scrollTop,
+                            totalCount,
+                            messagesLength: messages.length,
+                            scrollHeight,
+                            clientHeight,
+                            browser: isFirefox ? 'Firefox' : 'Other',
+                            isAtTop,
+                            firefoxAdjustedTop,
+                        });
+                        await onFetchOld(messages.length);
+                    }
+                }
+            }, 100);
+        },
+        [totalCount, messages.length, onFetchOld, isLoadingOlder],
+    );
+
+    // Optimistic message sending with Apollo cache updates
+    const handleSend = useCallback(
+        async (message: string, files: any[] = []) => {
+            // 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?: any[]) => ({
+                    __typename: 'Post' as const,
+                    id: postId,
+                    message,
+                    createdAt: currentDate.toISOString(),
+                    updatedAt: currentDate.toISOString(),
+                    author: {
+                        __typename: 'UserAccount' as const,
+                        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' as PostTypeEnum,
+                    parentId: null,
+                    fromServer: false,
+                    channel: {
+                        __typename: 'Channel' as const,
+                        id: channelId,
+                    },
+                    propsConfiguration: {
+                        __typename: 'MachineConfiguration' as const,
+                        id: null,
+                        resource: '' as any,
+                        contents: null,
+                        keys: null,
+                        target: null,
+                        overrides: null,
+                    },
+                    props: {},
+                    files: {
+                        __typename: 'FilesInfo' as const,
+                        data: files || [],
+                        totalCount: files?.length || 0,
+                    },
+                    replies: {
+                        __typename: 'Messages' as const,
+                        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 as unknown as IFileInfo[];
+                    if (uploadedFiles) {
+                        const fileIds = uploadedFiles.map((f: any) => 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;
+                                const newPost = mutationData.sendMessage;
+                                const cid = channelId.toString();
+                                cache.modify({
+                                    fields: {
+                                        messages(existing: any, { storeFieldName, toReference }: any) {
+                                            if (!storeFieldName.includes(cid)) return existing;
+                                            if (
+                                                storeFieldName.includes('"parentId"') &&
+                                                !storeFieldName.includes('"parentId":null')
+                                            ) {
+                                                return existing;
+                                            }
+                                            if (!existing) {
+                                                return {
+                                                    __typename: 'Messages',
+                                                    data: [toReference(newPost)],
+                                                    totalCount: 1,
+                                                };
+                                            }
+                                            const newRef = toReference(newPost);
+                                            const existingRefs = existing.data || [];
+                                            if (existingRefs.some((ref: any) => ref?.__ref === newRef?.__ref))
+                                                return existing;
+                                            return {
+                                                ...existing,
+                                                data: [...existingRefs, newRef],
+                                                totalCount: (existing.totalCount || 0) + 1,
+                                            };
+                                        },
+                                    },
+                                });
+                            },
+                        });
+                    }
+                } else {
+                    await sendMsg({
+                        variables: { postId, channelId, content: message },
+                        optimisticResponse: {
+                            __typename: 'Mutation',
+                            sendMessage: optimisticMessage,
+                        },
+                        update: (cache, { data: mutationData }) => {
+                            if (!mutationData?.sendMessage) return;
+                            const newPost = mutationData.sendMessage;
+                            const cid = channelId.toString();
+                            cache.modify({
+                                fields: {
+                                    messages(existing: any, { storeFieldName, toReference }: any) {
+                                        if (!storeFieldName.includes(cid)) return existing;
+                                        if (
+                                            storeFieldName.includes('"parentId"') &&
+                                            !storeFieldName.includes('"parentId":null')
+                                        ) {
+                                            return existing;
+                                        }
+                                        if (!existing) {
+                                            return {
+                                                __typename: 'Messages',
+                                                data: [toReference(newPost)],
+                                                totalCount: 1,
+                                            };
+                                        }
+                                        const newRef = toReference(newPost);
+                                        const existingRefs = existing.data || [];
+                                        if (existingRefs.some((ref: any) => ref?.__ref === newRef?.__ref))
+                                            return existing;
+                                        return {
+                                            ...existing,
+                                            data: [...existingRefs, newRef],
+                                            totalCount: (existing.totalCount || 0) + 1,
+                                        };
+                                    },
+                                },
+                            });
+                        },
+                    });
+                }
+            } 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 (
+            <div className="flex-1 flex justify-center items-center">
+                <Spinner className="w-12 h-12" />
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <div
+                ref={messageRootListRef}
+                className={`overflow-y-scroll bg-gray-50 ${
+                    isSmallScreen ? 'p-2 px-3' : isDesktopView ? 'p-6 px-8' : 'p-4 px-6'
+                }`}
+                onScroll={onMessagesScroll}
+                style={{
+                    height: `${windowHeight - 140}px`, // Subtract header + input height
+                    maxHeight: '100vh',
+                    scrollbarWidth: 'thin',
+                    scrollbarColor: '#cbd5e0 #f7fafc',
+                    overflowY: 'scroll',
+                    WebkitOverflowScrolling: 'touch',
+                }}
+            >
+                <div className="min-h-full">
+                    {messages.length > 0 ? (
+                        <>
+                            {/* Loading indicator for older messages at the top */}
+                            {isLoadingOlder && (
+                                <div className="flex justify-center py-4">
+                                    <div className="flex items-center space-x-2 text-gray-500">
+                                        <Spinner className="w-4 h-4" />
+                                        <span className="text-sm">Loading older messages...</span>
+                                    </div>
+                                </div>
+                            )}
+                            <Messages
+                                innerRef={messageListRef}
+                                channelId={channelId}
+                                currentUser={auth}
+                                channelMessages={messages}
+                                totalCount={totalCount}
+                                onMessageClick={onMessageClick}
+                                isDesktopView={isDesktopView || false}
+                                isSmallScreen={isSmallScreen || false}
+                            />
+                            <SubscriptionHandler
+                                subscribeToMore={subscribeToMore}
+                                document={CHAT_MESSAGE_ADDED}
+                                variables={{ channelId: channelId.toString() }}
+                                enabled={!!channelId && !!subscribeToMore}
+                                updateQuery={(prev: any, { subscriptionData }: any) => {
+                                    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);
+                                }}
+                            />
+                        </>
+                    ) : (
+                        <div className="flex items-center justify-center text-gray-500 min-h-96">
+                            <div className="text-center max-w-sm mx-auto px-4">
+                                <div className="text-6xl mb-4 opacity-50">💬</div>
+                                <h3 className="text-lg font-semibold text-gray-600 mb-2">No messages yet</h3>
+                                <p className="text-sm text-gray-500">
+                                    Start the conversation by sending a message below!
+                                </p>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+            <div className="flex-shrink-0 border-t border-gray-200 bg-white">
+                <MessageInput channelId={channelId} handleSend={handleSend} placeholder="Message" />
+            </div>
+        </>
+    );
+});
+
+// Display names for debugging
+Inbox.displayName = 'Inbox';
+ContentComponent.displayName = 'ContentComponent';
+MessagesComponent.displayName = 'MessagesComponent';
+RightSidebarWrapper.displayName = 'RightSidebarWrapper';
+
+export default React.memo(Inbox);