confirmation before downloading starter bundle

This commit is contained in:
Attila Cseh
2025-08-15 12:09:26 +02:00
committed by psychedelicious
parent f3554b4e1b
commit bb4a50bab2
5 changed files with 58 additions and 23 deletions

View File

@@ -873,6 +873,9 @@
"install": "Install",
"installAll": "Install All",
"installRepo": "Install Repo",
"installBundle": "Install Bundle",
"installBundleMsg1": "Are you sure you want to install the {{bundleName}} bundle?",
"installBundleMsg2": "This bundle will install the following {{count}} models:",
"ipAdapters": "IP Adapters",
"learnMoreAboutSupportedModels": "Learn more about the models we support",
"load": "Load",

View File

@@ -2,7 +2,7 @@ import { Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import { map } from 'es-toolkit/compat';
import { setInstallModelsTabByName } from 'features/modelManagerV2/store/installModelsStore';
import { StarterBundleButton } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterBundle';
import { StarterBundleButton } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterBundleButton';
import { StarterBundleTooltipContentCompact } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterBundleTooltipContentCompact';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';

View File

@@ -1,21 +0,0 @@
import type { ButtonProps } from '@invoke-ai/ui-library';
import { Button } from '@invoke-ai/ui-library';
import { useStarterBundleInstall } from 'features/modelManagerV2/hooks/useStarterBundleInstall';
import { useStarterBundleInstallStatus } from 'features/modelManagerV2/hooks/useStarterBundleInstallStatus';
import { useCallback } from 'react';
import type { S } from 'services/api/types';
export const StarterBundleButton = ({ bundle, ...rest }: { bundle: S['StarterModelBundle'] } & ButtonProps) => {
const { installBundle } = useStarterBundleInstall();
const { install } = useStarterBundleInstallStatus(bundle);
const handleClickBundle = useCallback(() => {
installBundle(bundle);
}, [installBundle, bundle]);
return (
<Button onClick={handleClickBundle} isDisabled={install.length === 0} {...rest}>
{bundle.name}
</Button>
);
};

View File

@@ -0,0 +1,53 @@
import type { ButtonProps } 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';
import type { MouseEvent } from 'react';
import { useCallback } from 'react';
import type { S } from 'services/api/types';
export const StarterBundleButton = ({ bundle, ...rest }: { bundle: S['StarterModelBundle'] } & ButtonProps) => {
const { installBundle } = useStarterBundleInstall();
const { install } = useStarterBundleInstallStatus(bundle);
const { isOpen, onOpen, onClose } = useDisclosure();
const onClickBundle = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
onOpen();
},
[onOpen]
);
const handleInstallBundle = useCallback(() => {
installBundle(bundle);
}, [installBundle, bundle]);
return (
<>
<Button onClick={onClickBundle} isDisabled={install.length === 0} {...rest}>
{bundle.name}
</Button>
<ConfirmationAlertDialog
isOpen={isOpen}
onClose={onClose}
title={t('modelManager.installBundle')}
acceptCallback={handleInstallBundle}
acceptButtonText={t('modelManager.install')}
useInert={false}
>
<Flex rowGap={4} flexDirection="column">
<Text fontWeight="bold">{t('modelManager.installBundleMsg1', { bundleName: bundle.name })}</Text>
<Text>{t('modelManager.installBundleMsg2', { count: install.length })}</Text>
<UnorderedList>
{install.map((model, index) => (
<ListItem key={index} wordBreak="break-all">
<Text>{model.config.name}</Text>
</ListItem>
))}
</UnorderedList>
</Flex>
</ConfirmationAlertDialog>
</>
);
};

View File

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
import { PiInfoBold, PiXBold } from 'react-icons/pi';
import type { GetStarterModelsResponse } from 'services/api/endpoints/models';
import { StarterBundleButton } from './StarterBundle';
import { StarterBundleButton } from './StarterBundleButton';
import { StarterBundleTooltipContent } from './StarterBundleTooltipContent';
import { StarterModelsResultItem } from './StarterModelsResultItem';