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

package/lib/components/filler-components/RightSiderBar.js

@@ -1,459 +1,532 @@
-import*as React from'react';import {HybridLiveEditor}from'../live-code-editor/hybrid-live-editor.js';import {useOnChatMessageAddedSubscription}from'common/graphql';import {PostTypeEnum,RoomType}from'common';import {useMachine}from'@xstate/react';import {fromPromise}from'xstate';import {rightSidebarMachine}from'../../xstate/rightSidebar.machine.js';const RightSidebarFillComponent = props => {
-  const {
-    channelId,
-    detailSidebarOptions,
-    windowWidth,
-    windowHeight,
-    activeTab,
-    messages,
-    selectedPost,
-    setIsLoading,
-    isLoading,
-    handleSendMessage,
-    handleRecreateSandbox,
-    isMinimized,
-    isCreatingSandbox,
-    setIsCreatingSandbox
-  } = props;
-  const hybridLiveEditorRef = React.useRef(null);
-  const previewIframeRef = React.useRef(null);
-  const previewIframeContainerRef = React.useRef(null);
-  // State for subscription data
-  const [subscriptionData, setSubscriptionData] = React.useState(null);
-  // XState machine for sidebar state
-  const [state, send] = useMachine(rightSidebarMachine.provide({
-    actors: {
-      recreateSandbox: fromPromise(async ({
-        input
-      }) => {
-        const {
-          id
-        } = input;
-        if (handleRecreateSandbox) {
-          await handleRecreateSandbox(id);
-        }
-        return {
-          success: true
-        };
-      })
-    }
-  }), {
-    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;
-  state.context.canvasLayers;
-  const previewStatus = state.context.previewStatus;
-  // const [isLoading, setIsLoading] = React.useState(false);
-  const {
-    data: chatMessageAddedData
-  } = useOnChatMessageAddedSubscription({
-    variables: {
-      channelId: channelId?.toString() || ''
-    },
-    skip: !channelId
-  });
-  // Component mount tracking
-  React.useMemo(() => `right-sidebar-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, []);
-  const handleCopyToClipboard = React.useCallback(text => {
-    navigator.clipboard.writeText(text);
-  }, []);
-  const handleFileUpdate = React.useCallback(async (filePath, content) => {
-    // 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;
-    });
-    // 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) ;
-  }, [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 = null;
-      let fragmentSource = null;
-      try {
-        // 1) Preferred: contents.props.fragment
-        const cfg = message.propsConfiguration || {};
-        const contents = 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.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 => {
-      // 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]);
-  React.useCallback(async id => {
-    if (id) {
-      console.log('recreate sandbox id....', id);
-      setIsLoading?.(true);
-      send({
-        type: 'SET_LOADING',
-        isLoading: true
-      });
-      try {
-        send({
-          type: 'RECREATE_SANDBOX',
-          id
-        });
-      } catch (e) {
-        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
-  React.useRef({});
-  // 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;
-  // 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 React.createElement("div", {
-    ref: previewIframeContainerRef,
-    className: "right-sidebar-content h-full flex flex-col"
-  }, React.createElement("div", {
-    className: "flex-1 overflow-hidden",
-    style: {
-      minHeight: windowHeight - 140
-    }
-  }, isPreviewMode ?
-  // Preview Mode - Show sandbox iframe or fallback
-  (() => {
-    if (activeFragment?.sandboxUrl) {
-      return React.createElement("div", {
-        className: "w-full h-full relative",
-        style: {
-          width: isMinimized ? windowWidth * 0.8 + 'px' : '100%',
-          height: windowHeight - 140,
-          backgroundColor: '#f0f0f0'
-        }
-      }, !previewStatus ? React.createElement("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',
-        }
-      }) : React.createElement("div", {
-        className: "absolute inset-0 bg-white/60 flex items-center justify-center z-20"
-      }, handleRecreateSandbox && React.createElement(React.Fragment, null, derivedIsLoading || isCreatingSandbox ? React.createElement("div", {
-        className: "flex flex-col items-center justify-center gap-2"
-      }, React.createElement("div", {
-        className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"
-      }), React.createElement("p", {
-        className: "text-xs text-blue-700"
-      }, "Recreating...")) : React.createElement("div", {
-        className: "flex flex-col items-center justify-center gap-2"
-      }, React.createElement("div", {
-        className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"
-      }), React.createElement("p", {
-        className: "text-sm text-muted-foreground"
-      }, isLoading ? 'Recreating...' : 'Refresh', ' ')))), React.createElement("div", {
-        className: "absolute top-2 right-2 bg-green-100 text-green-800 px-2 py-1 rounded text-xs z-10"
-      }, "Live Preview"), derivedIsLoading || isCreatingSandbox && React.createElement(React.Fragment, null, React.createElement("div", {
-        className: "absolute inset-0 bg-white/60 flex items-center justify-center z-20"
-      }, React.createElement("div", {
-        className: "animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"
-      })), React.createElement("div", {
-        className: "absolute top-2 left-2 bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs z-30"
-      }, "Loading...")));
-    } else {
-      return React.createElement("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'
-        }
-      }, React.createElement("div", {
-        className: "text-center space-y-3"
-      }, React.createElement("p", {
-        className: "font-medium"
-      }, "No preview available"), React.createElement("div", {
-        className: "flex flex-col items-center justify-center space-y-3"
-      }, derivedIsLoading || isCreatingSandbox ? React.createElement("div", {
-        className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"
-      }) : React.createElement("div", {
-        className: "w-8 h-8 bg-gray-300 rounded-full"
-      }), React.createElement("p", {
-        className: "text-sm text-gray-400"
-      }, derivedIsLoading || isCreatingSandbox ? 'Generating code...' : 'Waiting for code generation...'))));
-    }
-  })() :
-  // Code Editor Mode - Show files from subscription or fallback
-  React.createElement("div", {
-    className: "h-full w-full relative",
-    style: {
-      minHeight: windowHeight - 140,
-      height: windowHeight - 140,
-      width: isMinimized ? windowWidth * 0.9 + 'px' : '100%'
-    }
-  }, React.createElement(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 && React.createElement(React.Fragment, null, React.createElement("div", {
-    className: "absolute inset-0 bg-white/60 flex items-center justify-center z-20"
-  }, React.createElement("div", {
-    className: "animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"
-  })), React.createElement("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"
-  }, React.createElement("div", {
-    className: "flex items-center gap-2"
-  }, React.createElement("div", {
-    className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"
-  }), "Processing..."))))));
+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>
+//     );
+// };
+const RightSidebarFillComponent = props => {
+  return React.createElement(React.Fragment, null);
 };export{RightSidebarFillComponent};//# sourceMappingURL=RightSiderBar.js.map