File size: 1,572 Bytes
8a37e0a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | import { Button, Flex, Spacer, useShiftModifier } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { selectDynamicPromptsIsLoading } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
import { QueueIterationsNumberInput } from 'features/queue/components/QueueIterationsNumberInput';
import { useInvoke } from 'features/queue/hooks/useInvoke';
import { memo } from 'react';
import { PiLightningFill, PiSparkleFill } from 'react-icons/pi';
import { QueueButtonTooltip } from './QueueButtonTooltip';
const invoke = 'Invoke';
export const InvokeButton = memo(() => {
const queue = useInvoke();
const shift = useShiftModifier();
const isLoadingDynamicPrompts = useAppSelector(selectDynamicPromptsIsLoading);
return (
<Flex pos="relative" w="200px">
<QueueIterationsNumberInput />
<QueueButtonTooltip prepend={shift}>
<Button
onClick={shift ? queue.queueFront : queue.queueBack}
isLoading={queue.isLoading || isLoadingDynamicPrompts}
loadingText={invoke}
isDisabled={queue.isDisabled}
rightIcon={shift ? <PiLightningFill /> : <PiSparkleFill />}
variant="solid"
colorScheme="invokeYellow"
size="lg"
w="calc(100% - 60px)"
flexShrink={0}
justifyContent="space-between"
spinnerPlacement="end"
>
<span>{invoke}</span>
<Spacer />
</Button>
</QueueButtonTooltip>
</Flex>
);
});
InvokeButton.displayName = 'InvokeQueueBackButton';
|