finished notification

Author: pengyu

frontend/src/app/(main)/page.tsx

@@ -13,6 +13,7 @@ import { SignUpModal } from '@/components/sign-up-modal';
 import { useRouter } from 'next/navigation';
 import { logger } from '../log/logger';
 import { AuroraText } from '@/components/magicui/aurora-text';
+
 export default function HomePage() {
   // States for AuthChoiceModal
   const [showAuthChoice, setShowAuthChoice] = useState(false);
@@ -22,9 +23,10 @@ export default function HomePage() {
 
   const promptFormRef = useRef<PromptFormRef>(null);
   const { isAuthorized } = useAuthContext();
-  const { createProjectFromPrompt, isLoading } = useContext(ProjectContext);
+  const { createProjectFromPrompt, isLoading, setRecentlyCompletedProjectId } =
+    useContext(ProjectContext);
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (): Promise<string> => {
     if (!promptFormRef.current) return;
 
     const { message, isPublic, model } = promptFormRef.current.getPromptData();
@@ -34,12 +36,25 @@ export default function HomePage() {
       const chatId = await createProjectFromPrompt(message, isPublic, model);
 
       promptFormRef.current.clearMessage();
-      router.push(`/chat?id=${chatId}`);
+      if (chatId) {
+        setRecentlyCompletedProjectId(chatId);
+        return chatId;
+      }
     } catch (error) {
       logger.error('Error creating project:', error);
     }
   };
+  // useEffect(() => {
+  //   if (!chatId) return;
+
+  //   const interval = setInterval(() => {
+  //     pollChatProject(chatId).catch((error) => {
+  //       logger.error('Polling error in HomePage:', error);
+  //     });
+  //   }, 6000);
 
+  //   return () => clearInterval(interval);
+  // }, [chatId, pollChatProject]);
   return (
     <div className="min-h-screen pt-16 pb-24 px-6 flex flex-col items-center justify-center relative overflow-hidden">
       <div className="fixed inset-0 -z-20">

frontend/src/components/chat-page-navigation.tsx

@@ -0,0 +1,15 @@
+import { EventEnum } from '@/const/EventEnum';
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+
+export const redirectChatPage = (
+  chatId: string,
+  setCurrentChatid: (id: string) => void,
+  setChatId: (id: string) => void,
+  router: AppRouterInstance
+) => {
+  setCurrentChatid(chatId);
+  setChatId(chatId);
+  router.push(`/chat?id=${chatId}`);
+  const event = new Event(EventEnum.CHAT);
+  window.dispatchEvent(event);
+};

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

@@ -36,7 +36,7 @@ export interface ProjectContextType {
     prompt: string,
     isPublic: boolean,
     model?: string
-  ) => Promise<boolean>;
+  ) => Promise<string | false>;
   forkProject: (projectId: string) => Promise<void>;
   setProjectPublicStatus: (
     projectId: string,
@@ -109,10 +109,25 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
   const [filePath, setFilePath] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const editorRef = useRef<any>(null);
-  const [recentlyCompletedProjectId, setRecentlyCompletedProjectId] = useState<
-    string | null
-  >(null);
+  const [recentlyCompletedProjectIdRaw, setRecentlyCompletedProjectIdRaw] =
+    useState<string | null>(() =>
+      typeof window !== 'undefined'
+        ? localStorage.getItem('pendingChatId')
+        : null
+    );
+
+  // setter：更新 state + localStorage
+  const setRecentlyCompletedProjectId = (id: string | null) => {
+    if (id) {
+      localStorage.setItem('pendingChatId', id);
+    } else {
+      localStorage.removeItem('pendingChatId');
+    }
+    setRecentlyCompletedProjectIdRaw(id);
+  };
   const [chatId, setChatId] = useState<string | null>(null);
+  const [pollTime, setPollTime] = useState(Date.now());
+  const [isCreateButtonClicked, setIsCreateButtonClicked] = useState(false);
   interface ChatProjectCacheEntry {
     project: Project | null;
     timestamp: number;
@@ -149,24 +164,6 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       pendingOperations.current.clear();
     };
   }, []);
-  // Poll project data every 5 seconds
-  useEffect(() => {
-    if (!chatId) return;
-    let stopped = false;
-
-    const interval = setInterval(async () => {
-      const project = await pollChatProject(chatId);
-      if (project?.projectPath) {
-        setCurProject(project);
-        clearInterval(interval);
-        stopped = true;
-      }
-    }, 5000);
-
-    return () => {
-      if (!stopped) clearInterval(interval);
-    };
-  }, [chatId]);
 
   // Function to clean expired cache entries
   const cleanCache = useCallback(() => {
@@ -711,12 +708,12 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       prompt: string,
       isPublic: boolean,
       model = 'gpt-4o-mini'
-    ): Promise<boolean> => {
+    ): Promise<string> => {
       if (!prompt.trim()) {
         if (isMounted.current) {
           toast.error('Please enter a project description');
         }
-        return false;
+        throw new Error('Invalid prompt');
       }
 
       try {
@@ -741,21 +738,28 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
             },
           },
         });
-
-        return result.data.createProject.id;
+        const createdChat = result.data?.createProject;
+        if (createdChat?.id) {
+          setChatId(createdChat.id);
+          setIsCreateButtonClicked(true);
+          localStorage.setItem('pendingChatId', 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');
         }
-        return false;
+        throw error;
       } finally {
         if (isMounted.current) {
           setIsLoading(false);
         }
       }
     },
-    [createProject]
+    [createProject, setChatId]
   );
 
   // New function to fork a project
@@ -920,6 +924,28 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
     ]
   );
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPollTime(Date.now()); // 每6秒更新时间，触发下面的 useEffect
+    }, 6000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  // Poll project data every 5 seconds
+  useEffect(() => {
+    if (!chatId) return;
+
+    const fetch = async () => {
+      try {
+        await pollChatProject(chatId);
+      } catch (error) {
+        logger.error('Polling error:', error);
+      }
+    };
+
+    fetch();
+  }, [pollTime, chatId, isCreateButtonClicked, pollChatProject]);
   const contextValue = useMemo(
     () => ({
       projects,
@@ -941,6 +967,8 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       editorRef,
       chatId,
       setChatId,
+      recentlyCompletedProjectId: recentlyCompletedProjectIdRaw,
+      setRecentlyCompletedProjectId,
     }),
     [
       projects,
@@ -959,17 +987,12 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
       editorRef,
       chatId,
       setChatId,
+      recentlyCompletedProjectIdRaw,
     ]
   );
 
   return (
-    <ProjectContext.Provider
-      value={{
-        ...contextValue,
-        recentlyCompletedProjectId,
-        setRecentlyCompletedProjectId,
-      }}
-    >
+    <ProjectContext.Provider value={contextValue}>
       {children}
     </ProjectContext.Provider>
   );

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

@@ -1,23 +1,71 @@
-// GlobalToastListener.tsx
 'use client';
-import { useContext, useEffect } from 'react';
-import { toast } from 'sonner'; // 或你使用的 toast 库
+import { useContext, useEffect, useRef } from 'react';
+import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
 import { ProjectContext } from './chat/code-engine/project-context';
+import { logger } from '@/app/log/logger';
+import { ProjectReadyToast } from './project-ready-toast';
 
 const GlobalToastListener = () => {
-  const { recentlyCompletedProjectId, setRecentlyCompletedProjectId } =
-    useContext(ProjectContext);
+  const {
+    recentlyCompletedProjectId,
+    setRecentlyCompletedProjectId,
+    pollChatProject,
+    setChatId,
+  } = useContext(ProjectContext);
+  const router = useRouter();
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // optional: if you use this in your logic
+  const setCurrentChatid = (id: string) => {}; // or import your actual setter
 
   useEffect(() => {
-    if (recentlyCompletedProjectId) {
-      toast.success('Project is ready! 🎉');
+    if (!recentlyCompletedProjectId) return;
+
+    const checkProjectReady = async () => {
+      try {
+        const project = await pollChatProject(recentlyCompletedProjectId);
+
+        if (project?.projectPath) {
+          toast.custom(
+            (t) => (
+              <ProjectReadyToast
+                chatId={recentlyCompletedProjectId}
+                close={() => toast.dismiss(t)}
+                router={router}
+                setCurrentChatid={setCurrentChatid}
+                setChatId={setChatId}
+              />
+            ),
+            {
+              duration: 30000,
+            }
+          );
+
+          setRecentlyCompletedProjectId(null);
+
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+          }
+        } else {
+          logger.debug('Project not ready yet, will retry...');
+        }
+      } catch (err) {
+        logger.error('Error polling project status:', err);
+      }
+    };
+
+    intervalRef.current = setInterval(checkProjectReady, 5000);
 
-      // 可选：重置，避免重复 toast
-      setRecentlyCompletedProjectId(null);
-    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
   }, [recentlyCompletedProjectId]);
 
-  return null; // 不渲染任何内容，只是监听
+  return null;
 };
 
 export default GlobalToastListener;

frontend/src/components/project-ready-toast.tsx

@@ -0,0 +1,57 @@
+'use client';
+import { motion } from 'framer-motion';
+import { X } from 'lucide-react';
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+import { redirectChatPage } from './chat-page-navigation';
+
+interface ProjectReadyToastProps {
+  chatId: string;
+  close: () => void;
+  router: AppRouterInstance;
+  setCurrentChatid: (id: string) => void;
+  setChatId: (id: string) => void;
+}
+
+export const ProjectReadyToast = ({
+  chatId,
+  close,
+  router,
+  setCurrentChatid,
+  setChatId,
+}: ProjectReadyToastProps) => {
+  return (
+    <motion.div
+      className="w-[360px] p-4 rounded-xl bg-green-50 dark:bg-green-900 text-green-800 dark:text-green-100 shadow-lg flex flex-col gap-2 relative"
+      initial={{ opacity: 0, y: 30, scale: 0.95 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, y: 30, scale: 0.95 }}
+      transition={{ type: 'spring', stiffness: 260, damping: 20 }}
+    >
+      {/* Close button */}
+      <button
+        onClick={close}
+        className="absolute top-2 right-2 text-green-500 hover:text-green-700 dark:hover:text-green-300"
+      >
+        <X size={18} />
+      </button>
+
+      {/* Title */}
+      <p className="text-base font-semibold text-center mt-2">
+        🎉 Project is ready!
+      </p>
+
+      {/* Centered Button */}
+      <div className="flex justify-center mt-2">
+        <button
+          onClick={() => {
+            redirectChatPage(chatId, setCurrentChatid, setChatId, router);
+            close();
+          }}
+          className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-all"
+        >
+          Open Chat
+        </button>
+      </div>
+    </motion.div>
+  );
+};