update

app/Http/Controllers/UserAIController.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class UserAIController extends Controller
+{
+    public function aiHints()
+    {
+        // TODO: Take 5 Category where meme_angles is not null, and return a random one from the array
+    }
+}

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>
 

routes/api.php

@@ -3,6 +3,7 @@
 use App\Http\Controllers\Auth\SanctumAuthController;
 use App\Http\Controllers\FrontMediaController;
 use App\Http\Controllers\UserAccountController;
+use App\Http\Controllers\UserAIController;
 use App\Http\Controllers\UserExportController;
 use App\Http\Controllers\UserPurchaseController;
 use Illuminate\Support\Facades\Route;
@@ -14,6 +15,8 @@
 
 Route::post('/pricing', [UserPurchaseController::class, 'pricingPage'])->name('api.pricing_page');
 
+Route::post('/ai-hints', [UserAIController::class, 'aiHints'])->name('api.ai_hints');
+
 Route::middleware('auth:sanctum')->group(function () {
 
     Route::group(['prefix' => 'user'], function () {