feat(ui): various error toast optimizations

invokeai/frontend/web/public/locales/en.json

@@ -1092,6 +1092,8 @@
         "metadataLoadFailed": "Failed to load metadata",
         "modelAddedSimple": "Model Added to Queue",
         "modelImportCanceled": "Model Import Canceled",
+        "outOfMemoryError": "Out of Memory Error",
+        "outOfMemoryDescription": "Your current generation settings exceed system capacity. Please adjust your settings and try again.",
         "parameters": "Parameters",
         "parameterNotSet": "{{parameter}} not set",
         "parameterSet": "{{parameter}} set",
@@ -1114,6 +1116,7 @@
         "resetInitialImage": "Reset Initial Image",
         "sentToImageToImage": "Sent To Image To Image",
         "sentToUnifiedCanvas": "Sent to Unified Canvas",
+        "sessionReference": "Session Reference",
         "serverError": "Server Error",
         "setAsCanvasInitialImage": "Set as canvas initial image",
         "setCanvasInitialImage": "Set canvas initial image",

invokeai/frontend/web/src/features/system/components/ToastDescription.tsx

@@ -0,0 +1,27 @@
+import { Flex, IconButton, Text } from '@invoke-ai/ui-library';
+import { t } from 'i18next';
+import { PiCopyBold } from 'react-icons/pi';
+
+function handleCopy(sessionId: string) {
+  navigator.clipboard.writeText(sessionId);
+}
+
+export default function ToastDescription({ message, sessionId }: { message: string; sessionId: string }) {
+  return (
+    <Flex flexDir="column">
+      <Text fontSize="md">{message}</Text>
+      <Flex gap="2" alignItems="center">
+        <Text fontSize="sm">
+          {t('toast.sessionReference')}: {sessionId}
+        </Text>
+        <IconButton
+          size="sm"
+          aria-label="Copy"
+          colorScheme="error"
+          icon={<PiCopyBold />}
+          onClick={handleCopy.bind(null, sessionId)}
+        />
+      </Flex>
+    </Flex>
+  );
+}

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

@@ -2,8 +2,9 @@ import type { UseToastOptions } from '@invoke-ai/ui-library';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice, isAnyOf } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
+import { toast } from 'common/util/toast';
+import ToastDescription from 'features/system/components/ToastDescription';
 import { calculateStepPercentage } from 'features/system/util/calculateStepPercentage';
-import { makeToast } from 'features/system/util/makeToast';
 import { t } from 'i18next';
 import { startCase } from 'lodash-es';
 import type { LogLevelName } from 'roarr';
@@ -169,13 +170,29 @@ export const systemSlice = createSlice({
      * Any server error
      */
     builder.addMatcher(isAnyServerError, (state, action) => {
-      state.toastQueue.push(
-        makeToast({
-          title: t('toast.serverError'),
-          status: 'error',
-          description: startCase(action.payload.data.error_type),
-        })
-      );
+      const errorType = startCase(action.payload.data.error_type);
+      const errorId = `toast-${errorType}`;
+      const sessionId = action.payload.data.graph_execution_state_id;
+
+      if (!toast.isActive(errorId)) {
+        if (errorType === 'OutOfMemoryError') {
+          toast({
+            id: errorId,
+            title: t('toast.outOfMemoryError'),
+            status: 'error',
+            description: ToastDescription({ message: t('toast.outOfMemoryDescription'), sessionId }),
+            duration: null,
+          });
+        } else {
+          toast({
+            id: errorId,
+            title: t('toast.serverError'),
+            status: 'error',
+            description: ToastDescription({ message: startCase(action.payload.data.error_type), sessionId }),
+            duration: null,
+          });
+        }
+      }
     });
   },
 });