diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterBundleButton.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterBundleButton.tsx index 060fe6cce9..83fe058baf 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterBundleButton.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterBundleButton.tsx @@ -1,5 +1,13 @@ import type { ButtonProps } from '@invoke-ai/ui-library'; -import { Button, ConfirmationAlertDialog, Flex, ListItem, Text, UnorderedList, useDisclosure } from '@invoke-ai/ui-library'; +import { + Button, + ConfirmationAlertDialog, + Flex, + ListItem, + Text, + UnorderedList, + useDisclosure, +} from '@invoke-ai/ui-library'; import { useStarterBundleInstall } from 'features/modelManagerV2/hooks/useStarterBundleInstall'; import { useStarterBundleInstallStatus } from 'features/modelManagerV2/hooks/useStarterBundleInstallStatus'; import { t } from 'i18next'; @@ -29,25 +37,25 @@ export const StarterBundleButton = ({ bundle, ...rest }: { bundle: S['StarterMod {bundle.name} - - {t('modelManager.installBundleMsg1', { bundleName: bundle.name })} - {t('modelManager.installBundleMsg2', { count: install.length })} - - {install.map((model, index) => ( - - {model.config.name} - - ))} - - - - + isOpen={isOpen} + onClose={onClose} + title={t('modelManager.installBundle')} + acceptCallback={handleInstallBundle} + acceptButtonText={t('modelManager.install')} + useInert={false} + > + + {t('modelManager.installBundleMsg1', { bundleName: bundle.name })} + {t('modelManager.installBundleMsg2', { count: install.length })} + + {install.map((model, index) => ( + + {model.config.name} + + ))} + + + + ); };