Update

resources/js/modules/editor/partials/editor-ai-sheet.jsx

@@ -10,13 +10,17 @@ import CoinIcon from '@/reusables/coin-icon';
 import useMediaStore from '@/stores/MediaStore';
 import useUserStore from '@/stores/UserStore';
 import { usePage } from '@inertiajs/react';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
+import { toast } from 'sonner';
 
 const EditorAISheet = () => {
     const [isOpen, setIsOpen] = useState(false);
     const [prompt, setPrompt] = useState('');
     const emitter = useMitt();
-    const { generateMeme, isGeneratingMeme, keywords, isLoadingAIHints, fetchAIHints } = useMediaStore();
+    const { generateMeme, isGeneratingMeme, keywords, isLoadingAIHints, fetchAIHints, checkMemeJobStatus, updateMemeResult, setGeneratingMeme } = useMediaStore();
+    
+    const pollingIntervalRef = useRef(null);
+    const currentJobIdRef = useRef(null);
 
     const { credits } = useUserStore();
     const { auth } = usePage().props;
@@ -36,14 +40,99 @@ const EditorAISheet = () => {
 
     const handleOpenChange = (open) => {
         setIsOpen(open);
-    };
-
-    const handleSend = () => {
-        if (prompt.trim()) {
-            generateMeme(prompt);
+        
+        // If sheet is being closed while generating, stop polling
+        if (!open && isGeneratingMeme) {
+            stopPolling();
         }
     };
 
+    const startPolling = (jobId) => {
+        currentJobIdRef.current = jobId;
+        
+        // Clear existing interval if any
+        if (pollingIntervalRef.current) {
+            clearInterval(pollingIntervalRef.current);
+        }
+
+        const checkJobStatus = async () => {
+            try {
+                const response = await checkMemeJobStatus(jobId);
+                
+                if (response?.success?.data) {
+                    const { status, result, error } = response.success.data;
+                    
+                    if (status === 'completed') {
+                        // Job completed successfully
+                        if (result?.generate) {
+                            updateMemeResult(result);
+                            stopPolling();
+                            toast.success('Meme generated successfully!');
+                        }
+                    } else if (status === 'failed') {
+                        // Job failed
+                        stopPolling();
+                        setGeneratingMeme(false);
+                        toast.error(error || 'Failed to generate meme');
+                    }
+                    // If status is 'pending' or 'processing', continue polling
+                }
+            } catch (error) {
+                console.error('Error checking job status:', error);
+                stopPolling();
+                setGeneratingMeme(false);
+                toast.error('Error checking meme generation status');
+            }
+        };
+
+        // Start polling every 5 seconds
+        pollingIntervalRef.current = setInterval(checkJobStatus, 5000);
+        
+        // Also check immediately
+        checkJobStatus();
+    };
+
+    const stopPolling = () => {
+        if (pollingIntervalRef.current) {
+            clearInterval(pollingIntervalRef.current);
+            pollingIntervalRef.current = null;
+        }
+        currentJobIdRef.current = null;
+    };
+
+    const handleSend = async () => {
+        if (prompt.trim()) {
+            try {
+                const response = await generateMeme(prompt);
+                if (response?.success?.data?.job_id) {
+                    startPolling(response.success.data.job_id);
+                }
+            } catch (error) {
+                // Error already handled in store
+            }
+        }
+    };
+
+    // Close sheet when generation is complete
+    useEffect(() => {
+        if (!isGeneratingMeme && isOpen && currentJobIdRef.current) {
+            // Small delay to let user see the success message
+            const timer = setTimeout(() => {
+                setIsOpen(false);
+                setPrompt('');
+            }, 1000);
+            
+            return () => clearTimeout(timer);
+        }
+    }, [isGeneratingMeme, isOpen]);
+
+    // Cleanup polling on unmount
+    useEffect(() => {
+        return () => {
+            stopPolling();
+        };
+    }, []);
+
     return (
         <Sheet open={isOpen} onOpenChange={handleOpenChange}>
             <SheetContent
@@ -116,7 +205,26 @@ const EditorAISheet = () => {
                                 </>
                             ) : (
                                 <>
-                                    <div className="text-muted-foreground text-center text-xs">Login / Signup to use AI features.</div>
+                                    <div className="text-muted-foreground text-center text-xs flex items-center justify-center gap-1">
+                                        <Button
+                                            onClick={() => emitter.emit('login')}
+                                            variant="link"
+                                            size="sm"
+                                            className="text-primary h-auto p-0 text-xs"
+                                        >
+                                            Login
+                                        </Button>
+                                        <span>/</span>
+                                        <Button
+                                            onClick={() => emitter.emit('join')}
+                                            variant="link"
+                                            size="sm"
+                                            className="text-primary h-auto p-0 text-xs"
+                                        >
+                                            Signup
+                                        </Button>
+                                        <span>to use AI features.</span>
+                                    </div>
                                 </>
                             )}
                         </div>

resources/js/stores/MediaStore.js

@@ -93,28 +93,44 @@ const useMediaStore = create(
         generateMeme: async (prompt) => {
             set({ isGeneratingMeme: true });
             try {
-                const response = await axiosInstance.post(route('api.user.generate_meme', { prompt: prompt }));
+                const response = await axiosInstance.post(route('api.user.generate_meme'), { prompt: prompt });
 
-                if (response?.data?.success?.data?.generate) {
-                    set({
-                        currentCaption: response.data.success.data.generate.caption,
-                        selectedMeme: response.data.success.data.generate.meme,
-                        selectedBackground: response.data.success.data.generate.background,
-                    });
+                if (response?.data?.success?.data?.job_id) {
+                    return response.data;
                 } else {
                     throw 'Invalid API response';
                 }
-
-                return response.data;
             } catch (error) {
-                console.error(route('api.app.generate_meme'));
                 console.error('Error generating meme:', error);
                 toast.error('Failed to generate meme');
-            } finally {
                 set({ isGeneratingMeme: false });
+                throw error;
             }
         },
 
+        checkMemeJobStatus: async (jobId) => {
+            try {
+                const response = await axiosInstance.post(route('api.user.check_meme_job_status'), { job_id: jobId });
+                return response.data;
+            } catch (error) {
+                console.error('Error checking job status:', error);
+                throw error;
+            }
+        },
+
+        updateMemeResult: (result) => {
+            set({
+                currentCaption: result.generate.caption,
+                selectedMeme: result.generate.meme,
+                selectedBackground: result.generate.background,
+                isGeneratingMeme: false,
+            });
+        },
+
+        setGeneratingMeme: (isGenerating) => {
+            set({ isGeneratingMeme: isGenerating });
+        },
+
         // Fetch memes (overlays)
         fetchMemes: async () => {
             set({ isFetchingMemes: true });
@@ -175,6 +191,7 @@ const useMediaStore = create(
                 isFetchingBackgrounds: false,
                 selectedMeme: null,
                 selectedBackground: null,
+                isGeneratingMeme: false,
             });
         },
     })),