From 6bd004d86804c4054b7034379070c2f18779fa6b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:09:05 +1000
Subject: [PATCH] fix(ui): clear ref images when recalling all

Closes #8202
---
 .../features/controlLayers/store/refImagesSlice.ts   | 12 ++++++++----
 .../frontend/web/src/features/metadata/parsing.tsx   | 10 +++++-----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/store/refImagesSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/refImagesSlice.ts
index cedb328e2a..91ea0cc2b6 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/refImagesSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/refImagesSlice.ts
@@ -53,9 +53,13 @@ export const refImagesSlice = createSlice({
         payload: { ...payload, id: getPrefixedId('reference_image') },
       }),
     },
-    refImageRecalled: (state, action: PayloadAction<{ data: RefImageState }>) => {
-      const { data } = action.payload;
-      state.entities.push(data);
+    refImagesRecalled: (state, action: PayloadAction<{ entities: RefImageState[]; replace: boolean }>) => {
+      const { entities, replace } = action.payload;
+      if (replace) {
+        state.entities = entities;
+      } else {
+        state.entities.push(...entities);
+      }
     },
     refImageImageChanged: (state, action: PayloadActionWithId<{ imageDTO: ImageDTO | null }>) => {
       const { id, imageDTO } = action.payload;
@@ -256,7 +260,7 @@ export const {
   refImageIPAdapterBeginEndStepPctChanged,
   refImageFLUXReduxImageInfluenceChanged,
   refImageIsEnabledToggled,
-  refImageRecalled,
+  refImagesRecalled,
 } = refImagesSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
diff --git a/invokeai/frontend/web/src/features/metadata/parsing.tsx b/invokeai/frontend/web/src/features/metadata/parsing.tsx
index 62bfdaacf7..63103f9715 100644
--- a/invokeai/frontend/web/src/features/metadata/parsing.tsx
+++ b/invokeai/frontend/web/src/features/metadata/parsing.tsx
@@ -32,7 +32,7 @@ import {
   shouldConcatPromptsChanged,
   vaeSelected,
 } from 'features/controlLayers/store/paramsSlice';
-import { refImageRecalled } from 'features/controlLayers/store/refImagesSlice';
+import { refImagesRecalled } from 'features/controlLayers/store/refImagesSlice';
 import type { CanvasMetadata, LoRA, RefImageState } from 'features/controlLayers/store/types';
 import { zCanvasMetadata, zCanvasReferenceImageState_OLD, zRefImageState } from 'features/controlLayers/store/types';
 import type { ModelIdentifierField } from 'features/nodes/types/common';
@@ -797,12 +797,12 @@ const RefImages: CollectionMetadataHandler<RefImageState[]> = {
     }
   },
   recall: (value, store) => {
-    for (const data of value) {
-      store.dispatch(refImageRecalled({ data: { ...data, id: getPrefixedId('reference_image') } }));
-    }
+    const entities = value.map((data) => ({ ...data, id: getPrefixedId('reference_image') }));
+    store.dispatch(refImagesRecalled({ entities, replace: true }));
   },
   recallOne: (data, store) => {
-    store.dispatch(refImageRecalled({ data: { ...data, id: getPrefixedId('reference_image') } }));
+    const entities = [{ ...data, id: getPrefixedId('reference_image') }];
+    store.dispatch(refImagesRecalled({ entities, replace: false }));
   },
   LabelComponent: () => <MetadataLabel i18nKey="controlLayers.referenceImage" />,
   ValueComponent: ({ value }: CollectionMetadataValueProps<RefImageState[]>) => {