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

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/inbox/FilesList.tsx

@@ -0,0 +1,89 @@
+import React, { useMemo, useState } from 'react';
+import { useFileUrlQuery } from 'common/graphql';
+
+interface FilesListProps {
+    files: any[];
+    uploaded?: boolean;
+    FileElementProps?: Omit<FileElementProps, 'file' | 'uploaded' | 'onRemove'>;
+    onRemove?: () => Promise<void>;
+}
+
+interface FileElementProps {
+    file: any;
+    uploaded: boolean;
+    width?: number;
+    height?: number;
+    onRemove?: () => Promise<void>;
+}
+
+export function FilesList({ files, uploaded = false }: FilesListProps) {
+    return (
+        <div className="flex flex-row">
+            {files.map((file, index) => (
+                <FilesList.FileElement key={`${index}`} uploaded={uploaded} file={file} />
+            ))}
+        </div>
+    );
+}
+
+FilesList.FileElement = ({ file, uploaded, width = 120, height = 120 }: FileElementProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const src = useMemo(() => (uploaded ? file.url : URL.createObjectURL(file)), [file, uploaded]);
+    const { data } = useFileUrlQuery({
+        variables: {
+            id: file?.id,
+        },
+        skip: !file?.id,
+    });
+
+    const onOpen = () => setIsOpen(true);
+    const onClose = () => setIsOpen(false);
+
+    return (
+        <>
+            <img
+                className="cursor-pointer m-2 object-cover rounded"
+                style={{ height: `${height}px`, width: `${width}px` }}
+                src={src}
+                onClick={onOpen}
+                alt="File preview"
+            />
+
+            {/* Modal */}
+            {isOpen && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+                    {/* Overlay */}
+                    <div className="fixed inset-0 bg-black bg-opacity-75" onClick={onClose} />
+
+                    {/* Modal Content */}
+                    <div className="relative bg-white rounded-lg shadow-xl max-w-4xl max-h-[90vh] overflow-hidden">
+                        {/* Close Button */}
+                        <button
+                            onClick={onClose}
+                            className="absolute top-4 right-4 z-10 p-2 rounded-full bg-black bg-opacity-50 hover:bg-opacity-70 transition-all duration-200"
+                        >
+                            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+
+                        {/* Image Container */}
+                        <div className="p-4 flex items-center justify-center">
+                            <img
+                                src={data?.fileInfo?.url || src}
+                                alt="File full view"
+                                className="max-w-full max-h-[80vh] object-contain cursor-pointer"
+                                onClick={onClose}
+                            />
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};

package/src/components/inbox/MessageItem.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { format } from 'date-fns';
+import { BsFlag } from '@react-icons/all-files/bs/BsFlag.js';
+
+export function MessageItem({ message }: { message: any }) {}
+
+MessageItem.Plain = function PlainMessageItem({ message, index }) {
+    return (
+        <div className="w-full flex justify-center mb-7" key={`msgList_${index}`}>
+            <p className="text-sm text-gray-600 font-bold">{message}</p>
+        </div>
+    );
+};
+
+MessageItem.Dialog = function DialogMessageItem({ message, currentUser, index, onOpen }) {
+    return (
+        <div className="w-full flex justify-start mb-7" key={`msgList_${index}`}>
+            <div className="flex-grow flex">
+                <div
+                    className="w-8 h-8 bg-gray-400 rounded-full mr-4 cursor-pointer overflow-hidden flex-shrink-0"
+                    onClick={onOpen}
+                >
+                    {message?.imageUrl ? (
+                        <img src={message.imageUrl} alt="User avatar" className="w-full h-full object-cover" />
+                    ) : (
+                        <div className="w-full h-full bg-gray-400"></div>
+                    )}
+                </div>
+                <div className="flex-grow">
+                    <div className="flex flex-grow mt-1.5">
+                        <p className="text-sm text-gray-600 font-bold">
+                            {message?.author?.familyName && message?.author?.givenName
+                                ? message?.author?.givenName + ' ' + message?.author?.familyName
+                                : message?.author?.username}
+                        </p>
+                        <p className="text-sm text-gray-500 ml-2.5">
+                            {format(new Date(message?.createdAt), 'MMM dd, yyyy hh:mm aaa')}
+                        </p>
+                    </div>
+                    <p className="text-sm mt-1.5 text-gray-600 whitespace-pre-line">{message?.message}</p>
+                </div>
+            </div>
+            {currentUser?.id !== message?.author?.id && (
+                <div className="ml-2">
+                    <BsFlag className="text-gray-600 w-6 h-6" />
+                </div>
+            )}
+        </div>
+    );
+};