File size: 2,886 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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import type { ChakraProps } from '@invoke-ai/ui-library';
import { Flex, FormControl, FormLabel, ListItem, OrderedList, Spinner, Text } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import {
selectDynamicPromptsIsError,
selectDynamicPromptsIsLoading,
selectDynamicPromptsParsingError,
selectDynamicPromptsPrompts,
} from 'features/dynamicPrompts/store/dynamicPromptsSlice';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiWarningCircleBold } from 'react-icons/pi';
const listItemStyles: ChakraProps['sx'] = {
'&::marker': { color: 'base.500' },
};
const ParamDynamicPromptsPreview = () => {
const { t } = useTranslation();
const parsingError = useAppSelector(selectDynamicPromptsParsingError);
const isError = useAppSelector(selectDynamicPromptsIsError);
const isLoading = useAppSelector(selectDynamicPromptsIsLoading);
const prompts = useAppSelector(selectDynamicPromptsPrompts);
const label = useMemo(() => {
let _label = `${t('dynamicPrompts.promptsPreview')} (${prompts.length})`;
if (parsingError) {
_label += ` - ${parsingError}`;
}
return _label;
}, [parsingError, prompts.length, t]);
if (isError) {
return (
<Flex w="full" h="full" layerStyle="second" alignItems="center" justifyContent="center" p={8}>
<IAINoContentFallback icon={PiWarningCircleBold} label="Problem generating prompts" />
</Flex>
);
}
return (
<FormControl orientation="vertical" w="full" h="full" isInvalid={Boolean(parsingError || isError)}>
<InformationalPopover feature="dynamicPrompts" inPortal={false}>
<FormLabel>{label}</FormLabel>
</InformationalPopover>
<Flex w="full" h="full" pos="relative" layerStyle="first" p={4} borderRadius="base">
<ScrollableContent>
<OrderedList stylePosition="inside" ms={0}>
{prompts.map((prompt, i) => (
<ListItem fontSize="sm" key={`${prompt}.${i}`} sx={listItemStyles}>
<Text as="span">{prompt}</Text>
</ListItem>
))}
</OrderedList>
</ScrollableContent>
{isLoading && (
<Flex
pos="absolute"
w="full"
h="full"
top={0}
insetInlineStart={0}
layerStyle="second"
opacity={0.7}
alignItems="center"
justifyContent="center"
>
<Spinner />
</Flex>
)}
</Flex>
</FormControl>
);
};
export default memo(ParamDynamicPromptsPreview);
|