fix(desktop): debounce workflow deeplink generation (#24)

Co-authored-by: 梅西 <messi-agent@users.noreply.github.com>

Author: earayu

ui/desktop/src/components/recipes/CreateEditRecipeModal.tsx

@@ -339,6 +339,7 @@ export default function CreateEditRecipeModal({
   // Generate deeplink whenever recipe configuration changes
   useEffect(() => {
     let isCancelled = false;
+    const abortController = new AbortController();
 
     const generateLink = async () => {
       if (
@@ -353,11 +354,14 @@ export default function CreateEditRecipeModal({
       setIsGeneratingDeeplink(true);
       try {
         const currentRecipe = getCurrentRecipe();
-        const link = await generateDeepLink(currentRecipe);
+        const link = await generateDeepLink(currentRecipe, abortController.signal);
         if (!isCancelled) {
           setDeeplink(link);
         }
       } catch (error) {
+        if (abortController.signal.aborted) {
+          return;
+        }
         console.error('Failed to generate deeplink:', error);
         if (!isCancelled) {
           setDeeplink('Error generating deeplink');
@@ -369,10 +373,12 @@ export default function CreateEditRecipeModal({
       }
     };
 
-    generateLink();
+    const timeoutId = window.setTimeout(generateLink, 500);
 
     return () => {
       isCancelled = true;
+      abortController.abort();
+      window.clearTimeout(timeoutId);
     };
   }, [
     title,

ui/desktop/src/recipe/index.ts

@@ -15,10 +15,13 @@ export type Recipe = import('../api').Recipe & {
   isScheduledExecution?: boolean;
 };
 
-export async function encodeRecipe(recipe: Recipe): Promise<string> {
+type ApiSignal = Parameters<typeof apiEncodeRecipe>[0]['signal'];
+
+export async function encodeRecipe(recipe: Recipe, signal?: ApiSignal): Promise<string> {
   try {
     const response = await apiEncodeRecipe({
       body: { recipe },
+      signal,
     });
 
     if (!response.data) {
@@ -71,8 +74,8 @@ export async function scanRecipe(recipe: Recipe): Promise<{ has_security_warning
   }
 }
 
-export async function generateDeepLink(recipe: Recipe): Promise<string> {
-  const encoded = await encodeRecipe(recipe);
+export async function generateDeepLink(recipe: Recipe, signal?: ApiSignal): Promise<string> {
+  const encoded = await encodeRecipe(recipe, signal);
   return `goose://recipe?config=${encoded}`;
 }