131 lines
5.8 KiB
JavaScript
131 lines
5.8 KiB
JavaScript
'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 } from 'react';
|
|
|
|
const EditorAISheet = () => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [prompt, setPrompt] = useState('');
|
|
const emitter = useMitt();
|
|
const { generateMeme, isGeneratingMeme, keywords, isLoadingAIHints, fetchAIHints } = useMediaStore();
|
|
|
|
const { credits } = useUserStore();
|
|
const { auth } = usePage().props;
|
|
|
|
useEffect(() => {
|
|
const openSheetListener = () => {
|
|
setIsOpen(true);
|
|
fetchAIHints();
|
|
};
|
|
|
|
emitter.on('open-ai-editor-sheet', openSheetListener);
|
|
|
|
return () => {
|
|
emitter.off('open-ai-editor-sheet', openSheetListener);
|
|
};
|
|
}, [emitter, fetchAIHints]);
|
|
|
|
const handleOpenChange = (open) => {
|
|
setIsOpen(open);
|
|
};
|
|
|
|
const handleSend = () => {
|
|
if (prompt.trim()) {
|
|
generateMeme(prompt);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Sheet open={isOpen} onOpenChange={handleOpenChange}>
|
|
<SheetContent
|
|
side="bottom"
|
|
className={cn('gap-0! rounded-t-4xl pb-1', isGeneratingMeme && '[&>button]:hidden')}
|
|
onInteractOutside={(e) => isGeneratingMeme && e.preventDefault()}
|
|
onEscapeKeyDown={(e) => isGeneratingMeme && e.preventDefault()}
|
|
>
|
|
<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>
|
|
<SheetDescription className="hidden"></SheetDescription>
|
|
</SheetHeader>
|
|
|
|
<div className="mx-auto w-full max-w-[600px] space-y-4 px-4 pb-4">
|
|
<div className="space-y-3">
|
|
<Input
|
|
disabled={isGeneratingMeme}
|
|
placeholder="Make a meme for e.g. work life stress"
|
|
value={prompt}
|
|
onChange={(e) => setPrompt(e.target.value)}
|
|
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 && (
|
|
<div className="flex flex-wrap justify-center gap-2">
|
|
{keywords.map((keyword, index) => (
|
|
<Button
|
|
disabled={isGeneratingMeme}
|
|
key={index}
|
|
variant="secondary"
|
|
size="sm"
|
|
className="h-auto rounded-full px-3 py-1 text-xs"
|
|
onClick={() => setPrompt(keyword)}
|
|
>
|
|
{keyword}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className={cn('space-y-2', !prompt.trim() && 'invisible')}>
|
|
{auth.user ? (
|
|
<>
|
|
<Button
|
|
onClick={handleSend}
|
|
className={cn('w-full rounded-full')}
|
|
size="lg"
|
|
variant="outline"
|
|
disabled={!prompt.trim() || isGeneratingMeme}
|
|
>
|
|
{isGeneratingMeme ? (
|
|
<Spinner className="text-primary h-4 w-4" />
|
|
) : (
|
|
<>
|
|
Generate Meme
|
|
<div className="flex items-center gap-1">
|
|
<CoinIcon></CoinIcon> 2
|
|
</div>
|
|
</>
|
|
)}
|
|
</Button>
|
|
<div className="text-muted-foreground text-center text-xs">
|
|
A new meme costs 1 credit for AI captions & 1 credit for AI background.{' '}
|
|
</div>
|
|
<div className="text-muted-foreground text-center text-xs">You have {credits} credits remaining.</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="text-muted-foreground text-center text-xs">Login / Signup to use AI features.</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
};
|
|
|
|
export default EditorAISheet;
|