fix(ui): clear prompt template when prompts are recalled

invokeai/frontend/web/public/locales/en.json

@@ -1723,6 +1723,7 @@
         "positivePrompt": "Positive Prompt",
         "preview": "Preview",
         "private": "Private",
+        "promptTemplateCleared": "Prompt Template Cleared",
         "searchByName": "Search by name",
         "shared": "Shared",
         "sharedTemplates": "Shared Templates",

invokeai/frontend/web/src/features/gallery/hooks/useImageActions.ts

@@ -1,14 +1,20 @@
 import { skipToken } from '@reduxjs/toolkit/query';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { handlers, parseAndRecallAllMetadata, parseAndRecallPrompts } from 'features/metadata/util/handlers';
 import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
+import { activeStylePresetIdChanged } from 'features/stylePresets/store/stylePresetSlice';
+import { toast } from 'features/toast/toast';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
 
 export const useImageActions = (image_name?: string) => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
   const activeTabName = useAppSelector(activeTabNameSelector);
+  const activeStylePresetId = useAppSelector((s) => s.stylePreset.activeStylePresetId);
   const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata(image_name);
   const [hasMetadata, setHasMetadata] = useState(false);
   const [hasSeed, setHasSeed] = useState(false);
@@ -46,14 +52,26 @@ export const useImageActions = (image_name?: string) => {
     parseMetadata();
   }, [metadata]);
 
+  const clearStylePreset = useCallback(() => {
+    if (activeStylePresetId) {
+      dispatch(activeStylePresetIdChanged(null));
+      toast({
+        status: 'info',
+        title: t('stylePresets.promptTemplateCleared'),
+      });
+    }
+  }, [dispatch, activeStylePresetId, t]);
+
   const recallAll = useCallback(() => {
     parseAndRecallAllMetadata(metadata, activeTabName === 'generation');
-  }, [activeTabName, metadata]);
+    clearStylePreset();
+  }, [activeTabName, metadata, clearStylePreset]);
 
   const remix = useCallback(() => {
     // Recalls all metadata parameters except seed
     parseAndRecallAllMetadata(metadata, activeTabName === 'generation', ['seed']);
-  }, [activeTabName, metadata]);
+    clearStylePreset();
+  }, [activeTabName, metadata, clearStylePreset]);
 
   const recallSeed = useCallback(() => {
     handlers.seed.parse(metadata).then((seed) => {
@@ -63,7 +81,8 @@ export const useImageActions = (image_name?: string) => {
 
   const recallPrompts = useCallback(() => {
     parseAndRecallPrompts(metadata);
-  }, [metadata]);
+    clearStylePreset();
+  }, [metadata, clearStylePreset]);
 
   const createAsPreset = useCallback(async () => {
     if (image_name && metadata && imageDTO) {