(ui) add Canvas Alert for invocation progress messages

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';

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}>