fix(ui): update types for top-level component

invokeai/frontend/web/index.d.ts

@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react';
 import { IAIPopoverProps } from '../web/src/common/components/IAIPopover';
 import { IAIIconButtonProps } from '../web/src/common/components/IAIIconButton';
 import { InvokeTabName } from 'features/ui/store/tabMap';
+import { PartialAppConfig } from 'app/invokeai';
 
 export {};
 
@@ -77,11 +78,8 @@ declare module '@invoke-ai/invoke-ai-ui' {
 
 interface InvokeProps extends PropsWithChildren {
   apiUrl?: string;
-  disabledPanels?: string[];
-  disabledTabs?: InvokeTabName[];
   token?: string;
-  shouldTransformUrls?: boolean;
-  shouldFetchImages?: boolean;
+  config?: PartialAppConfig;
 }
 
 declare function Invoke(props: InvokeProps): JSX.Element;

invokeai/frontend/web/src/app/App.tsx

@@ -30,7 +30,6 @@ interface Props extends PropsWithChildren {
 }
 
 const App = ({ config = {}, children }: Props) => {
-  useToastWatcher();
   useGlobalHotkeys();
 
   const currentTheme = useAppSelector((state) => state.ui.currentTheme);
@@ -57,6 +56,8 @@ const App = ({ config = {}, children }: Props) => {
     setLoadingOverridden(true);
   }, []);
 
+  useToastWatcher(config);
+
   return (
     <Grid w="100vw" h="100vh" position="relative">
       {isLightboxEnabled && <Lightbox />}

invokeai/frontend/web/src/app/invokeai.d.ts

@@ -376,6 +376,7 @@ export declare type AppConfig = {
   disabledTabs: InvokeTabName[];
   disabledFeatures: AppFeature[];
   canRestoreDeletedImagesFromBin: boolean;
+  displayToasts: boolean;
   sd: {
     iterations: {
       initial: number;

invokeai/frontend/web/src/features/system/hooks/useToastWatcher.ts

@@ -3,6 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { toastQueueSelector } from 'features/system/store/systemSelectors';
 import { clearToastQueue } from 'features/system/store/systemSlice';
 import { useEffect } from 'react';
+import { PartialAppConfig } from 'app/invokeai';
 
 export type MakeToastArg = string | UseToastOptions;
 
@@ -19,16 +20,19 @@ export const makeToast = (arg: MakeToastArg): UseToastOptions => {
   return { status: 'info', isClosable: true, duration: 2500, ...arg };
 };
 
-const useToastWatcher = () => {
+const useToastWatcher = (config: PartialAppConfig) => {
   const dispatch = useAppDispatch();
   const toastQueue = useAppSelector(toastQueueSelector);
   const toast = useToast();
+
   useEffect(() => {
+    if (!config!.displayToasts) return;
+
     toastQueue.forEach((t) => {
       toast(t);
     });
     toastQueue.length > 0 && dispatch(clearToastQueue());
-  }, [dispatch, toast, toastQueue]);
+  }, [dispatch, toast, toastQueue, config]);
 };
 
 export default useToastWatcher;

invokeai/frontend/web/src/features/system/store/configSlice.ts

@@ -9,6 +9,7 @@ const initialConfigState: AppConfig = {
   disabledTabs: [],
   disabledFeatures: [],
   canRestoreDeletedImagesFromBin: true,
+  displayToasts: true,
   sd: {
     iterations: {
       initial: 1,

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -498,6 +498,7 @@ export const systemSlice = createSlice({
       state.wasErrorSeen = true;
       state.progressImage = null;
       state.isProcessing = false;
+      state.currentStatus = i18n.t('common.statusError');
 
       state.toastQueue.push(
         makeToast({ title: i18n.t('toast.serverError'), status: 'error' })