update

resources/js/modules/editor/editor.jsx

@@ -11,6 +11,7 @@ import '@/modules/editor/fonts';
 import UpgradeSheet from '../upgrade/upgrade-sheet';
 import EditNavSidebar from './partials/edit-nav-sidebar';
 import EditSidebar from './partials/edit-sidebar';
+import EditorAISheet from './partials/editor-ai-sheet';
 import EditorCanvas from './partials/editor-canvas';
 import EditorControls from './partials/editor-controls';
 import EditorHeader from './partials/editor-header';
@@ -218,6 +219,7 @@ const Editor = () => {
                 )}
             </div>
             <UpgradeSheet />
+            <EditorAISheet />
         </>
     );
 };

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

@@ -0,0 +1,74 @@
+'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 { cn } from '@/lib/utils';
+import { useMitt } from '@/plugins/MittContext';
+import CoinIcon from '@/reusables/coin-icon';
+import { useEffect, useState } from 'react';
+
+const EditorAISheet = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [prompt, setPrompt] = useState('');
+    const emitter = useMitt();
+
+    useEffect(() => {
+        const openSheetListener = () => {
+            setIsOpen(true);
+        };
+
+        emitter.on('open-ai-editor-sheet', openSheetListener);
+
+        return () => {
+            emitter.off('open-ai-editor-sheet', openSheetListener);
+        };
+    }, [emitter]);
+
+    const handleOpenChange = (open) => {
+        setIsOpen(open);
+    };
+
+    const handleSend = () => {
+        if (prompt.trim()) {
+            console.log('Sending prompt:', prompt);
+            setPrompt('');
+        }
+    };
+
+    return (
+        <Sheet open={isOpen} onOpenChange={handleOpenChange}>
+            <SheetContent side="bottom" className="gap-0! rounded-t-4xl pb-1">
+                <SheetHeader className="mb-2">
+                    <SheetTitle className="text-center text-2xl font-semibold">What can I help with?</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
+                            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-base"
+                        />
+                        <Button
+                            onClick={handleSend}
+                            className={cn('w-full rounded-full', !prompt.trim() && 'invisible')}
+                            size="lg"
+                            variant="outline"
+                            disabled={!prompt.trim()}
+                        >
+                            Generate Meme
+                            <div className="flex items-center gap-1">
+                                <CoinIcon></CoinIcon> 1
+                            </div>
+                        </Button>
+                    </div>
+                </div>
+            </SheetContent>
+        </Sheet>
+    );
+};
+
+export default EditorAISheet;

resources/js/modules/editor/partials/editor-controls.jsx

@@ -22,6 +22,10 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
         emitter.emit('video-open-download-modal');
     };
 
+    const handleAIButton = () => {
+        emitter.emit('open-ai-editor-sheet');
+    };
+
     const togglePlayPause = () => {
         if (videoIsPlaying) {
             handleReset();
@@ -62,7 +66,7 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
                 <Share2 className="h-8 w-8" />
             </Button> */}
 
-            <Button variant="outline" size="icon" className="font-display h-12 w-12 rounded-full border font-bold shadow-sm">
+            <Button onClick={handleAIButton} variant="outline" size="icon" className="font-display h-12 w-12 rounded-full border font-bold shadow-sm">
                 AI
             </Button>