fix: toggle home agent composer mode

components/home/lovart-home.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { signIn, signOut } from "next-auth/react";
 import { useTheme } from "next-themes";
@@ -443,7 +443,11 @@ export function LovartHome({
     imageSize: "2K",
     imageCount: 1,
   });
-  const [composerModelId, setComposerModelId] = useState("auto");
+  const [composerModelId, setComposerModelId] = useState("");
+  const [hasComposerModelInteracted, setHasComposerModelInteracted] =
+    useState(false);
+  const [isComposerAgentModeActive, setIsComposerAgentModeActive] =
+    useState(false);
   const [loginDialogOpen, setLoginDialogOpen] = useState(false);
   const [loginEmail, setLoginEmail] = useState("");
   const [loginPassword, setLoginPassword] = useState("");
@@ -699,9 +703,12 @@ export function LovartHome({
     });
     return [autoComposerModel, ...imageModels];
   }, [autoComposerModel, modelsData?.models]);
+  const fallbackComposerModel =
+    composerModelOptions.find((model) => model.id !== "auto") ||
+    autoComposerModel;
   const selectedComposerModel =
     composerModelOptions.find((model) => model.id === composerModelId) ||
-    autoComposerModel;
+    fallbackComposerModel;
   const isMembershipEnabled = siteSettingsData?.membershipConfig?.enabled !== false;
 
   const discoveryTabs = useMemo(() => {
@@ -942,11 +949,43 @@ export function LovartHome({
   }, []);
 
   useEffect(() => {
+    const fallbackModelId = fallbackComposerModel.id || "auto";
+
+    if (
+      !hasComposerModelInteracted &&
+      !isComposerAgentModeActive &&
+      composerModelId === "auto" &&
+      fallbackModelId !== "auto"
+    ) {
+      setComposerModelId(fallbackModelId);
+      return;
+    }
+
     if (composerModelOptions.some((model) => model.id === composerModelId)) {
       return;
     }
-    setComposerModelId("auto");
-  }, [composerModelId, composerModelOptions]);
+
+    setComposerModelId(fallbackModelId);
+  }, [
+    composerModelId,
+    composerModelOptions,
+    fallbackComposerModel.id,
+    hasComposerModelInteracted,
+    isComposerAgentModeActive,
+  ]);
+
+  const handleComposerModelChange = useCallback((modelId: string) => {
+    setHasComposerModelInteracted(true);
+    setIsComposerAgentModeActive(modelId === "auto");
+    setComposerModelId(modelId);
+  }, []);
+
+  const toggleComposerAgentMode = useCallback(() => {
+    setHasComposerModelInteracted(true);
+    const nextIsActive = !isComposerAgentModeActive;
+    setIsComposerAgentModeActive(nextIsActive);
+    setComposerModelId(nextIsActive ? "auto" : fallbackComposerModel.id || "");
+  }, [fallbackComposerModel.id, isComposerAgentModeActive]);
 
   useEffect(() => {
     if (!featuredLoadMoreRef.current || !hasMoreFeatured) return;
@@ -1340,7 +1379,9 @@ export function LovartHome({
             attachments: uploadedAttachments,
             autoSend: true,
             createdAt: Date.now(),
-            selectedModelId: selectedComposerModel.id || "auto",
+            selectedModelId: isComposerAgentModeActive
+              ? "auto"
+              : selectedComposerModel.id || fallbackComposerModel.id || "",
             imageParams,
           })
         );
@@ -1791,11 +1832,12 @@ export function LovartHome({
             heroSubtitleText={heroSubtitleText}
             heroTitleText={heroTitleText}
             homeAnimationData={homeAnimationData}
+            isAgentModeActive={isComposerAgentModeActive}
             isMembershipEnabled={isMembershipEnabled}
             isSubmitting={isSubmitting}
             modelOptions={composerModelOptions}
-            onModelChange={setComposerModelId}
-            onStartAgentMode={() => setComposerModelId("auto")}
+            onModelChange={handleComposerModelChange}
+            onStartAgentMode={toggleComposerAgentMode}
             onSubmit={createCanvasFromComposer}
             openUpgradeDialog={() => setUpgradeDialogOpen(true)}
             prompt={prompt}

components/home/lovart/lovart-hero-composer.tsx

@@ -9,6 +9,7 @@ import {
   SelectTrigger,
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
 import type { ModelOption, UploadFileItem } from "./types";
 import type { PROMPT_TAGS } from "./utils";
 
@@ -28,6 +29,7 @@ type LovartHeroComposerProps = {
     htmlContent?: string;
     fileName?: string;
   };
+  isAgentModeActive: boolean;
   isMembershipEnabled: boolean;
   isSubmitting: boolean;
   onSubmit: () => void;
@@ -54,6 +56,7 @@ export function LovartHeroComposer({
   heroSubtitleText,
   heroTitleText,
   homeAnimationData,
+  isAgentModeActive,
   isMembershipEnabled,
   isSubmitting,
   onSubmit,
@@ -153,7 +156,12 @@ export function LovartHeroComposer({
           <div className="flex h-11 items-center gap-5 pl-2">
             <button
               type="button"
-              className="grid h-9 w-9 shrink-0 place-items-center rounded-full p-0 text-[#20242a] leading-none hover:bg-black/5 focus:outline-none focus:ring-0 dark:text-white/72 dark:hover:bg-white/8"
+              className={cn(
+                "grid h-9 w-9 shrink-0 place-items-center rounded-full p-0 leading-none transition-colors focus:outline-none focus:ring-0",
+                isAgentModeActive
+                  ? "bg-[#eaf1ff] text-[#2563eb] shadow-[inset_0_0_0_1px_rgba(37,99,235,0.16)] dark:bg-[#102042] dark:text-[#8db4ff] dark:shadow-[inset_0_0_0_1px_rgba(141,180,255,0.18)]"
+                  : "text-[#20242a] hover:bg-black/5 dark:text-white/72 dark:hover:bg-white/8"
+              )}
               aria-label="开启 Agent 模式"
               onClick={onStartAgentMode}
               title="开启 Agent 模式"
@@ -163,12 +171,12 @@ export function LovartHeroComposer({
             <Select value={selectedModelId} onValueChange={onModelChange}>
               <SelectTrigger
                 aria-label="选择模型"
-                className="grid h-9 w-9 shrink-0 place-items-center rounded-full border-0 bg-transparent p-0 text-[#20242a] leading-none shadow-none hover:bg-black/5 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-white/72 dark:hover:bg-white/8 [&>svg]:hidden"
+                className="!flex !h-9 !w-9 shrink-0 !items-center !justify-center rounded-full border-0 !bg-transparent !p-0 text-[#20242a] leading-none shadow-none hover:bg-black/5 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-white/72 dark:hover:bg-white/8 [&>svg]:hidden"
                 title="选择模型"
               >
-                <span className="grid h-full w-full place-items-center">
+                <div className="flex h-9 w-9 items-center justify-center">
                   <Box className="block h-5 w-5" />
-                </span>
+                </div>
               </SelectTrigger>
               <SelectContent
                 align="end"