feat(ui): cancel session when staging image accepted

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -68,6 +68,7 @@ import {
   addReceivedPageOfImagesRejectedListener,
 } from './listeners/receivedPageOfImages';
 import { addStagingAreaImageSavedListener } from './listeners/stagingAreaImageSaved';
+import { addCommitStagingAreaImageListener } from './listeners/addCommitStagingAreaImageListener';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -125,6 +126,7 @@ addCanvasDownloadedAsImageListener();
 addCanvasCopiedToClipboardListener();
 addCanvasMergedListener();
 addStagingAreaImageSavedListener();
+addCommitStagingAreaImageListener();
 
 /**
  * Socket.IO Events - these handle SIO events directly and pass on internal application actions.

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts

@@ -0,0 +1,37 @@
+import { startAppListening } from '..';
+import { log } from 'app/logging/useLogger';
+import { commitStagingAreaImage } from 'features/canvas/store/canvasSlice';
+import { sessionCanceled } from 'services/thunks/session';
+
+const moduleLog = log.child({ namespace: 'canvas' });
+
+export const addCommitStagingAreaImageListener = () => {
+  startAppListening({
+    actionCreator: commitStagingAreaImage,
+    effect: async (action, { dispatch, getState }) => {
+      const state = getState();
+      const { sessionId } = state.system;
+      const canvasSessionId = action.payload;
+
+      if (!canvasSessionId) {
+        moduleLog.debug('No canvas session, skipping cancel');
+        return;
+      }
+
+      if (canvasSessionId !== sessionId) {
+        moduleLog.debug(
+          {
+            data: {
+              canvasSessionId,
+              sessionId,
+            },
+          },
+          'Canvas session does not match global session, skipping cancel'
+        );
+        return;
+      }
+
+      dispatch(sessionCanceled({ sessionId }));
+    },
+  });
+};

invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx

@@ -32,7 +32,7 @@ const selector = createSelector(
   (canvas) => {
     const {
       layerState: {
-        stagingArea: { images, selectedImageIndex },
+        stagingArea: { images, selectedImageIndex, sessionId },
       },
       shouldShowStagingOutline,
       shouldShowStagingImage,
@@ -45,6 +45,7 @@ const selector = createSelector(
       isOnLastImage: selectedImageIndex === images.length - 1,
       shouldShowStagingImage,
       shouldShowStagingOutline,
+      sessionId,
     };
   },
   {
@@ -61,6 +62,7 @@ const IAICanvasStagingAreaToolbar = () => {
     isOnLastImage,
     currentStagingAreaImage,
     shouldShowStagingImage,
+    sessionId,
   } = useAppSelector(selector);
 
   const { t } = useTranslation();
@@ -106,9 +108,20 @@ const IAICanvasStagingAreaToolbar = () => {
     }
   );
 
-  const handlePrevImage = () => dispatch(prevStagingAreaImage());
-  const handleNextImage = () => dispatch(nextStagingAreaImage());
-  const handleAccept = () => dispatch(commitStagingAreaImage());
+  const handlePrevImage = useCallback(
+    () => dispatch(prevStagingAreaImage()),
+    [dispatch]
+  );
+
+  const handleNextImage = useCallback(
+    () => dispatch(nextStagingAreaImage()),
+    [dispatch]
+  );
+
+  const handleAccept = useCallback(
+    () => dispatch(commitStagingAreaImage(sessionId)),
+    [dispatch, sessionId]
+  );
 
   if (!currentStagingAreaImage) return null;
 

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -696,7 +696,10 @@ export const canvasSlice = createSlice({
         0
       );
     },
-    commitStagingAreaImage: (state) => {
+    commitStagingAreaImage: (
+      state,
+      action: PayloadAction<string | undefined>
+    ) => {
       if (!state.layerState.stagingArea.images.length) {
         return;
       }