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

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

@@ -0,0 +1,408 @@
+import * as React from 'react';
+import { HybridLiveEditor, HybridLiveEditorRef } from '../live-code-editor/hybrid-live-editor';
+import { useOnChatMessageAddedSubscription } from 'common/graphql';
+
+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;
+    isLoading?: boolean;
+    [key: string]: any;
+};
+
+export const RightSidebarFillComponent = (props: RightSidebarProps) => {
+    const {
+        channelId,
+        detailSidebarOptions,
+        windowWidth,
+        windowHeight,
+        activeTab,
+        messages,
+        selectedPost,
+        setIsLoading,
+        isLoading,
+    } = props;
+
+    const hybridLiveEditorRef = React.useRef<HybridLiveEditorRef>(null);
+    const previewIframeRef = React.useRef<HTMLIFrameElement>(null);
+
+    // State for subscription data and active fragment
+    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 [isLoading, setIsLoading] = React.useState(false);
+
+    // 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';
+
+    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);
+        }
+    }, [chatMessageAddedData, selectedPost]);
+
+    // 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;
+            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,
+                    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:', 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);
+            } else {
+                console.log('❌ No valid response found in message');
+                // setIsLoading(false);
+            }
+        }
+    }, [chatMessageAddedData, selectedPost]);
+
+    // 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
+            }
+        };
+    }, []);
+
+    return (
+        <div className="right-sidebar-content h-full flex flex-col">
+            <div className="flex-1 overflow-hidden" style={{ height: 'calc(100vh - 140px)' }}>
+                {isPreviewMode ? (
+                    // Preview Mode - Show sandbox iframe or fallback
+                    (() => {
+                        if (activeFragment?.sandboxUrl) {
+                            return (
+                                <div
+                                    className="w-full h-full relative"
+                                    style={{ minHeight: '400px', backgroundColor: '#f0f0f0' }}
+                                >
+                                    <iframe
+                                        key={activeFragment.sandboxUrl}
+                                        ref={previewIframeRef}
+                                        src={activeFragment.sandboxUrl}
+                                        className="w-full h-full 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);
+                                        }}
+                                        onError={(e) => {
+                                            console.error('❌ Iframe error:', e);
+                                            setIsLoading(false);
+                                        }}
+                                        style={{ minHeight: '400px' }}
+                                    />
+                                    <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>
+                                    {isLoading && (
+                                        <>
+                                            <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">
+                                    <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">
+                                            {isLoading ? (
+                                                <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">
+                                                {isLoading ? '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={{ height: '100%', minHeight: '500px' }}>
+                        <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-full"
+                        />
+                        {isLoading && (
+                            <>
+                                <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>
+    );
+};

package/src/components/index.ts

@@ -14,6 +14,9 @@ export {
     UserModalContent,
     ServiceInboxItem,
     MessagesBuilderUi,
+    RightSidebarAi,
 } from './InboxMessage';
-export { ChatMessageFiller, ChatMessageFill2 } from './slot-fill';
+export { ChatMessageFiller, ChatMessageFill2, RightSidebarFillDefault } from './slot-fill';
 export { AIAgent } from './AIAgent';
+export { ModelConfigPanel } from './ModelConfigPanel';
+export { usePersistentModelConfig } from '../hooks/usePersistentModelConfig';

package/src/components/live-code-editor/hybrid-live-editor.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { cn } from '../../utils/utils';
+import { Button } from '../ui/button';
+import { LiveCodeEditor } from './live-code-editor';
+
+interface HybridLiveEditorProps {
+    projectId: string;
+    fragmentId?: string;
+    files?: Record<string, string>;
+    className?: string;
+    sandboxUrl?: string;
+    onCopyToClipboard?: (text: string) => void;
+    onFileUpdate?: (filePath: string, content: string) => Promise<void>;
+    readOnly?: boolean;
+    autoSave?: boolean;
+    debounceMs?: number;
+    showFileExplorer?: boolean;
+}
+
+export interface HybridLiveEditorRef {
+    openVSCode: () => void;
+}
+
+export const HybridLiveEditor = forwardRef<HybridLiveEditorRef, HybridLiveEditorProps>(
+    (
+        {
+            projectId,
+            fragmentId,
+            files = {},
+            className,
+            sandboxUrl,
+            onCopyToClipboard,
+            onFileUpdate,
+            readOnly = false,
+            autoSave = true,
+            debounceMs = 500,
+            showFileExplorer = true,
+        },
+        ref,
+    ) => {
+        const handleOpenVSCodeInTab = useCallback(async () => {
+            if (sandboxUrl) {
+                try {
+                    // Start VS Code sync first
+                    if (projectId && fragmentId) {
+                        console.log('HybridLiveEditor - Starting VSCode sync for:', { projectId, fragmentId });
+                        // Note: You'll need to implement the VSCode sync mutation based on your GraphQL setup
+                        // await startVSCodeSyncMutation({
+                        //   variables: { projectId, fragmentId }
+                        // });
+                        console.log('HybridLiveEditor - VSCode sync started successfully');
+                    }
+
+                    const url = new URL(sandboxUrl);
+                    let codeServerUrl: string;
+
+                    // Handle different URL formats
+                    if (url.hostname.includes('yarntra.ai')) {
+                        // Format: https://3000-{sandboxId}.yarntra.ai -> https://8080-{sandboxId}.yarntra.ai
+                        codeServerUrl = `${url.protocol}//${url.hostname.replace('3000-', '8080-')}${url.pathname}`;
+                    } else if (url.hostname.includes('e2b.dev')) {
+                        // Format: https://{sandboxId}.e2b.dev -> https://{sandboxId}-8080.e2b.dev
+                        codeServerUrl = `${url.protocol}//${url.hostname}-8080${url.pathname}`;
+                    } else {
+                        // Fallback: try port-based approach
+                        const port = url.port || '3000';
+                        codeServerUrl = sandboxUrl.replace(`:${port}`, ':8080');
+                    }
+
+                    window.open(codeServerUrl, '_blank');
+                } catch (err) {
+                    console.error('Error opening VSCode in new tab:', err);
+                }
+            }
+        }, [sandboxUrl, projectId, fragmentId]);
+
+        // Expose the openVSCode function via ref
+        useImperativeHandle(
+            ref,
+            () => ({
+                openVSCode: handleOpenVSCodeInTab,
+            }),
+            [handleOpenVSCodeInTab],
+        );
+
+        // Return Monaco Editor without header/footer, exposing VSCode function
+        return (
+            <div className={cn('flex flex-col h-full w-full', className)}>
+                {/* Monaco Editor - Full height */}
+                <div className="flex-1 overflow-hidden">
+                    <LiveCodeEditor
+                        files={files}
+                        onCopyToClipboard={onCopyToClipboard}
+                        onFileUpdate={onFileUpdate}
+                        readOnly={readOnly}
+                        autoSave={autoSave}
+                        debounceMs={debounceMs}
+                        showFileExplorer={showFileExplorer}
+                        className="h-full"
+                    />
+                </div>
+            </div>
+        );
+    },
+);

package/src/components/live-code-editor/index.ts

@@ -0,0 +1,3 @@
+export { LiveCodeEditor } from './live-code-editor';
+export { HybridLiveEditor } from './hybrid-live-editor';
+export type { HybridLiveEditorRef } from './hybrid-live-editor';