@messenger-box/tailwind-ui-inbox 10.0.3-alpha.144 → 10.0.3-alpha.158

package/src/components/filler-components/RightSiderBar.tsx

@@ -1,568 +1,572 @@
 import * as React from 'react';
-import { HybridLiveEditor, HybridLiveEditorRef } from '../live-code-editor/hybrid-live-editor';
-import { useOnChatMessageAddedSubscription } from 'common/graphql';
-import { AiAgentMessageRole, ICreateChannelInput, PostTypeEnum, RoomType } from 'common';
-import { Sandbox } from '@e2b/code-interpreter';
-import { useMachine } from '@xstate/react';
-import { fromPromise } from 'xstate';
-import { rightSidebarMachine } from '../../xstate';
-
-type RightSidebarProps = {
-    channelId: string;
-    detailSidebarOptions: {
-        isMobileView: boolean;
-        isSmallTabletView: boolean;
-        isTabletView: boolean;
-        isDesktopView: boolean;
-        isLargeDesktopView: boolean;
-        isSmallScreen: boolean;
-        [key: string]: any;
-    };
-    windowWidth: number;
-    windowHeight: number;
-    activeTab?: string;
-    selectedPost?: any;
-    messages?: any[];
-    setIsLoading?: (isLoading: boolean) => void;
-    handleSendMessage?: (createChannelInput: ICreateChannelInput) => void;
-    handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
-    isMinimized?: boolean;
-    isLoading?: boolean;
-    isCreatingSandbox?: boolean;
-    setIsCreatingSandbox?: (isCreatingSandbox: boolean) => void;
-    [key: string]: any;
-};
-
-export const RightSidebarFillComponent = (props: RightSidebarProps) => {
-    const {
-        channelId,
-        detailSidebarOptions,
-        windowWidth,
-        windowHeight,
-        activeTab,
-        messages,
-        selectedPost,
-        setIsLoading,
-        isLoading,
-        handleSendMessage,
-        handleRecreateSandbox,
-        isMinimized,
-        isCreatingSandbox,
-        setIsCreatingSandbox,
-    } = props;
-    const hybridLiveEditorRef = React.useRef<HybridLiveEditorRef>(null);
-    const previewIframeRef = React.useRef<HTMLIFrameElement>(null);
-    const previewIframeContainerRef = React.useRef<HTMLIFrameElement>(null);
-    // State for subscription data
-    const [subscriptionData, setSubscriptionData] = React.useState<any>(null);
-    // XState machine for sidebar state
-    const [state, send] = useMachine(
-        rightSidebarMachine.provide({
-            actors: {
-                recreateSandbox: fromPromise(async ({ input }) => {
-                    const { id } = input as { id: string };
-                    if (handleRecreateSandbox) {
-                        await handleRecreateSandbox(id);
-                    }
-                    return { success: true } as const;
-                }),
-            },
-        }),
-        {
-            input: {
-                channelId: channelId || '',
-                isMinimized: !!isMinimized,
-                windowWidth,
-                windowHeight,
-                isLoading: !!isLoading,
-                activeFragment: null,
-                currentFiles: {},
-                canvasLayers: [],
-                previewStatus: null,
-            },
-        },
-    );
-    const activeFragment = state.context.activeFragment;
-    const currentFiles = state.context.currentFiles;
-    const canvasLayers = state.context.canvasLayers as any[];
-    const previewStatus = state.context.previewStatus as { code?: number; message?: string; status?: string } | null;
-    // const [isLoading, setIsLoading] = React.useState(false);
-    const { data: chatMessageAddedData } = useOnChatMessageAddedSubscription({
-        variables: { channelId: channelId?.toString() || '' },
-        skip: !channelId,
-    });
-
-    // Component mount tracking
-    const componentId = React.useMemo(
-        () => `right-sidebar-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-        [],
-    );
-
-    const handleCopyToClipboard = React.useCallback((text: string) => {
-        navigator.clipboard.writeText(text);
-    }, []);
-
-    const handleFileUpdate = React.useCallback(async (filePath: string, content: string) => {
-        // TODO: Implement file update logic for the channel
-        console.log('File update:', { filePath, content });
-    }, []);
-
-    // Create complete file context by merging currentFiles with activeFragment files
-    const completeFileContext = React.useMemo(() => {
-        if (!activeFragment?.files) {
-            console.log('📂 Using currentFiles as complete context (no activeFragment.files)');
-            return currentFiles;
-        }
-
-        // Merge currentFiles with activeFragment files, giving priority to activeFragment files
-        const merged = { ...currentFiles };
-
-        // Override with activeFragment files (these are the most recent changes)
-        Object.entries(activeFragment.files).forEach(([path, content]) => {
-            merged[path] = content as string;
-        });
-
-        // Validate file context integrity
-        const hasPackageJson = 'package.json' in merged;
-        const hasMainFiles = Object.keys(merged).some(
-            (path) =>
-                path.includes('index.') || path.includes('main.') || path.includes('App.') || path.includes('src/'),
-        );
-
-        console.log('📂 Complete file context created:', {
-            currentFilesCount: Object.keys(currentFiles).length,
-            activeFragmentFilesCount: Object.keys(activeFragment.files).length,
-            mergedFilesCount: Object.keys(merged).length,
-            hasPackageJson,
-            hasMainFiles,
-            activeFragmentFiles: Object.keys(activeFragment.files),
-            allFiles: Object.keys(merged),
-            validation: {
-                isComplete: hasPackageJson && hasMainFiles,
-                missingPackageJson: !hasPackageJson,
-                missingMainFiles: !hasMainFiles,
-            },
-        });
-
-        if (!hasPackageJson) {
-            console.warn('⚠️ File context missing package.json - this may cause issues in sandbox');
-        }
-        if (!hasMainFiles) {
-            console.warn('⚠️ File context missing main application files - this may cause issues in sandbox');
-        }
-
-        return merged;
-    }, [currentFiles, activeFragment?.files]);
-
-    // Determine if we should show preview or editor based on activeTab
-    const isPreviewMode = activeTab === 'preview';
-
-    // Turn on loader when new data is about to be processed
-    React.useEffect(() => {
-        if (chatMessageAddedData?.chatMessageAdded || selectedPost) {
-            // sync external loader
-            // setIsLoading?.(false);
-            // send({ type: 'SET_LOADING', isLoading: false });
-        }
-    }, [chatMessageAddedData, selectedPost, send, setIsLoading]);
-
-    // Handle subscription data updates - prefer response update structure like use-ai-messages.ts
-    React.useEffect(() => {
-        if (chatMessageAddedData?.chatMessageAdded || selectedPost) {
-            // Prefer explicitly selected post to ensure UI updates when it changes
-            const message = selectedPost || chatMessageAddedData?.chatMessageAdded;
-
-            // Extract strictly from message.propsConfiguration (fragment only)
-            let extracted: any = null;
-            let fragmentSource:
-                | 'propsConfiguration.contents.props.fragment'
-                | 'propsConfiguration.contents.fragment'
-                | 'propsConfiguration.fragment'
-                | null = null;
-
-            try {
-                // 1) Preferred: contents.props.fragment
-                const cfg: any = message.propsConfiguration || {};
-                const contents: any = cfg.contents || cfg.content || {};
-
-                if (contents?.props?.fragment) {
-                    const frag = contents.props.fragment;
-                    extracted = {
-                        sandboxUrl: frag.sandboxUrl || frag.url,
-                        sandboxId: frag.sandboxId,
-                        projectId: cfg.projectId || contents.projectId || frag.projectId,
-                        modelConfig: cfg.modelConfig || contents.modelConfig || frag.modelConfig,
-                        files: frag.files || {},
-                        canvasLayers: contents.canvasLayers || cfg.canvasLayers || frag.canvasLayers,
-                        summary: contents.summary || cfg.summary || frag.summary,
-                        title: frag.title || contents.title || cfg.title,
-                        isError: frag.isError,
-                    };
-                    fragmentSource = 'propsConfiguration.contents.props.fragment';
-                }
-
-                // 2) Fallback: contents.fragment
-                if (!extracted && contents?.fragment) {
-                    const frag = contents.fragment;
-                    extracted = {
-                        sandboxUrl: frag.sandboxUrl || frag.url,
-                        sandboxId: frag.sandboxId,
-                        projectId: cfg.projectId || contents.projectId || frag.projectId,
-                        modelConfig: cfg.modelConfig || contents.modelConfig || frag.modelConfig,
-                        files: frag.files || {},
-                        canvasLayers: contents.canvasLayers || cfg.canvasLayers || frag.canvasLayers,
-                        summary: contents.summary || cfg.summary || frag.summary,
-                        title: frag.title || contents.title || cfg.title,
-                        isError: frag.isError,
-                    };
-                    fragmentSource = 'propsConfiguration.contents.fragment';
-                }
-
-                // 3) Fallback: propsConfiguration.fragment (top-level)
-                if (!extracted && cfg?.fragment) {
-                    const frag = cfg.fragment;
-                    extracted = {
-                        sandboxUrl: frag.sandboxUrl || frag.url,
-                        sandboxId: frag.sandboxId,
-                        projectId: cfg.projectId || frag.projectId,
-                        modelConfig: cfg.modelConfig || frag.modelConfig,
-                        files: frag.files || {},
-                        canvasLayers: cfg.canvasLayers || frag.canvasLayers,
-                        summary: cfg.summary || frag.summary,
-                        title: frag.title || cfg.title,
-                        isError: frag.isError,
-                    };
-                    fragmentSource = 'propsConfiguration.fragment';
-                }
-            } catch (error) {
-                console.error('Error extracting response from message:', error);
-            }
-
-            // console.log('Extracted response fragment source:', fragmentSource);
-            // console.log('Extracted response:', extracted);
-
-            if (extracted && (extracted.sandboxUrl || extracted.url)) {
-                console.log('✅ Processing response update:', extracted);
-
-                // Update subscription data snapshot
-                setSubscriptionData(extracted);
-
-                // Build active fragment
-                const fragment = {
-                    id: message.id,
-                    sandboxUrl: extracted.sandboxUrl || extracted.url,
-                    sandboxId: extracted.sandboxId,
-                    title: extracted.title || 'Generated Code',
-                    files: extracted.files || {},
-                    projectId: extracted.projectId,
-                    modelConfig: extracted.modelConfig,
-                    canvasLayers: extracted.canvasLayers,
-                    summary: extracted.summary,
-                    isError: extracted.isError,
-                };
-
-                // If canvasLayers missing but present in summary, attempt to extract like use-ai-messages
-                if ((!fragment.canvasLayers || !Array.isArray(fragment.canvasLayers)) && fragment.summary) {
-                    try {
-                        const match = (fragment.summary as string).match(/<canvas_layers>([\s\S]*?)<\/canvas_layers>/);
-                        if (match) {
-                            const parsed = JSON.parse(match[1]);
-                            if (Array.isArray(parsed)) {
-                                fragment.canvasLayers = parsed;
-                            }
-                        }
-                    } catch (e) {
-                        console.warn('Failed to parse canvas layers from summary:', e);
-                    }
-                }
-
-                console.log('✅ Setting active fragment via XState:', fragment);
-                send({ type: 'SET_FRAGMENT', fragment });
-                // setIsLoading?.(false);
-                //send({ type: 'SET_LOADING', isLoading: false });
-            } else {
-                console.log('❌ No valid response found in message');
-                //  setIsLoading?.(false);
-                //  send({ type: 'SET_LOADING', isLoading: false });
-            }
-        }
-    }, [chatMessageAddedData, selectedPost, send, setIsLoading]);
-
-    // When switching tabs or when sandbox changes, show loader until ready
-    // React.useEffect(() => {
-    //     if (isPreviewMode) {
-    //         if (activeFragment?.sandboxUrl) {
-    //            // setIsLoading(true);
-    //         }
-    //     } else {
-    //         // In code view, briefly show loader while editor reacts to new files
-    //        // setIsLoading(true);
-    //         const timeoutId = setTimeout(() => setIsLoading(false), 400);
-    //         return () => clearTimeout(timeoutId);
-    //     }
-    // }, [isPreviewMode, activeFragment?.sandboxUrl, completeFileContext]);
-
-    // Cleanup iframe resources on unmount to prevent renderer leaks in Chrome
-    React.useEffect(() => {
-        return () => {
-            try {
-                if (previewIframeRef.current) {
-                    previewIframeRef.current.src = 'about:blank';
-                }
-            } catch (e) {
-                // no-op
-            }
-        };
-    }, []);
-
-    React.useEffect(() => {
-        const handleVisualEditorMessage = (event: MessageEvent) => {
-            // Handle AI changes
-            if (event.data.type === 'VISUAL_EDITOR_CHANGES') {
-                console.log('visual_editor_changes....', event.data.message);
-
-                if (handleSendMessage && event.data.message) {
-                    // Call aiHandleSend directly - this is the handleSend function from AIAgent
-                    handleSendMessage({
-                        channelId,
-                        type: RoomType.Aiassistant,
-                        postData: {
-                            // postId: postId,
-                            type: PostTypeEnum.Aiassistant,
-                            content: event.data.message,
-                        },
-                    });
-                } else {
-                    console.warn('⚠️ handleSendMessage not available or no message provided');
-                }
-            }
-        };
-
-        window.addEventListener('message', handleVisualEditorMessage);
-        return () => window.removeEventListener('message', handleVisualEditorMessage);
-    }, [handleSendMessage, channelId]);
-
-    const recreateSandboxHandler = React.useCallback(
-        async (id: string) => {
-            if (id) {
-                console.log('recreate sandbox id....', id);
-                setIsLoading?.(true);
-                send({ type: 'SET_LOADING', isLoading: true });
-                try {
-                    send({ type: 'RECREATE_SANDBOX', id });
-                } catch (e: any) {
-                    console.error('Error recreating sandbox:', e);
-                    setIsLoading?.(false);
-                    send({ type: 'SET_LOADING', isLoading: false });
-                }
-            }
-        },
-        [send, setIsLoading],
-    );
-
-    // Track if we've already attempted recreate for a given sandbox URL
-    const recreateAttemptedByUrlRef = React.useRef<Record<string, boolean>>({});
-
-    // Probe sandbox URL via XState actor
-    React.useEffect(() => {
-        const url = activeFragment?.sandboxUrl;
-        if (url) {
-            send({ type: 'PROBE', url, fragmentId: activeFragment?.id });
-        }
-    }, [activeFragment?.sandboxUrl, activeFragment?.id, send]);
-
-    // Prefer using external loading when provided; otherwise fall back to machine state
-    const derivedIsLoading = (typeof isLoading === 'boolean' ? isLoading : state.context.isLoading) as boolean;
-
-    // Sync external loading prop with machine's loading state (no-op if setter not provided)
-    // React.useEffect(() => {
-    //     console.log(
-    //         'isLoading....',
-    //         isLoading,
-    //         ' state.context.isLoading',
-    //         state.context.isLoading,
-    //         ' previewStatus',
-    //         previewStatus,
-    //     );
-    //     if (!state.context.isLoading) {
-    //         setIsLoading?.(!!state.context.isLoading);
-    //     }
-    // }, [state.context.isLoading, setIsLoading, isLoading]);
-
-    return (
-        <div ref={previewIframeContainerRef} className="right-sidebar-content h-full flex flex-col">
-            <div className="flex-1 overflow-hidden" style={{ minHeight: windowHeight - 140 }}>
-                {isPreviewMode ? (
-                    // Preview Mode - Show sandbox iframe or fallback
-                    (() => {
-                        if (activeFragment?.sandboxUrl) {
-                            return (
-                                <div
-                                    className="w-full h-full relative"
-                                    style={{
-                                        width: isMinimized ? windowWidth * 0.8 + 'px' : '100%',
-                                        height: windowHeight - 140,
-                                        backgroundColor: '#f0f0f0',
-                                    }}
-                                >
-                                    {!previewStatus ? (
-                                        <iframe
-                                            key={activeFragment.sandboxUrl}
-                                            ref={previewIframeRef}
-                                            src={activeFragment.sandboxUrl}
-                                            className="w-full w-fit h-full h-fit  border border-gray-200 rounded-md bg-white shadow-sm"
-                                            title="Live Preview"
-                                            sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"
-                                            loading="lazy"
-                                            onLoad={() => {
-                                                console.log('🎯 Iframe loaded successfully');
-                                                setIsLoading?.(false);
-                                                setIsCreatingSandbox?.(false);
-                                                send({ type: 'SET_LOADING', isLoading: false });
-                                            }}
-                                            onError={(e) => {
-                                                console.error('❌ Iframe error:', e);
-                                                setIsLoading?.(false);
-                                                send({ type: 'SET_LOADING', isLoading: false });
-                                            }}
-                                            style={
-                                                {
-                                                    // maxHeight: windowHeight - 140,
-                                                    // width: isMinimized ? windowWidth * 0.82 + 'px' : '100%',
-                                                    //padding: isMinimized ? '10px' : '0px',
-                                                }
-                                            }
-                                        />
-                                    ) : (
-                                        <div className="absolute inset-0 bg-white/60 flex items-center justify-center z-20">
-                                            {handleRecreateSandbox && (
-                                                <>
-                                                    {derivedIsLoading || isCreatingSandbox ? (
-                                                        <div className="flex flex-col items-center justify-center gap-2">
-                                                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
-                                                            <p className="text-xs text-blue-700">Recreating...</p>
-                                                        </div>
-                                                    ) : (
-                                                        <div className="flex flex-col items-center justify-center gap-2">
-                                                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
-                                                            <p className="text-sm text-muted-foreground">
-                                                                {isLoading ? 'Recreating...' : 'Refresh'}{' '}
-                                                                {/* Sandbox is not available. */}
-                                                            </p>
-                                                            {/* <button
-                                                                type="button"
-                                                                className="themed-button focus-themed px-3 py-1.5 text-xs"
-                                                                onClick={() =>
-                                                                    recreateSandboxHandler(activeFragment?.id)
-                                                                }
-                                                            >
-                                                                Recreate
-                                                            </button> */}
-                                                        </div>
-                                                    )}
-                                                </>
-                                            )}
-                                        </div>
-                                    )}
-                                    <div className="absolute top-2 right-2 bg-green-100 text-green-800 px-2 py-1 rounded text-xs z-10">
-                                        Live Preview
-                                    </div>
-                                    {derivedIsLoading ||
-                                        (isCreatingSandbox && (
-                                            <>
-                                                <div className="absolute inset-0 bg-white/60 flex items-center justify-center z-20">
-                                                    <div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"></div>
-                                                </div>
-                                                <div className="absolute top-2 left-2 bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs z-30">
-                                                    Loading...
-                                                </div>
-                                            </>
-                                        ))}
-                                </div>
-                            );
-                        } else {
-                            return (
-                                <div
-                                    className="h-full flex items-center justify-center text-gray-500 border border-gray-200 rounded-md bg-gray-50 "
-                                    style={{ width: '100%', height: '80vh' }}
-                                >
-                                    <div className="text-center space-y-3">
-                                        <p className="font-medium">No preview available</p>
-                                        <div className="flex flex-col items-center justify-center space-y-3">
-                                            {derivedIsLoading || isCreatingSandbox ? (
-                                                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
-                                            ) : (
-                                                <div className="w-8 h-8 bg-gray-300 rounded-full"></div>
-                                            )}
-                                            <p className="text-sm text-gray-400">
-                                                {derivedIsLoading || isCreatingSandbox
-                                                    ? 'Generating code...'
-                                                    : 'Waiting for code generation...'}
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            );
-                        }
-                    })()
-                ) : (
-                    // Code Editor Mode - Show files from subscription or fallback
-                    <div
-                        className="h-full w-full relative"
-                        style={{
-                            minHeight: windowHeight - 140,
-                            height: windowHeight - 140,
-                            width: isMinimized ? windowWidth * 0.9 + 'px' : '100%',
-                        }}
-                    >
-                        <HybridLiveEditor
-                            ref={hybridLiveEditorRef}
-                            projectId={activeFragment?.projectId || channelId}
-                            fragmentId={activeFragment?.id || activeTab || 'default'}
-                            files={Object.keys(completeFileContext).length > 0 ? completeFileContext : {}}
-                            sandboxUrl={activeFragment?.sandboxUrl}
-                            onCopyToClipboard={handleCopyToClipboard}
-                            onFileUpdate={handleFileUpdate}
-                            readOnly={!activeFragment?.id}
-                            autoSave={false}
-                            debounceMs={500}
-                            //className={`h-full w-[100%] h-[75vh] border-b border-gray-200 rounded-md bg-white shadow-sm overflow-hidden`}
-                            className="h-full w-full"
-                        />
-                        {derivedIsLoading && (
-                            <>
-                                <div className="absolute inset-0 bg-white/60 flex items-center justify-center z-20">
-                                    <div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"></div>
-                                </div>
-                                <div className="absolute top-4 right-4 bg-blue-100 border border-blue-400 text-blue-700 px-3 py-2 rounded text-sm z-30">
-                                    <div className="flex items-center gap-2">
-                                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"></div>
-                                        Processing...
-                                    </div>
-                                </div>
-                            </>
-                        )}
-                    </div>
-                )}
-            </div>
-
-            {/* <div className="p-2 border-t bg-gray-50 text-xs text-gray-500">
-                <div className="flex justify-between">
-                    <span>Mobile: {detailSidebarOptions.isMobileView ? 'Yes' : 'No'}</span>
-                    <span>Desktop: {detailSidebarOptions.isDesktopView ? 'Yes' : 'No'}</span>
-                    {activeFragment && (
-                        <span className="text-green-600">{activeFragment.isError ? 'Error' : 'Ready'}</span>
-                    )}
-                </div>
-                {activeFragment && (
-                    <div className="mt-1 text-xs">
-                        <span className="text-gray-400">Files: {Object.keys(completeFileContext).length}</span>
-                        {canvasLayers.length > 0 && (
-                            <span className="ml-2 text-gray-400">Layers: {canvasLayers.length}</span>
-                        )}
-                    </div>
-                )}
-            </div> */}
-        </div>
-    );
+// import { HybridLiveEditor, HybridLiveEditorRef } from '../live-code-editor/hybrid-live-editor';
+// import { useOnChatMessageAddedSubscription } from 'common/graphql';
+// import { AiAgentMessageRole, ICreateChannelInput, PostTypeEnum, RoomType } from 'common';
+// import { Sandbox } from '@e2b/code-interpreter';
+// import { useMachine } from '@xstate/react';
+// import { fromPromise } from 'xstate';
+// import { rightSidebarMachine } from '../../xstate';
+
+// type RightSidebarProps = {
+//     channelId: string;
+//     detailSidebarOptions: {
+//         isMobileView: boolean;
+//         isSmallTabletView: boolean;
+//         isTabletView: boolean;
+//         isDesktopView: boolean;
+//         isLargeDesktopView: boolean;
+//         isSmallScreen: boolean;
+//         [key: string]: any;
+//     };
+//     windowWidth: number;
+//     windowHeight: number;
+//     activeTab?: string;
+//     selectedPost?: any;
+//     messages?: any[];
+//     setIsLoading?: (isLoading: boolean) => void;
+//     handleSendMessage?: (createChannelInput: ICreateChannelInput) => void;
+//     handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
+//     isMinimized?: boolean;
+//     isLoading?: boolean;
+//     isCreatingSandbox?: boolean;
+//     setIsCreatingSandbox?: (isCreatingSandbox: boolean) => void;
+//     [key: string]: any;
+// };
+
+// export const RightSidebarFillComponent = (props: RightSidebarProps) => {
+//     const {
+//         channelId,
+//         detailSidebarOptions,
+//         windowWidth,
+//         windowHeight,
+//         activeTab,
+//         messages,
+//         selectedPost,
+//         setIsLoading,
+//         isLoading,
+//         handleSendMessage,
+//         handleRecreateSandbox,
+//         isMinimized,
+//         isCreatingSandbox,
+//         setIsCreatingSandbox,
+//     } = props;
+//     const hybridLiveEditorRef = React.useRef<HybridLiveEditorRef>(null);
+//     const previewIframeRef = React.useRef<HTMLIFrameElement>(null);
+//     const previewIframeContainerRef = React.useRef<HTMLIFrameElement>(null);
+//     // State for subscription data
+//     const [subscriptionData, setSubscriptionData] = React.useState<any>(null);
+//     // XState machine for sidebar state
+//     const [state, send] = useMachine(
+//         rightSidebarMachine.provide({
+//             actors: {
+//                 recreateSandbox: fromPromise(async ({ input }) => {
+//                     const { id } = input as { id: string };
+//                     if (handleRecreateSandbox) {
+//                         await handleRecreateSandbox(id);
+//                     }
+//                     return { success: true } as const;
+//                 }),
+//             },
+//         }),
+//         {
+//             input: {
+//                 channelId: channelId || '',
+//                 isMinimized: !!isMinimized,
+//                 windowWidth,
+//                 windowHeight,
+//                 isLoading: !!isLoading,
+//                 activeFragment: null,
+//                 currentFiles: {},
+//                 canvasLayers: [],
+//                 previewStatus: null,
+//             },
+//         },
+//     );
+//     const activeFragment = state.context.activeFragment;
+//     const currentFiles = state.context.currentFiles;
+//     const canvasLayers = state.context.canvasLayers as any[];
+//     const previewStatus = state.context.previewStatus as { code?: number; message?: string; status?: string } | null;
+//     // const [isLoading, setIsLoading] = React.useState(false);
+//     const { data: chatMessageAddedData } = useOnChatMessageAddedSubscription({
+//         variables: { channelId: channelId?.toString() || '' },
+//         skip: !channelId,
+//     });
+
+//     // Component mount tracking
+//     const componentId = React.useMemo(
+//         () => `right-sidebar-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+//         [],
+//     );
+
+//     const handleCopyToClipboard = React.useCallback((text: string) => {
+//         navigator.clipboard.writeText(text);
+//     }, []);
+
+//     const handleFileUpdate = React.useCallback(async (filePath: string, content: string) => {
+//         // TODO: Implement file update logic for the channel
+//         console.log('File update:', { filePath, content });
+//     }, []);
+
+//     // Create complete file context by merging currentFiles with activeFragment files
+//     const completeFileContext = React.useMemo(() => {
+//         if (!activeFragment?.files) {
+//             console.log('📂 Using currentFiles as complete context (no activeFragment.files)');
+//             return currentFiles;
+//         }
+
+//         // Merge currentFiles with activeFragment files, giving priority to activeFragment files
+//         const merged = { ...currentFiles };
+
+//         // Override with activeFragment files (these are the most recent changes)
+//         Object.entries(activeFragment.files).forEach(([path, content]) => {
+//             merged[path] = content as string;
+//         });
+
+//         // Validate file context integrity
+//         const hasPackageJson = 'package.json' in merged;
+//         const hasMainFiles = Object.keys(merged).some(
+//             (path) =>
+//                 path.includes('index.') || path.includes('main.') || path.includes('App.') || path.includes('src/'),
+//         );
+
+//         console.log('📂 Complete file context created:', {
+//             currentFilesCount: Object.keys(currentFiles).length,
+//             activeFragmentFilesCount: Object.keys(activeFragment.files).length,
+//             mergedFilesCount: Object.keys(merged).length,
+//             hasPackageJson,
+//             hasMainFiles,
+//             activeFragmentFiles: Object.keys(activeFragment.files),
+//             allFiles: Object.keys(merged),
+//             validation: {
+//                 isComplete: hasPackageJson && hasMainFiles,
+//                 missingPackageJson: !hasPackageJson,
+//                 missingMainFiles: !hasMainFiles,
+//             },
+//         });
+
+//         if (!hasPackageJson) {
+//             console.warn('⚠️ File context missing package.json - this may cause issues in sandbox');
+//         }
+//         if (!hasMainFiles) {
+//             console.warn('⚠️ File context missing main application files - this may cause issues in sandbox');
+//         }
+
+//         return merged;
+//     }, [currentFiles, activeFragment?.files]);
+
+//     // Determine if we should show preview or editor based on activeTab
+//     const isPreviewMode = activeTab === 'preview';
+
+//     // Turn on loader when new data is about to be processed
+//     React.useEffect(() => {
+//         if (chatMessageAddedData?.chatMessageAdded || selectedPost) {
+//             // sync external loader
+//             // setIsLoading?.(false);
+//             // send({ type: 'SET_LOADING', isLoading: false });
+//         }
+//     }, [chatMessageAddedData, selectedPost, send, setIsLoading]);
+
+//     // Handle subscription data updates - prefer response update structure like use-ai-messages.ts
+//     React.useEffect(() => {
+//         if (chatMessageAddedData?.chatMessageAdded || selectedPost) {
+//             // Prefer explicitly selected post to ensure UI updates when it changes
+//             const message = selectedPost || chatMessageAddedData?.chatMessageAdded;
+
+//             // Extract strictly from message.propsConfiguration (fragment only)
+//             let extracted: any = null;
+//             let fragmentSource:
+//                 | 'propsConfiguration.contents.props.fragment'
+//                 | 'propsConfiguration.contents.fragment'
+//                 | 'propsConfiguration.fragment'
+//                 | null = null;
+
+//             try {
+//                 // 1) Preferred: contents.props.fragment
+//                 const cfg: any = message.propsConfiguration || {};
+//                 const contents: any = cfg.contents || cfg.content || {};
+
+//                 if (contents?.props?.fragment) {
+//                     const frag = contents.props.fragment;
+//                     extracted = {
+//                         sandboxUrl: frag.sandboxUrl || frag.url,
+//                         sandboxId: frag.sandboxId,
+//                         projectId: cfg.projectId || contents.projectId || frag.projectId,
+//                         modelConfig: cfg.modelConfig || contents.modelConfig || frag.modelConfig,
+//                         files: frag.files || {},
+//                         canvasLayers: contents.canvasLayers || cfg.canvasLayers || frag.canvasLayers,
+//                         summary: contents.summary || cfg.summary || frag.summary,
+//                         title: frag.title || contents.title || cfg.title,
+//                         isError: frag.isError,
+//                     };
+//                     fragmentSource = 'propsConfiguration.contents.props.fragment';
+//                 }
+
+//                 // 2) Fallback: contents.fragment
+//                 if (!extracted && contents?.fragment) {
+//                     const frag = contents.fragment;
+//                     extracted = {
+//                         sandboxUrl: frag.sandboxUrl || frag.url,
+//                         sandboxId: frag.sandboxId,
+//                         projectId: cfg.projectId || contents.projectId || frag.projectId,
+//                         modelConfig: cfg.modelConfig || contents.modelConfig || frag.modelConfig,
+//                         files: frag.files || {},
+//                         canvasLayers: contents.canvasLayers || cfg.canvasLayers || frag.canvasLayers,
+//                         summary: contents.summary || cfg.summary || frag.summary,
+//                         title: frag.title || contents.title || cfg.title,
+//                         isError: frag.isError,
+//                     };
+//                     fragmentSource = 'propsConfiguration.contents.fragment';
+//                 }
+
+//                 // 3) Fallback: propsConfiguration.fragment (top-level)
+//                 if (!extracted && cfg?.fragment) {
+//                     const frag = cfg.fragment;
+//                     extracted = {
+//                         sandboxUrl: frag.sandboxUrl || frag.url,
+//                         sandboxId: frag.sandboxId,
+//                         projectId: cfg.projectId || frag.projectId,
+//                         modelConfig: cfg.modelConfig || frag.modelConfig,
+//                         files: frag.files || {},
+//                         canvasLayers: cfg.canvasLayers || frag.canvasLayers,
+//                         summary: cfg.summary || frag.summary,
+//                         title: frag.title || cfg.title,
+//                         isError: frag.isError,
+//                     };
+//                     fragmentSource = 'propsConfiguration.fragment';
+//                 }
+//             } catch (error) {
+//                 console.error('Error extracting response from message:', error);
+//             }
+
+//             // console.log('Extracted response fragment source:', fragmentSource);
+//             // console.log('Extracted response:', extracted);
+
+//             if (extracted && (extracted.sandboxUrl || extracted.url)) {
+//                 console.log('✅ Processing response update:', extracted);
+
+//                 // Update subscription data snapshot
+//                 setSubscriptionData(extracted);
+
+//                 // Build active fragment
+//                 const fragment = {
+//                     id: message.id,
+//                     sandboxUrl: extracted.sandboxUrl || extracted.url,
+//                     sandboxId: extracted.sandboxId,
+//                     title: extracted.title || 'Generated Code',
+//                     files: extracted.files || {},
+//                     projectId: extracted.projectId,
+//                     modelConfig: extracted.modelConfig,
+//                     canvasLayers: extracted.canvasLayers,
+//                     summary: extracted.summary,
+//                     isError: extracted.isError,
+//                 };
+
+//                 // If canvasLayers missing but present in summary, attempt to extract like use-ai-messages
+//                 if ((!fragment.canvasLayers || !Array.isArray(fragment.canvasLayers)) && fragment.summary) {
+//                     try {
+//                         const match = (fragment.summary as string).match(/<canvas_layers>([\s\S]*?)<\/canvas_layers>/);
+//                         if (match) {
+//                             const parsed = JSON.parse(match[1]);
+//                             if (Array.isArray(parsed)) {
+//                                 fragment.canvasLayers = parsed;
+//                             }
+//                         }
+//                     } catch (e) {
+//                         console.warn('Failed to parse canvas layers from summary:', e);
+//                     }
+//                 }
+
+//                 console.log('✅ Setting active fragment via XState:', fragment);
+//                 send({ type: 'SET_FRAGMENT', fragment });
+//                 // setIsLoading?.(false);
+//                 //send({ type: 'SET_LOADING', isLoading: false });
+//             } else {
+//                 console.log('❌ No valid response found in message');
+//                 //  setIsLoading?.(false);
+//                 //  send({ type: 'SET_LOADING', isLoading: false });
+//             }
+//         }
+//     }, [chatMessageAddedData, selectedPost, send, setIsLoading]);
+
+//     // When switching tabs or when sandbox changes, show loader until ready
+//     // React.useEffect(() => {
+//     //     if (isPreviewMode) {
+//     //         if (activeFragment?.sandboxUrl) {
+//     //            // setIsLoading(true);
+//     //         }
+//     //     } else {
+//     //         // In code view, briefly show loader while editor reacts to new files
+//     //        // setIsLoading(true);
+//     //         const timeoutId = setTimeout(() => setIsLoading(false), 400);
+//     //         return () => clearTimeout(timeoutId);
+//     //     }
+//     // }, [isPreviewMode, activeFragment?.sandboxUrl, completeFileContext]);
+
+//     // Cleanup iframe resources on unmount to prevent renderer leaks in Chrome
+//     React.useEffect(() => {
+//         return () => {
+//             try {
+//                 if (previewIframeRef.current) {
+//                     previewIframeRef.current.src = 'about:blank';
+//                 }
+//             } catch (e) {
+//                 // no-op
+//             }
+//         };
+//     }, []);
+
+//     React.useEffect(() => {
+//         const handleVisualEditorMessage = (event: MessageEvent) => {
+//             // Handle AI changes
+//             if (event.data.type === 'VISUAL_EDITOR_CHANGES') {
+//                 console.log('visual_editor_changes....', event.data.message);
+
+//                 if (handleSendMessage && event.data.message) {
+//                     // Call aiHandleSend directly - this is the handleSend function from AIAgent
+//                     handleSendMessage({
+//                         channelId,
+//                         type: RoomType.Aiassistant,
+//                         postData: {
+//                             // postId: postId,
+//                             type: PostTypeEnum.Aiassistant,
+//                             content: event.data.message,
+//                         },
+//                     });
+//                 } else {
+//                     console.warn('⚠️ handleSendMessage not available or no message provided');
+//                 }
+//             }
+//         };
+
+//         window.addEventListener('message', handleVisualEditorMessage);
+//         return () => window.removeEventListener('message', handleVisualEditorMessage);
+//     }, [handleSendMessage, channelId]);
+
+//     const recreateSandboxHandler = React.useCallback(
+//         async (id: string) => {
+//             if (id) {
+//                 console.log('recreate sandbox id....', id);
+//                 setIsLoading?.(true);
+//                 send({ type: 'SET_LOADING', isLoading: true });
+//                 try {
+//                     send({ type: 'RECREATE_SANDBOX', id });
+//                 } catch (e: any) {
+//                     console.error('Error recreating sandbox:', e);
+//                     setIsLoading?.(false);
+//                     send({ type: 'SET_LOADING', isLoading: false });
+//                 }
+//             }
+//         },
+//         [send, setIsLoading],
+//     );
+
+//     // Track if we've already attempted recreate for a given sandbox URL
+//     const recreateAttemptedByUrlRef = React.useRef<Record<string, boolean>>({});
+
+//     // Probe sandbox URL via XState actor
+//     React.useEffect(() => {
+//         const url = activeFragment?.sandboxUrl;
+//         if (url) {
+//             send({ type: 'PROBE', url, fragmentId: activeFragment?.id });
+//         }
+//     }, [activeFragment?.sandboxUrl, activeFragment?.id, send]);
+
+//     // Prefer using external loading when provided; otherwise fall back to machine state
+//     const derivedIsLoading = (typeof isLoading === 'boolean' ? isLoading : state.context.isLoading) as boolean;
+
+//     // Sync external loading prop with machine's loading state (no-op if setter not provided)
+//     // React.useEffect(() => {
+//     //     console.log(
+//     //         'isLoading....',
+//     //         isLoading,
+//     //         ' state.context.isLoading',
+//     //         state.context.isLoading,
+//     //         ' previewStatus',
+//     //         previewStatus,
+//     //     );
+//     //     if (!state.context.isLoading) {
+//     //         setIsLoading?.(!!state.context.isLoading);
+//     //     }
+//     // }, [state.context.isLoading, setIsLoading, isLoading]);
+
+//     return (
+//         <div ref={previewIframeContainerRef} className="right-sidebar-content h-full flex flex-col">
+//             <div className="flex-1 overflow-hidden" style={{ minHeight: windowHeight - 140 }}>
+//                 {isPreviewMode ? (
+//                     // Preview Mode - Show sandbox iframe or fallback
+//                     (() => {
+//                         if (activeFragment?.sandboxUrl) {
+//                             return (
+//                                 <div
+//                                     className="w-full h-full relative"
+//                                     style={{
+//                                         width: isMinimized ? windowWidth * 0.8 + 'px' : '100%',
+//                                         height: windowHeight - 140,
+//                                         backgroundColor: '#f0f0f0',
+//                                     }}
+//                                 >
+//                                     {!previewStatus ? (
+//                                         <iframe
+//                                             key={activeFragment.sandboxUrl}
+//                                             ref={previewIframeRef}
+//                                             src={activeFragment.sandboxUrl}
+//                                             className="w-full w-fit h-full h-fit  border border-gray-200 rounded-md bg-white shadow-sm"
+//                                             title="Live Preview"
+//                                             sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"
+//                                             loading="lazy"
+//                                             onLoad={() => {
+//                                                 console.log('🎯 Iframe loaded successfully');
+//                                                 setIsLoading?.(false);
+//                                                 setIsCreatingSandbox?.(false);
+//                                                 send({ type: 'SET_LOADING', isLoading: false });
+//                                             }}
+//                                             onError={(e) => {
+//                                                 console.error('❌ Iframe error:', e);
+//                                                 setIsLoading?.(false);
+//                                                 send({ type: 'SET_LOADING', isLoading: false });
+//                                             }}
+//                                             style={
+//                                                 {
+//                                                     // maxHeight: windowHeight - 140,
+//                                                     // width: isMinimized ? windowWidth * 0.82 + 'px' : '100%',
+//                                                     //padding: isMinimized ? '10px' : '0px',
+//                                                 }
+//                                             }
+//                                         />
+//                                     ) : (
+//                                         <div className="absolute inset-0 bg-white/60 flex items-center justify-center z-20">
+//                                             {handleRecreateSandbox && (
+//                                                 <>
+//                                                     {derivedIsLoading || isCreatingSandbox ? (
+//                                                         <div className="flex flex-col items-center justify-center gap-2">
+//                                                             <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+//                                                             <p className="text-xs text-blue-700">Recreating...</p>
+//                                                         </div>
+//                                                     ) : (
+//                                                         <div className="flex flex-col items-center justify-center gap-2">
+//                                                             <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+//                                                             <p className="text-sm text-muted-foreground">
+//                                                                 {isLoading ? 'Recreating...' : 'Refresh'}{' '}
+//                                                                 {/* Sandbox is not available. */}
+//                                                             </p>
+//                                                             {/* <button
+//                                                                 type="button"
+//                                                                 className="themed-button focus-themed px-3 py-1.5 text-xs"
+//                                                                 onClick={() =>
+//                                                                     recreateSandboxHandler(activeFragment?.id)
+//                                                                 }
+//                                                             >
+//                                                                 Recreate
+//                                                             </button> */}
+//                                                         </div>
+//                                                     )}
+//                                                 </>
+//                                             )}
+//                                         </div>
+//                                     )}
+//                                     <div className="absolute top-2 right-2 bg-green-100 text-green-800 px-2 py-1 rounded text-xs z-10">
+//                                         Live Preview
+//                                     </div>
+//                                     {derivedIsLoading ||
+//                                         (isCreatingSandbox && (
+//                                             <>
+//                                                 <div className="absolute inset-0 bg-white/60 flex items-center justify-center z-20">
+//                                                     <div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"></div>
+//                                                 </div>
+//                                                 <div className="absolute top-2 left-2 bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs z-30">
+//                                                     Loading...
+//                                                 </div>
+//                                             </>
+//                                         ))}
+//                                 </div>
+//                             );
+//                         } else {
+//                             return (
+//                                 <div
+//                                     className="h-full flex items-center justify-center text-gray-500 border border-gray-200 rounded-md bg-gray-50 "
+//                                     style={{ width: '100%', height: '80vh' }}
+//                                 >
+//                                     <div className="text-center space-y-3">
+//                                         <p className="font-medium">No preview available</p>
+//                                         <div className="flex flex-col items-center justify-center space-y-3">
+//                                             {derivedIsLoading || isCreatingSandbox ? (
+//                                                 <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+//                                             ) : (
+//                                                 <div className="w-8 h-8 bg-gray-300 rounded-full"></div>
+//                                             )}
+//                                             <p className="text-sm text-gray-400">
+//                                                 {derivedIsLoading || isCreatingSandbox
+//                                                     ? 'Generating code...'
+//                                                     : 'Waiting for code generation...'}
+//                                             </p>
+//                                         </div>
+//                                     </div>
+//                                 </div>
+//                             );
+//                         }
+//                     })()
+//                 ) : (
+//                     // Code Editor Mode - Show files from subscription or fallback
+//                     <div
+//                         className="h-full w-full relative"
+//                         style={{
+//                             minHeight: windowHeight - 140,
+//                             height: windowHeight - 140,
+//                             width: isMinimized ? windowWidth * 0.9 + 'px' : '100%',
+//                         }}
+//                     >
+//                         <HybridLiveEditor
+//                             ref={hybridLiveEditorRef}
+//                             projectId={activeFragment?.projectId || channelId}
+//                             fragmentId={activeFragment?.id || activeTab || 'default'}
+//                             files={Object.keys(completeFileContext).length > 0 ? completeFileContext : {}}
+//                             sandboxUrl={activeFragment?.sandboxUrl}
+//                             onCopyToClipboard={handleCopyToClipboard}
+//                             onFileUpdate={handleFileUpdate}
+//                             readOnly={!activeFragment?.id}
+//                             autoSave={false}
+//                             debounceMs={500}
+//                             //className={`h-full w-[100%] h-[75vh] border-b border-gray-200 rounded-md bg-white shadow-sm overflow-hidden`}
+//                             className="h-full w-full"
+//                         />
+//                         {derivedIsLoading && (
+//                             <>
+//                                 <div className="absolute inset-0 bg-white/60 flex items-center justify-center z-20">
+//                                     <div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"></div>
+//                                 </div>
+//                                 <div className="absolute top-4 right-4 bg-blue-100 border border-blue-400 text-blue-700 px-3 py-2 rounded text-sm z-30">
+//                                     <div className="flex items-center gap-2">
+//                                         <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"></div>
+//                                         Processing...
+//                                     </div>
+//                                 </div>
+//                             </>
+//                         )}
+//                     </div>
+//                 )}
+//             </div>
+
+//             {/* <div className="p-2 border-t bg-gray-50 text-xs text-gray-500">
+//                 <div className="flex justify-between">
+//                     <span>Mobile: {detailSidebarOptions.isMobileView ? 'Yes' : 'No'}</span>
+//                     <span>Desktop: {detailSidebarOptions.isDesktopView ? 'Yes' : 'No'}</span>
+//                     {activeFragment && (
+//                         <span className="text-green-600">{activeFragment.isError ? 'Error' : 'Ready'}</span>
+//                     )}
+//                 </div>
+//                 {activeFragment && (
+//                     <div className="mt-1 text-xs">
+//                         <span className="text-gray-400">Files: {Object.keys(completeFileContext).length}</span>
+//                         {canvasLayers.length > 0 && (
+//                             <span className="ml-2 text-gray-400">Layers: {canvasLayers.length}</span>
+//                         )}
+//                     </div>
+//                 )}
+//             </div> */}
+//         </div>
+//     );
+// };
+
+export const RightSidebarFillComponent = (props: any) => {
+    return <></>;
 };