feat(ui): add useStarterModelsToast

This displays a toast linking to the MM tab when there are no main models installed. It is a no-op when the `starterModels` feature is disabled.

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

@@ -667,6 +667,8 @@
         "modelUpdated": "Model Updated",
         "modelUpdateFailed": "Model Update Failed",
         "name": "Name",
+        "noModelsInstalled": "No Models Installed",
+        "noModelsInstalledDesc1": "Install models with the",
         "noModelSelected": "No Model Selected",
         "none": "none",
         "path": "Path",

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

@@ -11,6 +11,7 @@ import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
 import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal';
 import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
+import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
 import { configChanged } from 'features/system/store/configSlice';
 import { languageSelector } from 'features/system/store/systemSelectors';
 import InvokeTabs from 'features/ui/components/InvokeTabs';
@@ -68,6 +69,9 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
     dispatch(appStarted());
   }, [dispatch]);
 
+
+  useStarterModelsToast()
+
   return (
     <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
       <Box

invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterModelsToast.tsx

@@ -0,0 +1,54 @@
+import { Button, Text, useToast } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { setActiveTab } from 'features/ui/store/uiSlice';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMainModels } from 'services/api/hooks/modelsByType';
+
+const TOAST_ID = 'starterModels';
+
+export const useStarterModelsToast = () => {
+  const { t } = useTranslation();
+  const isEnabled = useFeatureStatus('starterModels').isFeatureEnabled;
+  const [didToast, setDidToast] = useState(false);
+  const [mainModels, { data }] = useMainModels();
+  const toast = useToast();
+
+  useEffect(() => {
+    if (toast.isActive(TOAST_ID)) {
+      return;
+    }
+    if (data && mainModels.length === 0 && !didToast && isEnabled) {
+      toast({
+        id: TOAST_ID,
+        title: t('modelManager.noModelsInstalled'),
+        description: <ToastDescription />,
+        status: 'info',
+        isClosable: true,
+        duration: null,
+        onCloseComplete: () => setDidToast(true),
+      });
+    }
+  }, [data, didToast, isEnabled, mainModels.length, t, toast]);
+};
+
+const ToastDescription = () => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const toast = useToast();
+
+  const onClick = useCallback(() => {
+    dispatch(setActiveTab('modelManager'));
+    toast.close(TOAST_ID);
+  }, [dispatch, toast]);
+
+  return (
+    <Text fontSize="md">
+      {t('modelManager.noModelsInstalledDesc1')}{' '}
+      <Button onClick={onClick} variant="link" color="base.50" flexGrow={0}>
+        {t('modelManager.modelManager')}.
+      </Button>
+    </Text>
+  );
+};