File size: 2,088 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 |
import { ExternalLink, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectConfigSlice } from 'features/system/store/configSlice';
import type { ReactNode } from 'react';
import { useMemo } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
const selectIsLocal = createSelector(selectConfigSlice, (config) => config.isLocal);
const components = {
StrongComponent: <Text as="span" color="white" fontSize="sm" fontWeight="semibold" />,
};
export const WhatsNew = () => {
const { t } = useTranslation();
const { data } = useGetAppVersionQuery();
const isLocal = useAppSelector(selectIsLocal);
const items = useMemo<ReactNode[]>(() => {
if (data?.highlights?.length) {
return data.highlights.map((highlight, index) => <ListItem key={`${highlight}-${index}`}>{highlight}</ListItem>);
}
const tKeys = t<string, { returnObjects: true }, string[]>('whatsNew.items', {
returnObjects: true,
});
return tKeys.map((key, index) => (
<ListItem key={`${key}-${index}`}>
<Trans i18nKey={key} components={components} />
</ListItem>
));
}, [data?.highlights, t]);
return (
<Flex gap={4} flexDir="column">
<UnorderedList fontSize="sm">{items}</UnorderedList>
<Flex flexDir="column" gap={1}>
<ExternalLink
fontSize="sm"
fontWeight="semibold"
label={t('whatsNew.readReleaseNotes')}
href={
isLocal
? `https://github.com/invoke-ai/InvokeAI/releases/tag/v${data?.version}`
: 'https://support.invoke.ai/support/solutions/articles/151000178246'
}
/>
<ExternalLink
fontSize="sm"
fontWeight="semibold"
label={t('whatsNew.watchRecentReleaseVideos')}
href="https://www.youtube.com/@invokeai/videos"
/>
</Flex>
</Flex>
);
};
|