From bdbdb22b74217cbcb60a33ed916bbabb426ef251 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Wed, 6 Nov 2024 20:32:47 -0500
Subject: [PATCH] (ui) add Canvas Alert for invocation progress messages

---
 .../CanvasAlertsInvocationProgress.tsx        | 21 +++++++++++++++++++
 .../components/CanvasMainPanelContent.tsx     |  3 +++
 .../ImageViewer/CurrentImagePreview.tsx       |  2 ++
 .../web/src/services/events/stores.ts         |  1 +
 4 files changed, 27 insertions(+)
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx
new file mode 100644
index 0000000000..7f6babb739
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx
@@ -0,0 +1,21 @@
+import { Alert, AlertIcon, AlertTitle } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { memo } from 'react';
+import { $progressEventMessage } from 'services/events/stores';
+
+export const CanvasAlertsInvocationProgress = memo(() => {
+  const progressEventMessage = useStore($progressEventMessage);
+
+  if (!progressEventMessage) {
+    return <></>;
+  }
+
+  return (
+    <Alert status="loading" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
+      <AlertIcon />
+      <AlertTitle>{progressEventMessage}</AlertTitle>
+    </Alert>
+  );
+});
+
+CanvasAlertsInvocationProgress.displayName = 'CanvasAlertsInvocationProgress';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
index 9193198065..d8182c373f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
@@ -21,6 +21,8 @@ import { GatedImageViewer } from 'features/gallery/components/ImageViewer/ImageV
 import { memo, useCallback, useRef } from 'react';
 import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
 
+import { CanvasAlertsInvocationProgress } from './CanvasAlerts/CanvasAlertsInvocationProgress';
+
 const MenuContent = () => {
   return (
     <CanvasManagerProviderGate>
@@ -83,6 +85,7 @@ export const CanvasMainPanelContent = memo(() => {
                 {showHUD && <CanvasHUD />}
                 <CanvasAlertsSelectedEntityStatus />
                 <CanvasAlertsPreserveMask />
+                <CanvasAlertsInvocationProgress />
                 <CanvasAlertsSendingToGallery />
               </Flex>
               <Flex position="absolute" top={1} insetInlineEnd={1}>
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
index 9d6ac1efdf..a11d6ebbcc 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
@@ -2,6 +2,7 @@ import { Box, Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppSelector } from 'app/store/storeHooks';
+import { CanvasAlertsInvocationProgress } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress';
 import { CanvasAlertsSendingToCanvas } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo';
 import { DndImage } from 'features/dnd/DndImage';
 import ImageMetadataViewer from 'features/gallery/components/ImageMetadataViewer/ImageMetadataViewer';
@@ -49,6 +50,7 @@ const CurrentImagePreview = () => {
     >
       <ImageContent imageDTO={imageDTO} />
       <Box position="absolute" top={0} insetInlineStart={0}>
+        <CanvasAlertsInvocationProgress />
         <CanvasAlertsSendingToCanvas />
       </Box>
       {shouldShowImageDetails && imageDTO && (
diff --git a/invokeai/frontend/web/src/services/events/stores.ts b/invokeai/frontend/web/src/services/events/stores.ts
index 043fced802..335d7de997 100644
--- a/invokeai/frontend/web/src/services/events/stores.ts
+++ b/invokeai/frontend/web/src/services/events/stores.ts
@@ -10,3 +10,4 @@ export const $lastProgressEvent = atom<S['InvocationProgressEvent'] | null>(null
 export const $progressImage = computed($lastProgressEvent, (val) => val?.image ?? null);
 export const $hasProgressImage = computed($lastProgressEvent, (val) => Boolean(val?.image));
 export const $isProgressFromCanvas = computed($lastProgressEvent, (val) => val?.destination === 'canvas');
+export const $progressEventMessage = computed($lastProgressEvent, (val) => val?.message);