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

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

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

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>
+            )}
+        </>
+    );
+};