@messenger-box/tailwind-ui-inbox 10.0.3-alpha.122 → 10.0.3-alpha.124

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

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { HybridLiveEditor, HybridLiveEditorRef } from '../live-code-editor/hybrid-live-editor';
 import { useOnChatMessageAddedSubscription } from 'common/graphql';
-import { ICreateChannelInput } from 'common';
+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;
@@ -22,6 +26,7 @@ type RightSidebarProps = {
     setIsLoading?: (isLoading: boolean) => void;
     handleSendMessage?: (createChannelInput: ICreateChannelInput) => void;
     handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
+    isMinimized?: boolean;
     isLoading?: boolean;
     [key: string]: any;
 };
@@ -39,32 +44,49 @@ export const RightSidebarFillComponent = (props: RightSidebarProps) => {
         isLoading,
         handleSendMessage,
         handleRecreateSandbox,
+        isMinimized,
     } = props;
-
     const hybridLiveEditorRef = React.useRef<HybridLiveEditorRef>(null);
     const previewIframeRef = React.useRef<HTMLIFrameElement>(null);
-
-    // State for subscription data and active fragment
+    const previewIframeContainerRef = React.useRef<HTMLIFrameElement>(null);
+    // State for subscription data
     const [subscriptionData, setSubscriptionData] = React.useState<any>(null);
-    const [activeFragment, setActiveFragment] = React.useState<any>(null);
-    const [currentFiles, setCurrentFiles] = React.useState<Record<string, string>>({});
-    const [canvasLayers, setCanvasLayers] = React.useState<any[]>([]);
-    const [sanboxRecreate, setSanboxRecreate] = React.useState(false);
-    // const [isLoading, setIsLoading] = React.useState(false);
-    const [previewStatus, setPreviewStatus] = React.useState<{ code?: number; message?: string } | null>(null);
-    // Local loading fallback if parent didn't pass setIsLoading/isLoading
-    const [localLoading, setLocalLoading] = React.useState(false);
-    const loading = typeof isLoading === 'boolean' ? isLoading : localLoading;
-    const setLoading = React.useCallback(
-        (val: boolean) => {
-            if (typeof setIsLoading === 'function') {
-                setIsLoading(val);
-            } else {
-                setLocalLoading(val);
-            }
+    // 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,
+            },
         },
-        [setIsLoading],
     );
+    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(
@@ -131,27 +153,20 @@ export const RightSidebarFillComponent = (props: RightSidebarProps) => {
     // Determine if we should show preview or editor based on activeTab
     const isPreviewMode = activeTab === 'preview';
 
-    const { data: chatMessageAddedData } = useOnChatMessageAddedSubscription({
-        variables: { channelId: channelId?.toString() || '' },
-        skip: !channelId,
-    });
-
     // Turn on loader when new data is about to be processed
     React.useEffect(() => {
         if (chatMessageAddedData?.chatMessageAdded || selectedPost) {
-            // setIsLoading(true);
+            // sync external loader
+            // setIsLoading?.(false);
+            // send({ type: 'SET_LOADING', isLoading: false });
         }
-    }, [chatMessageAddedData, 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;
-            // console.log('=== SUBSCRIPTION MESSAGE DEBUG ===');
-            // console.log('Full message:', JSON.stringify(message, null, 2));
-            // console.log('Message props:', message.props);
-            // console.log('Message propsConfiguration:', message.propsConfiguration);
 
             // Extract strictly from message.propsConfiguration (fragment only)
             let extracted: any = null;
@@ -178,7 +193,6 @@ export const RightSidebarFillComponent = (props: RightSidebarProps) => {
                         summary: contents.summary || cfg.summary || frag.summary,
                         title: frag.title || contents.title || cfg.title,
                         isError: frag.isError,
-                        syncStatus: frag.syncStatus,
                     };
                     fragmentSource = 'propsConfiguration.contents.props.fragment';
                 }
@@ -196,7 +210,6 @@ export const RightSidebarFillComponent = (props: RightSidebarProps) => {
                         summary: contents.summary || cfg.summary || frag.summary,
                         title: frag.title || contents.title || cfg.title,
                         isError: frag.isError,
-                        syncStatus: frag.syncStatus,
                     };
                     fragmentSource = 'propsConfiguration.contents.fragment';
                 }
@@ -214,7 +227,6 @@ export const RightSidebarFillComponent = (props: RightSidebarProps) => {
                         summary: cfg.summary || frag.summary,
                         title: frag.title || cfg.title,
                         isError: frag.isError,
-                        syncStatus: frag.syncStatus,
                     };
                     fragmentSource = 'propsConfiguration.fragment';
                 }
@@ -235,6 +247,7 @@ export const RightSidebarFillComponent = (props: RightSidebarProps) => {
                 const fragment = {
                     id: message.id,
                     sandboxUrl: extracted.sandboxUrl || extracted.url,
+                    sandboxId: extracted.sandboxId,
                     title: extracted.title || 'Generated Code',
                     files: extracted.files || {},
                     projectId: extracted.projectId,
@@ -242,7 +255,6 @@ export const RightSidebarFillComponent = (props: RightSidebarProps) => {
                     canvasLayers: extracted.canvasLayers,
                     summary: extracted.summary,
                     isError: extracted.isError,
-                    syncStatus: extracted.syncStatus,
                 };
 
                 // If canvasLayers missing but present in summary, attempt to extract like use-ai-messages
@@ -260,69 +272,17 @@ export const RightSidebarFillComponent = (props: RightSidebarProps) => {
                     }
                 }
 
-                console.log('✅ Setting active fragment:', fragment);
-                setActiveFragment(fragment);
-
-                // Update files into local state for editor
-                if (fragment.files) {
-                    console.log('✅ Setting current files:', Object.keys(fragment.files));
-                    setCurrentFiles(fragment.files);
-                }
-
-                // Update canvas layers if available
-                if (fragment.canvasLayers && Array.isArray(fragment.canvasLayers)) {
-                    console.log('Received canvas layers from AI:', fragment.canvasLayers);
-                    setCanvasLayers(fragment.canvasLayers);
-                } else {
-                    console.log('No canvas layers found in response');
-                }
-
-                // setIsLoading(false);
+                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);
+                //  setIsLoading?.(false);
+                //  send({ type: 'SET_LOADING', isLoading: false });
             }
         }
-    }, [chatMessageAddedData, selectedPost]);
-
-    // Probe sandbox URL to detect server-side errors (e.g., 502) before rendering iframe
-    React.useEffect(() => {
-        const url = activeFragment?.sandboxUrl;
-        setPreviewStatus(null);
-        if (!url) return;
-
-        const controller = new AbortController();
-        const signal = controller.signal;
-        const run = async () => {
-            try {
-                //setLoading(true);
-                // timeout to avoid indefinite loading
-                const timeoutId = setTimeout(() => controller.abort(), 10000);
-                const res = await fetch(url, {
-                    method: 'GET',
-                    mode: 'cors',
-                    redirect: 'follow',
-                    signal,
-                });
-                clearTimeout(timeoutId);
-                console.log('res....', res);
-                if (!res.ok) {
-                    setPreviewStatus({ code: res.status, message: res.statusText });
-                    if (!sanboxRecreate) setSanboxRecreate(true);
-                } else {
-                    setPreviewStatus(null);
-                }
-            } catch (e: any) {
-                // Network/CORS errors will end up here
-                setPreviewStatus({ message: 'Network error' });
-                // if(!sanboxRecreate) setSanboxRecreate(true);
-            } finally {
-                setLoading(false);
-            }
-        };
-        run();
-        return () => controller.abort();
-    }, [activeFragment?.sandboxUrl, sanboxRecreate]);
+    }, [chatMessageAddedData, selectedPost, send, setIsLoading]);
 
     // When switching tabs or when sandbox changes, show loader until ready
     // React.useEffect(() => {
@@ -351,92 +311,158 @@ export const RightSidebarFillComponent = (props: RightSidebarProps) => {
         };
     }, []);
 
-    const sandboxExpiryCheck = React.useCallback(() => {
-        setSanboxRecreate(false);
-        if (activeFragment?.id && handleRecreateSandbox) {
-            Promise.resolve(handleRecreateSandbox(activeFragment?.id))
-                .then((data: any) => {
-                    console.log('recreateSandbox data', data);
-                    setSanboxRecreate(false);
-                })
-                .catch(() => {
-                    setSanboxRecreate(false);
-                });
+    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?.id, handleRecreateSandbox, setSanboxRecreate]);
+    }, [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(() => {
-        if (sanboxRecreate) {
-            sandboxExpiryCheck();
+        console.log(
+            'isLoading....',
+            isLoading,
+            ' state.context.isLoading',
+            state.context.isLoading,
+            ' previewStatus',
+            previewStatus,
+        );
+        if (!state.context.isLoading) {
+            setIsLoading?.(!!state.context.isLoading);
         }
-    }, [sanboxRecreate, sandboxExpiryCheck]);
+    }, [state.context.isLoading, setIsLoading, isLoading]);
 
     return (
-        <div className="right-sidebar-content h-full flex flex-col">
-            <div className="flex-1 overflow-hidden" style={{ height: 'calc(100vh - 140px)' }}>
+        <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 w-[80vw] relative"
+                                    className="w-full h-full relative"
                                     style={{
-                                        //minHeight: '400px',
+                                        width: isMinimized ? windowWidth * 0.8 + 'px' : '100%',
+                                        height: windowHeight - 140,
                                         backgroundColor: '#f0f0f0',
-                                        minHeight: 'calc(100vh - 140px)',
-                                        width: '100%',
                                     }}
                                 >
                                     {!previewStatus ? (
                                         <iframe
                                             key={activeFragment.sandboxUrl}
                                             ref={previewIframeRef}
-                                            src={!previewStatus ? activeFragment.sandboxUrl : 'about:blank'}
-                                            className="w-full h-full border border-gray-200 rounded-md bg-white shadow-sm"
+                                            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');
-                                                setLoading(false);
-                                                setPreviewStatus(null);
+                                                setIsLoading?.(false);
+                                                send({ type: 'SET_LOADING', isLoading: false });
                                             }}
                                             onError={(e) => {
                                                 console.error('❌ Iframe error:', e);
-                                                setLoading(false);
-                                            }}
-                                            style={{
-                                                // minHeight: '400px'
-                                                minHeight: 'calc(100vh - 140px)',
+                                                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 flex items-center justify-center bg-white border border-gray-200 rounded-md">
-                                            <div className="text-center space-y-3 px-4">
-                                                <div className="flex items-center justify-center gap-2 pt-1">
-                                                    <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>
-                                                    {/* {handleRecreateSandbox && (
-                                                        <button
-                                                            className="px-3 py-1.5 text-xs rounded bg-blue-600 text-white hover:bg-blue-700"
-                                                            onClick={() => handleRecreateSandbox(activeFragment?.id)}
-                                                        >
-                                                            Recreate sandbox
-                                                        </button>
-                                                    )} */}
-                                                </div>
-                                            </div>
+                                        <div className="absolute inset-0 bg-white/60 flex items-center justify-center z-20">
+                                            {handleRecreateSandbox && (
+                                                <>
+                                                    {derivedIsLoading ? (
+                                                        <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>
-                                    {loading && (
+                                    {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>
@@ -450,17 +476,22 @@ export const RightSidebarFillComponent = (props: RightSidebarProps) => {
                             );
                         } else {
                             return (
-                                <div className="h-full flex items-center justify-center text-gray-500 border border-gray-200 rounded-md bg-gray-50">
+                                <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">
-                                            {loading ? (
+                                            {derivedIsLoading ? (
                                                 <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">
-                                                {loading ? 'Generating code...' : 'Waiting for code generation...'}
+                                                {derivedIsLoading
+                                                    ? 'Generating code...'
+                                                    : 'Waiting for code generation...'}
                                             </p>
                                         </div>
                                     </div>
@@ -470,7 +501,14 @@ export const RightSidebarFillComponent = (props: RightSidebarProps) => {
                     })()
                 ) : (
                     // Code Editor Mode - Show files from subscription or fallback
-                    <div className="h-full w-full relative" style={{ height: '100%', minHeight: '500px' }}>
+                    <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}
@@ -482,9 +520,10 @@ export const RightSidebarFillComponent = (props: RightSidebarProps) => {
                             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"
                         />
-                        {loading && (
+                        {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>

package/src/components/slot-fill/right-sidebar-filler.tsx

@@ -23,6 +23,7 @@ type RightSidebarProps = {
     setIsLoading?: (isLoading: boolean) => void;
     handleSendMessage?: (createChannelInput: ICreateChannelInput) => void;
     handleRecreateSandbox?: (messageId: string) => void | Promise<any>;
+    isMinimized?: boolean;
     isLoading?: boolean;
     [key: string]: any;
 };

package/src/config/env-config.ts

@@ -1,4 +1,4 @@
-import { cleanEnv, num, str } from 'envalid';
+import { cleanEnv, json, num, str } from 'envalid';
 import { getEnvironment } from '@common-stack/core';
 
 const env = getEnvironment();
@@ -19,4 +19,6 @@ export const config = cleanEnv(env, {
     NEWS_API_KEY: str({ default: '' }),
     OPENAI_API_KEY: str({ default: '' }),
     AI_MESSENGER_PATH: str({ default: '/ai-messenger/app' }),
+    LAYOUT_SETTINGS: json({ default: {} }),
+    APP_NAME: str({ default: 'Messenger Box' }),
 });