diff --git a/invokeai/frontend/web/src/app/types/invokeai.ts b/invokeai/frontend/web/src/app/types/invokeai.ts
index bee61eb49a..8ec968e269 100644
--- a/invokeai/frontend/web/src/app/types/invokeai.ts
+++ b/invokeai/frontend/web/src/app/types/invokeai.ts
@@ -25,7 +25,8 @@ export type AppFeature =
| 'invocationCache'
| 'bulkDownload'
| 'starterModels'
- | 'hfToken';
+ | 'hfToken'
+ | 'invocationProgressAlert';
/**
* A disable-able Stable Diffusion feature
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx
index 387f5c2ef3..3368b45713 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx
@@ -1,17 +1,17 @@
import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { useAppSelector } from 'app/store/storeHooks';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { selectSystemShouldShowInvocationProgressDetail } from 'features/system/store/systemSlice';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
-import { $canvasProgressMessage } from 'services/events/stores';
+import { $invocationProgressMessage } from 'services/events/stores';
-export const CanvasAlertsInvocationProgress = memo(() => {
+const CanvasAlertsInvocationProgressContent = memo(() => {
const { t } = useTranslation();
- const progressEventMessage = useStore($canvasProgressMessage);
- const shouldShowInvocationProgressDetail = useAppSelector(selectSystemShouldShowInvocationProgressDetail);
+ const invocationProgressMessage = useStore($invocationProgressMessage);
- if (!shouldShowInvocationProgressDetail || !progressEventMessage) {
+ if (!invocationProgressMessage) {
return null;
}
@@ -19,9 +19,27 @@ export const CanvasAlertsInvocationProgress = memo(() => {
{t('common.generating')}
- {progressEventMessage}
+ {invocationProgressMessage}
);
});
+CanvasAlertsInvocationProgressContent.displayName = 'CanvasAlertsInvocationProgressContent';
+
+export const CanvasAlertsInvocationProgress = memo(() => {
+ const isProgressMessageAlertEnabled = useFeatureStatus('invocationProgressAlert');
+ const shouldShowInvocationProgressDetail = useAppSelector(selectSystemShouldShowInvocationProgressDetail);
+
+ // The alert is disabled at the system level
+ if (!isProgressMessageAlertEnabled) {
+ return null;
+ }
+
+ // The alert is disabled at the user level
+ if (!shouldShowInvocationProgressDetail) {
+ return null;
+ }
+
+ return ;
+});
CanvasAlertsInvocationProgress.displayName = 'CanvasAlertsInvocationProgress';
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 768691ad48..ea682485b2 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
@@ -58,7 +58,6 @@ const CurrentImagePreview = () => {
pointerEvents="none"
alignItems="flex-start"
>
-
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
index 44effa4144..343f937b94 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
@@ -77,7 +77,7 @@ const SettingsMenu = () => {
{t('common.hotkeysLabel')}
-
+
}>
{t('common.settingsLabel')}
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
index df90176adf..3117a39a8e 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
@@ -26,6 +26,7 @@ import { SettingsDeveloperLogLevel } from 'features/system/components/SettingsMo
import { SettingsDeveloperLogNamespaces } from 'features/system/components/SettingsModal/SettingsDeveloperLogNamespaces';
import { useClearIntermediates } from 'features/system/components/SettingsModal/useClearIntermediates';
import { StickyScrollable } from 'features/system/components/StickyScrollable';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import {
selectSystemShouldAntialiasProgressImage,
selectSystemShouldConfirmOnDelete,
@@ -58,7 +59,6 @@ type ConfigOptions = {
shouldShowResetWebUiText?: boolean;
shouldShowClearIntermediates?: boolean;
shouldShowLocalizationToggle?: boolean;
- shouldShowInvocationProgressDetailToggle?: boolean;
};
const defaultConfig: ConfigOptions = {
@@ -66,7 +66,6 @@ const defaultConfig: ConfigOptions = {
shouldShowResetWebUiText: true,
shouldShowClearIntermediates: true,
shouldShowLocalizationToggle: true,
- shouldShowInvocationProgressDetailToggle: true,
};
type SettingsModalProps = {
@@ -108,6 +107,7 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps)
const shouldEnableModelDescriptions = useAppSelector(selectSystemShouldEnableModelDescriptions);
const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
const shouldShowInvocationProgressDetail = useAppSelector(selectSystemShouldShowInvocationProgressDetail);
+ const isInvocationProgressAlertEnabled = useFeatureStatus('invocationProgressAlert');
const onToggleConfirmOnNewSession = useCallback(() => {
dispatch(shouldConfirmOnNewSessionToggled());
}, [dispatch]);
@@ -233,7 +233,7 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps)
onChange={handleChangeShouldAntialiasProgressImage}
/>
- {Boolean(config?.shouldShowInvocationProgressDetailToggle) && (
+ {isInvocationProgressAlertEnabled && (
{t('settings.showDetailedInvocationProgress')}
(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 $canvasProgressMessage = computed($lastProgressEvent, (val) => {
+export const $invocationProgressMessage = computed($lastProgressEvent, (val) => {
if (!val) {
return null;
}