This commit is contained in:
ct
2025-07-04 20:35:03 +08:00
parent 292d817e97
commit c8882e31e6
13 changed files with 364 additions and 65 deletions

View File

@@ -1,24 +1,30 @@
'use client';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Spinner } from '@/components/ui/spinner';
import { cn } from '@/lib/utils';
import { useMitt } from '@/plugins/MittContext';
import CoinIcon from '@/reusables/coin-icon';
import useMediaStore from '@/stores/MediaStore';
import useUserStore from '@/stores/UserStore';
import { usePage } from '@inertiajs/react';
import { useEffect, useState, useRef } from 'react';
import { useEffect, useRef, useState } 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, checkMemeJobStatus, updateMemeResult, setGeneratingMeme, checkActiveJob } = useMediaStore();
const {
generateMeme,
isGeneratingMeme,
keywords,
isLoadingAIHints,
fetchAIHints,
checkMemeJobStatus,
updateMemeResult,
setGeneratingMeme,
checkActiveJob,
} = useMediaStore();
const pollingIntervalRef = useRef(null);
const currentJobIdRef = useRef(null);
@@ -50,7 +56,7 @@ const EditorAISheet = () => {
const response = await checkActiveJob();
if (response?.success?.data) {
const { job_id, status, result } = response.success.data;
if (status === 'pending' || status === 'processing') {
// Resume polling for active job
setGeneratingMeme(true);
@@ -70,7 +76,7 @@ const EditorAISheet = () => {
const handleOpenChange = (open) => {
setIsOpen(open);
// If sheet is being closed while generating, stop polling
if (!open && isGeneratingMeme) {
stopPolling();
@@ -79,7 +85,7 @@ const EditorAISheet = () => {
const startPolling = (jobId) => {
currentJobIdRef.current = jobId;
// Clear existing interval if any
if (pollingIntervalRef.current) {
clearInterval(pollingIntervalRef.current);
@@ -88,10 +94,10 @@ const EditorAISheet = () => {
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) {
@@ -117,7 +123,7 @@ const EditorAISheet = () => {
// Start polling every 5 seconds
pollingIntervalRef.current = setInterval(checkJobStatus, 5000);
// Also check immediately
checkJobStatus();
};
@@ -151,7 +157,7 @@ const EditorAISheet = () => {
setIsOpen(false);
setPrompt('');
}, 1000);
return () => clearTimeout(timer);
}
}, [isGeneratingMeme, isOpen]);
@@ -172,6 +178,11 @@ const EditorAISheet = () => {
onEscapeKeyDown={(e) => isGeneratingMeme && e.preventDefault()}
>
<SheetHeader className="mb-2 px-5">
<SheetTitle className="text-center text-xl font-semibold text-balance">AI features coming soon!</SheetTitle>
<SheetDescription className="hidden"></SheetDescription>
</SheetHeader>
{/* <SheetHeader className="mb-2 px-5">
<SheetTitle className="text-center text-xl font-semibold text-balance">
{isGeneratingMeme ? 'Creating...' : 'What meme would you like to create?'}
</SheetTitle>
@@ -188,7 +199,6 @@ const EditorAISheet = () => {
className="bg-muted/30 max-h-20 min-h-12 resize-none rounded-3xl border-0 p-4 text-center text-base"
/>
{/* AI Keywords */}
{isLoadingAIHints && <div className="text-muted-foreground text-center text-sm">Loading AI hints...</div>}
{keywords.length > 0 && !isLoadingAIHints && (
@@ -259,7 +269,7 @@ const EditorAISheet = () => {
)}
</div>
</div>
</div>
</div> */}
</SheetContent>
</Sheet>
);