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

package/lib/templates/InboxWithAi.tsx

@@ -0,0 +1,844 @@
+import React, {
+    ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useReducer,
+    useRef,
+    createContext,
+    useContext,
+    useState,
+} from 'react';
+import { Outlet, useNavigate, useParams, useLocation } from '@remix-run/react';
+import { Slot } from '@common-stack/components-pro';
+import { RightSidebarAi } from '../components/InboxMessage/RightSidebarAi';
+import { usePersistentModelConfig } from '../hooks/usePersistentModelConfig';
+import { ICreateChannelInput } from 'common';
+import { MessengerSlotFillNameEnum } from '../enums';
+
+// Context for sharing tab state between header and sidebar
+const TabContext = createContext<{
+    activeTab: string;
+    setActiveTab: (tab: string) => void;
+}>({
+    activeTab: 'preview',
+    setActiveTab: () => {},
+});
+
+export interface InboxProps {
+    channelFilters?: Record<string, unknown>;
+    channelRole?: string;
+    supportServices?: boolean;
+    pathPrefix?: string;
+    data?: any;
+    orgName?: string;
+    projectId?: string;
+    handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
+    isShowOnlyInbox?: boolean;
+    inboxTitle?: string;
+    showModeSelector?: boolean;
+    showContextTab?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
+    ContextTabComponent?: React.ComponentType<{ context: any; selectedPost?: any }>;
+    templates?: any[];
+    selectedTemplate?: any;
+    suggestedTemplate?: any;
+    onSelectTemplate?: (template: any) => void;
+    templateSelectedLabel?: string | null;
+    templateModalItems?: any[];
+    showTemplateModal?: boolean;
+    onOpenTemplateModal?: () => void;
+    onCloseTemplateModal?: () => void;
+    onSelectTemplateById?: (id: string) => void;
+    onClearTemplate?: () => void;
+    onAcceptSuggestedTemplate?: () => void;
+    isAnalyzingQuery?: boolean;
+    onQueryChange?: (query: string) => void;
+    leftItemsOverrides?: any;
+    rightItemsOverrides?: any;
+    inputToolBarProps?: any;
+}
+
+// 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;
+};
+
+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>
+));
+
+const DefaultContextTab = ({ context }: { context: any }) => {
+    const isString = typeof context === 'string';
+    const content = isString ? context : JSON.stringify(context ?? {}, null, 2);
+
+    return (
+        <div className="h-full w-full bg-gray-50 text-gray-800 overflow-auto">
+            <div className="p-4">
+                <h3 className="text-sm font-semibold text-gray-700 mb-2">Context</h3>
+                <pre className="text-sm whitespace-pre-wrap break-words font-mono bg-white border border-gray-200 rounded-md p-3 shadow-sm">
+                    {content || 'No context available.'}
+                </pre>
+            </div>
+        </div>
+    );
+};
+
+const InboxWithAi = (props: InboxProps) => {
+    const [activeTab, setActiveTab] = React.useState('preview');
+
+    return (
+        <TabContext.Provider value={{ activeTab, setActiveTab }}>
+            <InboxWithAiInternal {...props} />
+        </TabContext.Provider>
+    );
+};
+
+const InboxWithAiInternal = (props: InboxProps) => {
+    // const { channelFilters: channelFilterProp, channelRole, supportServices, data, orgName, pathPrefix = null } = props;
+    const { id: pathChannelId, postId: pathPostId } = useParams();
+    const location = useLocation();
+    const urlParams = location?.search ? new URLSearchParams(location.search) : null;
+    const { activeTab, setActiveTab } = useContext(TabContext);
+    const [messages, setMessages] = useState<any[]>([]);
+    const [selectedPost, setSelectedPost] = useState<any>(null);
+    const { modelConfig, getValidatedConfig, hasApiKey } = usePersistentModelConfig();
+    const [isLoading, setIsLoading] = useState(true);
+    const [isCreatingSandbox, setIsCreatingSandbox] = useState(false);
+    const [errorData, setError] = useState<string | null>(null);
+    const [sendMessageInput, handleSendMessage] = useState<ICreateChannelInput | null>(null);
+    const [isMinimized, setIsMinimized] = useState(false);
+    const showContextTab = props.showContextTab ?? true;
+    const [isShowOnlyInbox, setIsShowOnlyInbox] = useState<boolean>(
+        Boolean(props?.isShowOnlyInbox || modelConfig?.mode === 'plan'),
+    );
+
+    const contextData = useMemo(() => {
+        const cfg = selectedPost?.propsConfiguration;
+        return cfg?.contents?.fragment?.context || cfg?.content?.fragment?.context || cfg?.fragment?.context || null;
+    }, [selectedPost]);
+    // Keep isShowOnlyInbox in sync with props and modelConfig.mode
+    useEffect(() => {
+        setIsShowOnlyInbox(Boolean(props?.isShowOnlyInbox || modelConfig?.mode === 'plan'));
+    }, [props?.isShowOnlyInbox, modelConfig?.mode]);
+
+    // Extract channelId from query parameters (priority) or path parameters (fallback)
+    const channelId = urlParams?.get('id') || pathChannelId;
+
+    useEffect(() => {
+        // If context tab is disabled via props, fall back to preview
+        if (activeTab === 'context' && !showContextTab) {
+            setActiveTab('preview');
+        }
+    }, [activeTab, showContextTab, setActiveTab]);
+
+    const recreateSandboxForFragment = useCallback(
+        async (messageId: string) => {
+            if (!channelId || !messageId) {
+                console.error('No channel ID or message ID available for sandbox recreation');
+                return;
+            }
+
+            try {
+                setIsCreatingSandbox(true);
+                setError(null);
+
+                props?.handleRecreateSandbox?.(messageId);
+            } catch (err) {
+                console.error('Error recreating sandbox:', err);
+                setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
+                setIsCreatingSandbox(false);
+            }
+        },
+        [channelId, props?.handleRecreateSandbox],
+    );
+
+    const handleStop = useCallback(async () => {
+        try {
+            setIsCreatingSandbox(true);
+            setError(null);
+
+            props?.onStop?.();
+        } catch (err) {
+            console.error('Error stopping:', err);
+            setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
+            setIsCreatingSandbox(false);
+        }
+    }, [props?.onStop]);
+
+    // Handle refresh sandbox
+    const handleRefreshSandbox = useCallback(() => {
+        if (selectedPost) {
+            recreateSandboxForFragment(selectedPost.id);
+        }
+    }, [activeTab, selectedPost, recreateSandboxForFragment]);
+
+    // Handle preview sandbox
+    const handlePreviewSandbox = useCallback(() => {
+        if (selectedPost?.propsConfiguration?.contents?.fragment?.sandboxUrl) {
+            const sandboxUrl = selectedPost.propsConfiguration.contents.fragment.sandboxUrl;
+            console.log('Opening sandbox URL:', sandboxUrl);
+            window.open(sandboxUrl, '_blank', 'noopener,noreferrer');
+        } else {
+            console.warn('No sandbox URL available for selected post');
+        }
+    }, [selectedPost]);
+
+    // 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 detailSidebarOptions = useMemo(
+        () => ({
+            isMobileView,
+            isSmallTabletView,
+            isTabletView,
+            isDesktopView,
+            isLargeDesktopView,
+            isSmallScreen,
+        }),
+        [isMobileView, isSmallTabletView, isTabletView, isDesktopView, isLargeDesktopView, isSmallScreen],
+    );
+
+    return (
+        <>
+            {/* Main Container */}
+            <div className="flex flex-col h-screen overflow-hidden">
+                {/* Header with Design/Interact/Code tabs - now inside main container */}
+                {isShowOnlyInbox && (
+                    <div className="flex-shrink-0 bg-white justify-center items-center ">
+                        <div className="flex items-center justify-between px-4 pt-3">
+                            <div className="flex items-center">
+                                <h1 className="text-2xl font-bold">{props?.inboxTitle || 'Chat'}</h1>
+                            </div>
+                            {/* Settings gear button — available in plan mode */}
+                            <button
+                                onClick={() => setActiveTab(activeTab === 'settings' ? 'preview' : 'settings')}
+                                className={`p-2 rounded-lg transition-colors ${
+                                    activeTab === 'settings'
+                                        ? 'bg-blue-500 text-white'
+                                        : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
+                                }`}
+                                title="Chat Settings"
+                            >
+                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                                    />
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                )}
+                {channelId && !isShowOnlyInbox && (
+                    <div className="flex-shrink-0 bg-white ">
+                        <div className="flex items-center justify-between px-4 py-3">
+                            <div className="flex items-center">
+                                {/* Show tabs only on larger screens */}
+                                {!isSmallScreen && (
+                                    <div className="flex bg-gray-100 p-2" style={{ borderRadius: '10px' }}>
+                                        <button
+                                            onClick={() => setActiveTab('preview')}
+                                            className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
+                                                activeTab === 'preview'
+                                                    ? 'bg-blue-500 text-white shadow-sm'
+                                                    : 'text-gray-600 hover:text-gray-900'
+                                            }`}
+                                            style={{ borderRadius: '10px' }}
+                                        >
+                                            <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>Preview</span>
+                                        </button>
+                                        <button
+                                            onClick={() => setActiveTab('code')}
+                                            className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
+                                                activeTab === 'code'
+                                                    ? 'bg-blue-500 text-white shadow-sm'
+                                                    : 'text-gray-600 hover:text-gray-900'
+                                            }`}
+                                            style={{ borderRadius: '10px' }}
+                                        >
+                                            <svg
+                                                className="w-4 h-4"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                viewBox="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>
+                                        {showContextTab && (
+                                            <button
+                                                onClick={() => setActiveTab('context')}
+                                                className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
+                                                    activeTab === 'context'
+                                                        ? 'bg-blue-500 text-white shadow-sm'
+                                                        : 'text-gray-600 hover:text-gray-900'
+                                                }`}
+                                                style={{ borderRadius: '10px' }}
+                                            >
+                                                <svg
+                                                    className="w-4 h-4"
+                                                    fill="none"
+                                                    stroke="currentColor"
+                                                    viewBox="0 0 24 24"
+                                                >
+                                                    <path
+                                                        strokeLinecap="round"
+                                                        strokeLinejoin="round"
+                                                        strokeWidth={2}
+                                                        d="M12 8c-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3-1.343-3-3-3z"
+                                                    />
+                                                    <path
+                                                        strokeLinecap="round"
+                                                        strokeLinejoin="round"
+                                                        strokeWidth={2}
+                                                        d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z"
+                                                    />
+                                                </svg>
+                                                <span>Context</span>
+                                            </button>
+                                        )}
+                                        {/* Settings tab - always visible */}
+                                        <button
+                                            onClick={() => setActiveTab('settings')}
+                                            className={`flex items-center space-x-2 px-4 py-2 text-xs font-medium transition-all duration-200 ${
+                                                activeTab === 'settings'
+                                                    ? 'bg-blue-500 text-white shadow-sm'
+                                                    : 'text-gray-600 hover:text-gray-900'
+                                            }`}
+                                            style={{ borderRadius: '10px' }}
+                                        >
+                                            <svg
+                                                className="w-4 h-4"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                viewBox="0 0 24 24"
+                                            >
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                                                />
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                                                />
+                                            </svg>
+                                            <span>Settings</span>
+                                        </button>
+                                    </div>
+                                )}
+                            </div>
+
+                            {/* Action buttons on the right - hidden on mobile */}
+                            {isDesktopView && (
+                                <div className="flex items-center gap-2">
+                                    {/* Minimize/Maximize button */}
+                                    <button
+                                        onClick={() => setIsMinimized(!isMinimized)}
+                                        className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
+                                        title={isMinimized ? 'Maximize Content' : 'Minimize Content'}
+                                    >
+                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            {isMinimized ? (
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+                                                />
+                                            ) : (
+                                                <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M9 9V4.5M9 9H4.5M9 9L3.5 3.5M15 9V4.5M15 9h4.5M15 9l5.5-5.5M9 15v4.5M9 15H4.5M9 15l-5.5 5.5M15 15v4.5M15 15h4.5M15 15l5.5 5.5"
+                                                />
+                                            )}
+                                        </svg>
+                                    </button>
+
+                                    {/* Preview button */}
+                                    <button
+                                        onClick={() => handlePreviewSandbox()}
+                                        className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
+                                        title="Open URL"
+                                    >
+                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"
+                                                strokeWidth={2}
+                                                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+                                            />
+                                        </svg>
+                                    </button>
+
+                                    {/* Refresh button */}
+                                    <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>
+                    </div>
+                )}
+
+                {/* Content Grid - ContentComponent and RightSidebar */}
+                <div
+                    className="flex-1 grid overflow-hidden"
+                    style={{
+                        gridTemplateColumns: isDesktopView
+                            ? isShowOnlyInbox && activeTab !== 'settings'
+                                ? '1fr'
+                                : '35% 65%'
+                            : '1fr',
+                        gridTemplateRows: 'minmax(0, 1fr)',
+                        height: 'calc(100vh - 80px)', // Subtract header height
+                    }}
+                >
+                    {/* Main Content Area - 35% width on desktop */}
+                    <div
+                        className={`
+                        ${isMobileView && !channelId ? 'hidden' : 'flex'}
+                        ${isMinimized && isDesktopView ? 'hidden' : 'flex'}
+                        flex flex-col overflow-hidden transition-all duration-300 ease-in-out
+                    `}
+                        style={{ paddingTop: '15px' }}
+                    >
+                        {channelId ? (
+                            <ContentComponent
+                                channelId={channelId}
+                                {...props}
+                                messages={messages}
+                                setMessages={setMessages}
+                                selectedPost={selectedPost}
+                                setSelectedPost={setSelectedPost}
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                                sendMessageInput={sendMessageInput}
+                                isShowOnlyInbox={isShowOnlyInbox}
+                                showModeSelector={props?.showModeSelector}
+                                showStopButton={props?.showStopButton}
+                                onStop={handleStop}
+                                templates={props?.templates}
+                                selectedTemplate={props?.selectedTemplate}
+                                onSelectTemplate={props?.onSelectTemplate}
+                                leftItemsOverrides={props?.leftItemsOverrides}
+                                rightItemsOverrides={props?.rightItemsOverrides}
+                                projectId={props?.projectId}
+                                inputToolBarProps={props?.inputToolBarProps}
+                            />
+                        ) : (
+                            <EmptyState />
+                        )}
+                    </div>
+
+                    {/* Right Sidebar - 65% width on desktop only, also shown for settings tab (no channelId required for settings) */}
+                    {(activeTab === 'settings' || (channelId && !isShowOnlyInbox)) && isDesktopView && (
+                        <div
+                            className="overflow-hidden border flex-1 w-full min-h-0"
+                            style={{
+                                marginBottom: 10,
+                                marginRight: 10,
+                                borderRadius: 10,
+                                width: isMinimized ? windowWidth - 140 : `100%`,
+                            }}
+                        >
+                            <RightSidebarContent
+                                detailSidebarOptions={detailSidebarOptions}
+                                windowWidth={windowWidth}
+                                windowHeight={windowHeight}
+                                activeTab={activeTab}
+                                channelId={channelId}
+                                messages={messages}
+                                selectedPost={selectedPost}
+                                contextData={contextData}
+                                showContextTab={showContextTab}
+                                setIsLoading={setIsLoading}
+                                setIsCreatingSandbox={setIsCreatingSandbox}
+                                isCreatingSandbox={isCreatingSandbox}
+                                isLoading={isLoading}
+                                handleSendMessage={handleSendMessage}
+                                handleRecreateSandbox={props?.handleRecreateSandbox || null}
+                                isMinimized={isMinimized}
+                                ContextTabComponent={props?.ContextTabComponent ?? DefaultContextTab}
+                                showStopButton={props?.showStopButton}
+                                onStop={handleStop}
+                                {...props}
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+const ContentComponent = React.memo((props: any) => {
+    const {
+        channelId,
+        messages,
+        setMessages,
+        selectedPost,
+        setSelectedPost,
+        setIsLoading,
+        isLoading,
+        sendMessageInput,
+        isShowOnlyInbox,
+        showModeSelector,
+        showStopButton,
+        onStop,
+        templates,
+        selectedTemplate,
+        onSelectTemplate,
+        leftItemsOverrides,
+        rightItemsOverrides,
+        projectId,
+        inputToolBarProps,
+    } = props;
+
+    return (
+        <div className="flex overflow-hidden h-full">
+            {/* Main Chat Content */}
+            <div className="flex-1 flex flex-col min-w-0 overflow-hidden border-t border-gray-300">
+                {/* Content based on postId */}
+                <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+                    {channelId && (
+                        <>
+                            <MessagesComponent
+                                {...props}
+                                channelId={channelId}
+                                messages={messages}
+                                setMessages={setMessages}
+                                selectedPost={selectedPost}
+                                setSelectedPost={setSelectedPost}
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                                sendMessageInput={sendMessageInput}
+                                isShowOnlyInbox={isShowOnlyInbox}
+                                showModeSelector={showModeSelector}
+                                showStopButton={showStopButton}
+                                onStop={onStop}
+                                templates={templates}
+                                selectedTemplate={selectedTemplate}
+                                onSelectTemplate={onSelectTemplate}
+                                leftItemsOverrides={leftItemsOverrides}
+                                rightItemsOverrides={rightItemsOverrides}
+                                projectId={projectId}
+                                inputToolBarProps={inputToolBarProps}
+                            />
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+});
+
+const RightSidebarWrapper = React.memo(({ detailSidebarOptions }: any) => {
+    const { activeTab } = useContext(TabContext);
+    return (
+        <div className="h-full flex flex-col overflow-hidden bg-white">
+            {/* Content Area */}
+            <div className="flex-1 overflow-hidden">
+                {activeTab === 'preview' ? (
+                    <div className="h-full flex items-center justify-center bg-gray-50">
+                        <div className="text-center">
+                            {/* Preview 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">Preview Mode</h3>
+                                <p className="font-mono text-sm bg-blue-100 px-3 py-1 rounded">
+                                    Live preview and testing
+                                </p>
+                                <p>Preview and test 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 Preview</span>
+                                </button>
+                                <p className="text-sm text-gray-500 underline cursor-pointer hover:text-gray-700">
+                                    Learn about preview mode
+                                </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(
+    ({
+        detailSidebarOptions,
+        windowWidth,
+        windowHeight,
+        channelId,
+        setIsLoading,
+        isLoading,
+        handleSendMessage,
+        handleRecreateSandbox,
+        isMinimized,
+        isCreatingSandbox,
+        setIsCreatingSandbox,
+        ...props
+    }: any) => {
+        const { activeTab } = useContext(TabContext);
+
+        return (
+            <div
+                className="border-l border-gray-200 bg-white flex-shrink-0 overflow-hidden flex-1 w-full h-full min-h-0"
+                style={{
+                    width: isMinimized ? windowWidth : `100%`,
+                }}
+            >
+                {activeTab === 'settings' ? (
+                    <div className="h-full overflow-auto">
+                        <Slot
+                            name={MessengerSlotFillNameEnum.CHAT_SETTINGS}
+                            fillProps={{
+                                active: true,
+                                channelId,
+                                activeTab,
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <RightSidebarAi
+                        detailSidebarOptions={detailSidebarOptions}
+                        windowWidth={windowWidth}
+                        windowHeight={windowHeight}
+                        activeTab={activeTab}
+                        channelId={channelId}
+                        setIsLoading={setIsLoading}
+                        isLoading={isLoading}
+                        handleSendMessage={handleSendMessage}
+                        isCreatingSandbox={isCreatingSandbox}
+                        setIsCreatingSandbox={setIsCreatingSandbox}
+                        isMinimized={isMinimized}
+                        handleRecreateSandbox={handleRecreateSandbox}
+                        {...props}
+                    />
+                )}
+            </div>
+        );
+    },
+);
+
+const MessagesComponent = React.memo((props: any) => {
+    return <Outlet context={{ ...props, app: 'app' }} />;
+});
+
+// Display names for debugging
+InboxWithAi.displayName = 'Inbox';
+InboxWithAiInternal.displayName = 'InboxWithAiInternal';
+ContentComponent.displayName = 'ContentComponent';
+MessagesComponent.displayName = 'MessagesComponent';
+RightSidebarWrapper.displayName = 'RightSidebarWrapper';
+RightSidebarContent.displayName = 'RightSidebarContent';
+
+export default React.memo(InboxWithAi);