finish all the logical part

Author: pengyu

frontend/src/components/chat/code-engine/project-context.tsx

@@ -54,6 +54,14 @@ export interface ProjectContextType {
   setRecentlyCompletedProjectId: (id: string | null) => void;
   chatId: string | null;
   setChatId: (chatId: string | null) => void;
+  pendingProjects: Project[];
+  setPendingProjects: React.Dispatch<React.SetStateAction<Project[]>>;
+  refetchPublicProjects: () => Promise<any>;
+  setRefetchPublicProjects: React.Dispatch<
+    React.SetStateAction<() => Promise<any>>
+  >;
+  tempLoadingProjectId: string | null;
+  setTempLoadingProjectId: React.Dispatch<React.SetStateAction<string | null>>;
 }
 
 export const ProjectContext = createContext<ProjectContextType | undefined>(
@@ -102,13 +110,14 @@ const checkUrlStatus = async (
 
 export function ProjectProvider({ children }: { children: ReactNode }) {
   const router = useRouter();
-  const { isAuthorized } = useAuthContext();
+  const { isAuthorized, user } = useAuthContext();
   const [projects, setProjects] = useState<Project[]>([]);
   const [curProject, setCurProject] = useState<Project | undefined>(undefined);
   const [projectLoading, setProjectLoading] = useState<boolean>(true);
   const [filePath, setFilePath] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const editorRef = useRef<any>(null);
+  const [pendingProjects, setPendingProjects] = useState<Project[]>([]);
   const [recentlyCompletedProjectIdRaw, setRecentlyCompletedProjectIdRaw] =
     useState<string | null>(() =>
       typeof window !== 'undefined'
@@ -128,6 +137,9 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
   const [chatId, setChatId] = useState<string | null>(null);
   const [pollTime, setPollTime] = useState(Date.now());
   const [isCreateButtonClicked, setIsCreateButtonClicked] = useState(false);
+  const [tempLoadingProjectId, setTempLoadingProjectId] = useState<
+    string | null
+  >(null);
   interface ChatProjectCacheEntry {
     project: Project | null;
     timestamp: number;
@@ -153,7 +165,9 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
   const MAX_RETRIES = 30;
   const CACHE_TTL = 5 * 60 * 1000; // 5 minutes TTL for cache
   const SYNC_DEBOUNCE_TIME = 1000; // 1 second debounce for sync operations
-
+  const [refetchPublicProjects, setRefetchPublicProjects] = useState<
+    () => Promise<any>
+  >(() => async () => {});
   // Mounted ref to prevent state updates after unmount
   const isMounted = useRef(true);
 
@@ -710,18 +724,13 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       model = 'gpt-4o-mini'
     ): Promise<string> => {
       if (!prompt.trim()) {
-        if (isMounted.current) {
-          toast.error('Please enter a project description');
-        }
+        toast.error('Please enter a project description');
         throw new Error('Invalid prompt');
       }
 
       try {
-        if (isMounted.current) {
-          setIsLoading(true);
-        }
+        setIsLoading(true);
 
-        // Default packages based on typical web project needs
         const defaultPackages = [
           { name: 'react', version: '^18.2.0' },
           { name: 'next', version: '^13.4.0' },
@@ -734,32 +743,29 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
               description: prompt,
               packages: defaultPackages,
               public: isPublic,
-              model: model,
+              model,
             },
           },
         });
+
         const createdChat = result.data?.createProject;
         if (createdChat?.id) {
           setChatId(createdChat.id);
           setIsCreateButtonClicked(true);
           localStorage.setItem('pendingChatId', createdChat.id);
+          setTempLoadingProjectId(createdChat.id);
           return createdChat.id;
         } else {
           throw new Error('Project creation failed: no chatId');
         }
       } catch (error) {
-        logger.error('Error creating project:', error);
-        if (isMounted.current) {
-          toast.error('Failed to create project from prompt');
-        }
+        toast.error('Failed to create project from prompt');
         throw error;
       } finally {
-        if (isMounted.current) {
-          setIsLoading(false);
-        }
+        setIsLoading(false);
       }
     },
-    [createProject, setChatId]
+    [createProject, setChatId, user]
   );
 
   // New function to fork a project
@@ -870,6 +876,30 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
                 retryCount: retries,
               });
 
+              // First update the project list to ensure it exists in allProjects
+              setProjects((prev) => {
+                const exists = prev.find((p) => p.id === project.id);
+                return exists ? prev : [...prev, project];
+              });
+
+              // Then more aggressively clean up pending projects
+              setPendingProjects((prev) => {
+                const filtered = prev.filter((p) => p.id !== project.id);
+                if (filtered.length !== prev.length) {
+                  logger.info(
+                    `Removed project ${project.id} from pending projects`
+                  );
+                }
+                return filtered;
+              });
+
+              // Then trigger the public projects refetch
+              await refetchPublicProjects();
+              console.log(
+                '[pollChatProject] refetchPublicProjects triggered after project is ready:',
+                project.id
+              );
+
               // Trigger state sync if needed
               if (
                 now - projectSyncState.current.lastSyncTime >=
@@ -887,6 +917,9 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
                 });
               }
 
+              if (isMounted.current) {
+                setTempLoadingProjectId(null); 
+              }
               return project;
             }
           } catch (error) {
@@ -921,6 +954,7 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       MAX_RETRIES,
       CACHE_TTL,
       SYNC_DEBOUNCE_TIME,
+      refetchPublicProjects,
     ]
   );
 
@@ -969,6 +1003,12 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       setChatId,
       recentlyCompletedProjectId: recentlyCompletedProjectIdRaw,
       setRecentlyCompletedProjectId,
+      pendingProjects,
+      setPendingProjects,
+      refetchPublicProjects,
+      setRefetchPublicProjects,
+      tempLoadingProjectId,
+      setTempLoadingProjectId,
     }),
     [
       projects,
@@ -988,6 +1028,12 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       chatId,
       setChatId,
       recentlyCompletedProjectIdRaw,
+      pendingProjects,
+      setPendingProjects,
+      refetchPublicProjects,
+      setRefetchPublicProjects,
+      tempLoadingProjectId,
+    setTempLoadingProjectId,
     ]
   );
 

frontend/src/components/global-toast-listener.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { useContext, useEffect, useRef } from 'react';
 import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
@@ -34,6 +35,9 @@ const GlobalToastListener = () => {
     setRecentlyCompletedProjectId,
     pollChatProject,
     setChatId,
+    refreshProjects,
+    refetchPublicProjects,
+    setTempLoadingProjectId,
   } = useContext(ProjectContext);
   const router = useRouter();
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -43,14 +47,15 @@ const GlobalToastListener = () => {
 
   useEffect(() => {
     const chatId = recentlyCompletedProjectId;
-
     if (!chatId || completedIdsRef.current.has(chatId)) return;
 
     intervalRef.current = setInterval(async () => {
       try {
         const project = await pollChatProject(chatId);
-
         if (project?.projectPath) {
+          await refreshProjects();
+          await refetchPublicProjects(); // 🚀 确保刷新公共项目视图
+          setTempLoadingProjectId(null);
           toast.custom(
             (t) => (
               <ProjectReadyToast
@@ -66,7 +71,6 @@ const GlobalToastListener = () => {
 
           completedIdsRef.current.add(chatId);
           saveCompletedToLocalStorage(completedIdsRef.current);
-
           setRecentlyCompletedProjectId(null);
 
           if (intervalRef.current) {

frontend/src/components/root/expand-card.tsx

@@ -1,17 +1,19 @@
 'use client';
+
 import Image from 'next/image';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { X } from 'lucide-react';
 import { ProjectContext } from '../chat/code-engine/project-context';
 import { URL_PROTOCOL_PREFIX } from '@/utils/const';
 import { logger } from '@/app/log/logger';
+import { Button } from '@/components/ui/button';
 
-export function ExpandableCard({ projects }) {
+export function ExpandableCard({ projects, isGenerating = false, onOpenChat }) {
   const [active, setActive] = useState(null);
   const [iframeUrl, setIframeUrl] = useState('');
   const ref = useRef<HTMLDivElement>(null);
-  const { getWebUrl, takeProjectScreenshot } = useContext(ProjectContext);
+  const { getWebUrl } = useContext(ProjectContext);
   const cachedUrls = useRef(new Map());
 
   useEffect(() => {
@@ -29,7 +31,13 @@ export function ExpandableCard({ projects }) {
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [active]);
+
   const handleCardClick = async (project) => {
+    if (isGenerating && onOpenChat) {
+      onOpenChat();
+      return;
+    }
+
     setActive(project);
     setIframeUrl('');
     if (cachedUrls.current.has(project.id)) {
@@ -46,6 +54,7 @@ export function ExpandableCard({ projects }) {
       logger.error('Error fetching project URL:', error);
     }
   };
+
   return (
     <>
       <AnimatePresence mode="wait">
@@ -55,10 +64,7 @@ export function ExpandableCard({ projects }) {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transition={{
-              duration: 0.3,
-              ease: [0.4, 0, 0.2, 1],
-            }}
+            transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
             className="fixed inset-0 backdrop-blur-[2px] bg-black/20 h-full w-full z-50"
             style={{ willChange: 'opacity' }}
           />
@@ -118,15 +124,7 @@ export function ExpandableCard({ projects }) {
           <motion.div
             key={project.id}
             layoutId={`card-${project.id}`}
-            onClick={async () => {
-              const data = await getWebUrl(project.path);
-
-              logger.info(project.image);
-              const url = `${URL_PROTOCOL_PREFIX}://${data.domain}`;
-              setIframeUrl(url);
-              handleCardClick(project);
-              setActive(project);
-            }}
+            onClick={() => handleCardClick(project)}
             className="group cursor-pointer"
           >
             <motion.div
@@ -135,7 +133,7 @@ export function ExpandableCard({ projects }) {
             >
               <motion.div layoutId={`image-${project.id}`}>
                 <Image
-                  src={project.image}
+                  src={isGenerating ? '/placeholder-black.png' : project.image}
                   alt={project.name}
                   width={600}
                   height={200}
@@ -150,7 +148,7 @@ export function ExpandableCard({ projects }) {
                 className="absolute inset-0 bg-black/40 flex items-center justify-center"
               >
                 <span className="text-white font-medium px-4 py-2 rounded-lg bg-white/20 backdrop-blur-sm">
-                  View Project
+                  {isGenerating ? 'Generating...' : 'View Project'}
                 </span>
               </motion.div>
             </motion.div>
@@ -168,6 +166,20 @@ export function ExpandableCard({ projects }) {
               >
                 {project.author}
               </motion.div>
+              {isGenerating && onOpenChat && (
+                <div className="mt-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onOpenChat();
+                    }}
+                  >
+                    Open Chat
+                  </Button>
+                </div>
+              )}
             </motion.div>
           </motion.div>
         ))}