From c15a68385a3733da257a0ea51f10aee2e6d5e36d Mon Sep 17 00:00:00 2001
From: 134 <a134@134deMacBook-Pro.local>
Date: Tue, 23 Jun 2026 18:41:23 +0800
Subject: [PATCH] fix: reset canvas add image dialog state

---
 components/canvas/CanvasAddImageDialog.tsx | 33 ++++++++++++++++++----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/components/canvas/CanvasAddImageDialog.tsx b/components/canvas/CanvasAddImageDialog.tsx
index 030bb9403..99fcc9e52 100644
--- a/components/canvas/CanvasAddImageDialog.tsx
+++ b/components/canvas/CanvasAddImageDialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Check, ImageIcon, ImagePlus, Loader2, Search, X } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { AgentPreviewImage } from "@/components/agents/AgentPreviewImage";
 import { Button } from "@/components/ui/button";
 import {
@@ -172,6 +172,29 @@ export function CanvasAddImageDialog({
     [images, selectedImageIds]
   );
 
+  const resetDialogState = useCallback(() => {
+    setQuery("");
+    setQueryMode("spu");
+    setResult(null);
+    setSelectedImageIds([]);
+    setErrorText(null);
+  }, []);
+
+  const handleDialogOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) {
+        resetDialogState();
+      }
+      onOpenChange(nextOpen);
+    },
+    [onOpenChange, resetDialogState]
+  );
+
+  const closeDialog = useCallback(() => {
+    resetDialogState();
+    onOpenChange(false);
+  }, [onOpenChange, resetDialogState]);
+
   const handleSearch = async (nextQuery?: string, nextMode?: AgentWorkflowMaterialQueryType) => {
     if (!materialSearchEnabled) return;
     const keyword = String(nextQuery ?? query).trim();
@@ -234,14 +257,14 @@ export function CanvasAddImageDialog({
     try {
       setIsAdding(true);
       await onAddImages(selectedImages);
-      onOpenChange(false);
+      closeDialog();
     } finally {
       setIsAdding(false);
     }
   };
 
   return (
-    <Dialog onOpenChange={onOpenChange} open={open}>
+    <Dialog onOpenChange={handleDialogOpenChange} open={open}>
       <DialogContent className="max-h-[86vh] max-w-4xl overflow-hidden p-0">
         <DialogHeader className="border-b px-6 pt-5 pb-4">
           <DialogTitle className="flex items-center gap-2">
@@ -260,7 +283,7 @@ export function CanvasAddImageDialog({
                 className="h-11 justify-start gap-2 rounded-xl"
                 onClick={() => {
                   onCreateBlankImage();
-                  onOpenChange(false);
+                  closeDialog();
                 }}
                 type="button"
                 variant="secondary"
@@ -417,7 +440,7 @@ export function CanvasAddImageDialog({
 
         <DialogFooter className="border-t px-6 py-4">
           <Button
-            onClick={() => onOpenChange(false)}
+            onClick={closeDialog}
             type="button"
             variant="outline"
           >