roshikhan301's picture
Upload 2113 files
8a37e0a verified
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>
);
};