"use client" import { useEffect, useState } from "react" import { useSearchParams } from "next/navigation" import Image from "next/image" import { StaticImageData } from "next/image" import { useLocalStorage } from "usehooks-ts" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { cn } from "@/lib/utils" import { FontName, defaultFont } from "@/lib/fonts" import { Input } from "@/components/ui/input" import { PresetName, defaultPreset, nonRandomPresets, presets } from "@/app/engine/presets" import { useStore } from "@/app/store" import { Button } from "@/components/ui/button" import { LayoutName, allLayoutLabels, defaultLayout, nonRandomLayouts } from "@/app/layouts" import { Switch } from "@/components/ui/switch" import { useOAuth } from "@/lib/useOAuth" import layoutPreview0 from "../../../../public/layouts/layout0.jpg" import layoutPreview1 from "../../../../public/layouts/layout1.jpg" import layoutPreview2 from "../../../../public/layouts/layout2.jpg" import layoutPreview3 from "../../../../public/layouts/layout3.jpg" import { localStorageKeys } from "../settings-dialog/localStorageKeys" import { defaultSettings } from "../settings-dialog/defaultSettings" import { AuthWall } from "../auth-wall" const layoutIcons: Partial> = { Layout0: layoutPreview0, Layout1: layoutPreview1, Layout2: layoutPreview2, Layout3: layoutPreview3, Layout4: undefined, } export function TopMenu() { // const font = useStore(state => state.font) // const setFont = useStore(state => state.setFont) const preset = useStore(state => state.preset) const prompt = useStore(state => state.prompt) const layout = useStore(state => state.layout) const setLayout = useStore(state => state.setLayout) const setShowCaptions = useStore(state => state.setShowCaptions) const showCaptions = useStore(state => state.showCaptions) const generate = useStore(state => state.generate) const isGeneratingStory = useStore(state => state.isGeneratingStory) const atLeastOnePanelIsBusy = useStore(state => state.atLeastOnePanelIsBusy) const isBusy = isGeneratingStory || atLeastOnePanelIsBusy const [lastDraftPromptA, setLastDraftPromptA] = useLocalStorage( "AI_COMIC_FACTORY_LAST_DRAFT_PROMPT_A", "" ) const [lastDraftPromptB, setLastDraftPromptB] = useLocalStorage( "AI_COMIC_FACTORY_LAST_DRAFT_PROMPT_B", "" ) const searchParams = useSearchParams() const requestedPreset = (searchParams?.get('preset') as PresetName) || defaultPreset const requestedFont = (searchParams?.get('font') as FontName) || defaultFont const requestedPrompt = (searchParams?.get('prompt') as string) || "" const requestedLayout = (searchParams?.get('layout') as LayoutName) || defaultLayout const [draftPromptA, setDraftPromptA] = useState(lastDraftPromptA) const [draftPromptB, setDraftPromptB] = useState(lastDraftPromptB) const draftPrompt = `${draftPromptA}||${draftPromptB}` const [draftPreset, setDraftPreset] = useState(requestedPreset) const [draftLayout, setDraftLayout] = useState(requestedLayout) const { isLoggedIn, enableOAuthWall } = useOAuth({ debug: false }) const [hasGeneratedAtLeastOnce, setHasGeneratedAtLeastOnce] = useLocalStorage( localStorageKeys.hasGeneratedAtLeastOnce, defaultSettings.hasGeneratedAtLeastOnce ) const [showAuthWall, setShowAuthWall] = useState(false) // we synchronize the draft prompt with the local storage useEffect(() => { if (lastDraftPromptA !== draftPromptA) { setLastDraftPromptA(draftPromptA) } }, [draftPromptA]) useEffect(() => { if (lastDraftPromptA !== draftPromptA) { setDraftPromptA(lastDraftPromptA) } }, [lastDraftPromptA]) useEffect(() => { if (lastDraftPromptB !== draftPromptB) { setLastDraftPromptB(draftPromptB) } }, [draftPromptB]) useEffect(() => { if (lastDraftPromptB !== draftPromptB) { setDraftPromptB(lastDraftPromptB) } }, [lastDraftPromptB]) const handleSubmit = () => { if (enableOAuthWall && hasGeneratedAtLeastOnce && !isLoggedIn) { setShowAuthWall(true) return } const promptChanged = draftPrompt.trim() !== prompt.trim() const presetChanged = draftPreset !== preset.id const layoutChanged = draftLayout !== layout if (!isBusy && (promptChanged || presetChanged || layoutChanged)) { generate(draftPrompt, draftPreset, draftLayout) } } useEffect(() => { const layoutChanged = draftLayout !== layout if (layoutChanged && !isBusy) { setLayout(draftLayout) } }, [layout, draftLayout, isBusy]) return (
{/* */}
{/* */}
{/*
*/}
{ setDraftPromptB(e.target.value) }} onKeyDown={({ key }) => { if (key === 'Enter') { handleSubmit() } }} value={draftPromptB} /> { setDraftPromptA(e.target.value) }} onKeyDown={({ key }) => { if (key === 'Enter') { handleSubmit() } }} value={draftPromptA} />
{/* Let's add this feature later, because right now people are confused about why they can't activate it
*/}
) }