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

package/src/container/InboxTemplate1.tsx

@@ -0,0 +1,1542 @@
+import React, {
+    ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useReducer,
+    useRef,
+    createContext,
+    useContext,
+} 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, MessagesBuilderUi, InputComponent } 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;
+
+// Context for sharing tab state between header and sidebar
+const TabContext = createContext<{
+    activeTab: string;
+    setActiveTab: (tab: string) => void;
+}>({
+    activeTab: 'design',
+    setActiveTab: () => {},
+});
+
+// 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 InboxTemplate1 = (props: InboxProps) => {
+    const [activeTab, setActiveTab] = React.useState('design');
+
+    return (
+        <TabContext.Provider value={{ activeTab, setActiveTab }}>
+            <InboxTemplate1Internal {...props} />
+        </TabContext.Provider>
+    );
+};
+
+const InboxTemplate1Internal = (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}/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: 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 && (
+                <RightSidebarContent
+                    MessagesLoaderQuery={data?.[1]}
+                    selectedPost={null}
+                    detailSidebarOptions={detailSidebarOptions}
+                    windowWidth={windowWidth}
+                    windowHeight={windowHeight}
+                />
+            )}
+        </div>
+    );
+};
+
+const HeaderWithTabs = React.memo((props: any) => {
+    const { channelName, isMobileView, isSmallTabletView, isSmallScreen, mobilePreviewState, setBottomDrawer } = props;
+
+    return (
+        <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>
+
+                {/* Mobile Preview Button */}
+                {(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>
+    );
+});
+
+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 && (
+                    <HeaderWithTabs
+                        channelName={channelName}
+                        isMobileView={isMobileView}
+                        isSmallTabletView={isSmallTabletView}
+                        isSmallScreen={isSmallScreen}
+                        mobilePreviewState={mobilePreviewState}
+                        setBottomDrawer={setBottomDrawer}
+                        loaderdata={loaderdata}
+                    />
+                )}
+
+                {/* 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 { 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 (
+        <div className="h-full flex flex-col overflow-hidden bg-white">
+            {/* Header with tabs and refresh icon */}
+            <div className="flex-shrink-0 border-b border-gray-200">
+                <div className="flex items-center justify-between px-4 py-3">
+                    <div className="flex items-center space-x-1">
+                        <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'
+                            }`}
+                        >
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <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"
+                                />
+                            </svg>
+                            <span>Design</span>
+                        </button>
+                        <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'
+                            }`}
+                        >
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                                />
+                                <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"
+                                />
+                            </svg>
+                            <span>Interact</span>
+                        </button>
+                        <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'
+                            }`}
+                        >
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+                                />
+                            </svg>
+                            <span>Code</span>
+                        </button>
+                    </div>
+
+                    {/* Refresh icon */}
+                    <button
+                        onClick={handleRefreshSandbox}
+                        className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
+                        title="Refresh Sandbox"
+                    >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <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"
+                            />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            {/* Content Area */}
+            <div className="flex-1 overflow-hidden">
+                {activeTab === 'design' ? (
+                    <div className="h-full flex items-center justify-center bg-gray-50">
+                        <div className="text-center">
+                            {/* Next.js Logo */}
+                            <div className="mb-8">
+                                <svg className="w-32 h-16 mx-auto text-black" viewBox="0 0 394 80" fill="currentColor">
+                                    <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" />
+                                    <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" />
+                                </svg>
+                            </div>
+
+                            <div className="space-y-4 text-gray-600">
+                                <h3 className="text-lg font-semibold text-gray-900">Design View</h3>
+                                <p className="font-mono text-sm bg-gray-100 px-3 py-1 rounded">
+                                    Design components and UI
+                                </p>
+                                <p>Customize and preview your design changes.</p>
+                            </div>
+
+                            <div className="mt-8 space-y-4">
+                                <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">
+                                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M12 2L2 7v10c0 5.55 3.84 9.739 9 11 5.16-1.261 9-5.45 9-11V7l-10-5z" />
+                                    </svg>
+                                    <span>Design now</span>
+                                </button>
+                                <p className="text-sm text-gray-500 underline cursor-pointer hover:text-gray-700">
+                                    View design docs
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                ) : activeTab === 'interact' ? (
+                    <div className="h-full flex items-center justify-center bg-blue-50">
+                        <div className="text-center">
+                            {/* Interact Icon */}
+                            <div className="mb-8">
+                                <svg
+                                    className="w-32 h-32 mx-auto text-blue-500"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={1}
+                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                                    />
+                                    <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"
+                                    />
+                                </svg>
+                            </div>
+
+                            <div className="space-y-4 text-gray-600">
+                                <h3 className="text-lg font-semibold text-gray-900">Interactive Mode</h3>
+                                <p className="font-mono text-sm bg-blue-100 px-3 py-1 rounded">
+                                    Live interaction and testing
+                                </p>
+                                <p>Test and interact with your components in real-time.</p>
+                            </div>
+
+                            <div className="mt-8 space-y-4">
+                                <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">
+                                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M8 5v14l11-7z" />
+                                    </svg>
+                                    <span>Start Interacting</span>
+                                </button>
+                                <p className="text-sm text-gray-500 underline cursor-pointer hover:text-gray-700">
+                                    Learn about interactions
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="h-full bg-gray-900 text-gray-300 p-4 overflow-auto">
+                        <div className="font-mono text-sm">
+                            <div className="mb-4">
+                                <div className="text-green-400">// app/page.tsx</div>
+                            </div>
+                            <div className="space-y-2">
+                                <div>
+                                    <span className="text-purple-400">export</span>{' '}
+                                    <span className="text-purple-400">default</span>{' '}
+                                    <span className="text-blue-400">function</span>{' '}
+                                    <span className="text-yellow-400">Home</span>() {'{'}
+                                </div>
+                                <div className="ml-4">
+                                    <span className="text-purple-400">return</span> (
+                                </div>
+                                <div className="ml-8">
+                                    {'<'}
+                                    <span className="text-red-400">main</span>{' '}
+                                    <span className="text-green-400">className</span>=
+                                    <span className="text-yellow-400">
+                                        "flex min-h-screen flex-col items-center justify-between p-24"
+                                    </span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-12">
+                                    {'<'}
+                                    <span className="text-red-400">div</span>{' '}
+                                    <span className="text-green-400">className</span>=
+                                    <span className="text-yellow-400">
+                                        "z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex"
+                                    </span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-16">
+                                    {'<'}
+                                    <span className="text-red-400">p</span>{' '}
+                                    <span className="text-green-400">className</span>=
+                                    <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"
+                                    </span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-20 text-gray-400">Get started by editing&nbsp;</div>
+                                <div className="ml-20">
+                                    {'<'}
+                                    <span className="text-red-400">code</span>{' '}
+                                    <span className="text-green-400">className</span>=
+                                    <span className="text-yellow-400">"font-mono font-bold"</span>
+                                    {'>'}app/page.tsx{'</'}
+                                    <span className="text-red-400">code</span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-16">
+                                    {'</'}
+                                    <span className="text-red-400">p</span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-12">
+                                    {'</'}
+                                    <span className="text-red-400">div</span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-8">
+                                    {'</'}
+                                    <span className="text-red-400">main</span>
+                                    {'>'}
+                                </div>
+                                <div className="ml-4">);</div>
+                                <div>{'}'}</div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+});
+
+const RightSidebarContent = React.memo(
+    ({ MessagesLoaderQuery, selectedPost, detailSidebarOptions, windowWidth, windowHeight }: 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="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',
+                }}
+            >
+                <RightSidebarWrapper
+                    MessagesLoaderQuery={MessagesLoaderQuery}
+                    selectedPost={selectedPost}
+                    detailSidebarOptions={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 || {};
+    // Add dummy messages with modern formatting to showcase the new UI
+    const dummyMessages = [
+        {
+            id: 'dummy-1',
+            message: `# Modern Next.js-Style Application
+
+I'll help you build a modern Next.js-style application. Let me first examine the current homepage and then completely rebuild it to create a beautiful, modern "next app" experience.`,
+            createdAt: new Date(Date.now() + 2000).toISOString(),
+            author: {
+                id: 'ai-assistant',
+                username: 'AI Assistant',
+                givenName: 'AI',
+                familyName: 'Assistant',
+                picture: '/default-avatar.svg',
+            },
+            files: { data: [], totalCount: 0 },
+        },
+        {
+            id: 'dummy-2',
+            message: `## Key Features:
+
+- **Professional Navigation** - Clean header with logo and navigation links
+- **Hero Section** - Compelling headline with gradient text effects and code preview
+- **Feature Cards** - Showcase of Next.js capabilities with modern icons
+- **Call-to-Action** - Clear conversion paths for user engagement
+- **Footer** - Comprehensive site navigation and branding
+
+### Design Highlights:
+
+- Modern gradient branding (blue to purple to pink)
+- Clean typography with proper hierarchy
+- Responsive grid layouts for all screen sizes
+- Subtle backdrop blur effects and modern cards
+- Smooth scroll behavior and enhanced visual effects
+- Production-ready color palette with proper light/dark mode support`,
+            createdAt: new Date(Date.now() + 3000).toISOString(),
+            author: {
+                id: 'ai-assistant',
+                username: 'AI Assistant',
+                givenName: 'AI',
+                familyName: 'Assistant',
+                picture: '/default-avatar.svg',
+            },
+            files: { data: [], totalCount: 0 },
+        },
+        {
+            id: 'dummy-3',
+            message: `### Technical Implementation:
+
+Uses existing **shadcn/ui components** (Button, Card, Badge)
+.`,
+            createdAt: new Date(Date.now() + 4000).toISOString(),
+            author: {
+                id: 'ai-assistant',
+                username: 'AI Assistant',
+                givenName: 'AI',
+                familyName: 'Assistant',
+                picture: '/default-avatar.svg',
+            },
+            files: { data: [], totalCount: 0 },
+        },
+        {
+            id: 'dummy-4',
+            message: `\`\`\`typescript
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center">
+      <div className="z-10 max-w-5xl w-full items-center">
+        <p className="fixed left-0 top-0 flex w-full justify-center">
+          Get started by editing app/page.tsx
+        </p>
+      </div>
+    </main>
+  );
+}\`\`\`
+.`,
+            createdAt: new Date(Date.now() + 4000).toISOString(),
+            author: {
+                id: 'ai-assistant',
+                username: 'AI Assistant',
+                givenName: 'AI',
+                familyName: 'Assistant',
+                picture: '/default-avatar.svg',
+            },
+            files: { data: [], totalCount: 0 },
+        },
+        {
+            id: 'tool-status-1',
+            message: `<div class="px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm text-gray-700" style="border-radius: 5px !important;">🔧 Running tool</div>`,
+            createdAt: new Date(Date.now() + 5000).toISOString(),
+            author: {
+                id: 'system-tool',
+                username: 'System Tool',
+                givenName: 'System',
+                familyName: 'Tool',
+                picture: '/default-avatar.svg',
+            },
+            files: { data: [], totalCount: 0 },
+        },
+        {
+            id: 'tool-status-2',
+            message: `<div class="px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm text-gray-700" style="border-radius: 5px !important;">🔧 Running tool</div>`,
+            createdAt: new Date(Date.now() + 5500).toISOString(),
+            author: {
+                id: 'system-tool',
+                username: 'System Tool',
+                givenName: 'System',
+                familyName: 'Tool',
+                picture: '/default-avatar.svg',
+            },
+            files: { data: [], totalCount: 0 },
+        },
+        {
+            id: 'bullet-point-1',
+            message: `<div>
+                        <h1 class="text-xl font-bold">Installation process</h1>
+                         <ul>
+                        <li>Install Node.js</li>
+                        <li>Install npm</li>
+                        <li>Install React</li>
+                        <li>Install Tailwind CSS</li>
+                        <li>Install shadcn/ui</li>
+                        <li>Install Next.js</li>
+                        <li>Install TypeScript</li>
+                        <li>Install ESLint</li>
+                        <li>Install Prettier</li>
+                        </ul> </div>`,
+            createdAt: new Date(Date.now() + 5500).toISOString(),
+            author: {
+                id: 'bullet-tool',
+                username: 'System Tool',
+                givenName: 'System',
+                familyName: 'Tool',
+                picture: '/default-avatar.svg',
+            },
+            files: { data: [], totalCount: 0 },
+        },
+    ];
+
+    console.log('dummyMessages', JSON.stringify(dummyMessages, null, 2));
+
+    // Get messages directly from Apollo cache
+    const messages = useMemo(() => {
+        const messagesData = data?.messages?.data || [];
+        dummyMessages.forEach((msg) => messagesData.push(msg));
+        return orderBy(uniqBy(messagesData, 'id'), ['createdAt'], ['asc']);
+    }, [data?.messages?.data]);
+
+    const totalCount = data?.messages?.totalCount || 0;
+
+    const scrollToBottom = useCallback(() => {
+        if (messageRootListRef?.current) {
+            messageRootListRef.current.scrollTop = messageRootListRef.current.scrollHeight;
+        }
+    }, []);
+
+    // Auto-scroll on new messages (but not when loading older messages)
+    useEffect(() => {
+        if (!isLoadingOlderRef.current) {
+            const timer = setTimeout(() => scrollToBottom(), 100);
+            return () => clearTimeout(timer);
+        }
+    }, [messages.length, scrollToBottom]);
+
+    const onFetchOld = useCallback(
+        async (skip: 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;
+
+                                // Update messages cache optimistically
+                                const messagesQuery = {
+                                    query: MessagesDocument,
+                                    variables: {
+                                        channelId: channelId.toString(),
+                                        parentId: null,
+                                        limit: MESSAGES_PER_PAGE,
+                                    },
+                                };
+
+                                try {
+                                    const existingData = cache.readQuery(messagesQuery) as any;
+                                    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) as any;
+                                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 (
+            <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-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',
+                }}
+            >
+                <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>
+                            )}
+                            <MessagesBuilderUi
+                                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">
+                <InputComponent channelId={channelId} placeholder="Message" />
+            </div>
+        </>
+    );
+});
+
+// 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';
+
+export default React.memo(InboxTemplate1);