diff --git a/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.css.ts b/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.css.ts index 7500df128..c0b1827aa 100644 --- a/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.css.ts +++ b/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.css.ts @@ -47,15 +47,19 @@ export const video = style({ height: 'calc(100% + 4px)', }); +export const mainContent = style({ + display: 'flex', + flexDirection: 'column', + gap: 4, + padding: '20px 24px 0px 24px', +}); export const title = style({ - padding: '20px 24px 8px 24px', fontSize: cssVar('fontH6'), fontWeight: 600, lineHeight: '26px', color: cssVar('textPrimaryColor'), }); export const description = style({ - padding: '0px 24px', fontSize: cssVar('fontBase'), lineHeight: '24px', minHeight: 48, @@ -66,14 +70,45 @@ export const link = style({ color: cssVar('textEmphasisColor'), textDecoration: 'underline', }); +export const privacy = style({ + padding: '20px 24px 0px 24px', + color: cssVar('textSecondaryColor'), + fontSize: cssVar('fontXs'), + fontWeight: 400, + lineHeight: '20px', + height: 44, + transition: 'all 0.3s', + overflow: 'hidden', + + selectors: { + '&[aria-hidden="true"]': { + paddingTop: 0, + height: 0, + }, + }, +}); +export const privacyLink = style({ + color: 'inherit', + textDecoration: 'underline', +}); export const footer = style({ + width: '100%', padding: '20px 28px', gap: 12, display: 'flex', - justifyContent: 'flex-end', + justifyContent: 'space-between', + selectors: { + '&[data-is-last="true"], &[data-is-first="true"]': { + justifyContent: 'flex-end', + }, + }, }); - -export const skipButton = style({ - fontWeight: 500, +export const baseActionButton = style({ + fontSize: cssVar('fontBase'), + selectors: { + '&.large': { + fontWeight: 500, + }, + }, }); diff --git a/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx b/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx index 8ae332408..ff212b7d9 100644 --- a/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx +++ b/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx @@ -1,9 +1,11 @@ import { Button, Modal } from '@affine/component'; import { openSettingModalAtom } from '@affine/core/atoms'; import { useBlurRoot } from '@affine/core/hooks/use-blur-root'; +import { SubscriptionService } from '@affine/core/modules/cloud'; import { WorkspaceFlavour } from '@affine/env/workspace'; import { Trans } from '@affine/i18n'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; +import { ArrowLeftSmallIcon } from '@blocksuite/icons'; import { useLiveData, useServices, @@ -68,7 +70,10 @@ const getPlayList = (t: Translate): Array => [ export const AIOnboardingGeneral = ({ onDismiss, }: BaseAIOnboardingDialogProps) => { - const { workspaceService } = useServices({ WorkspaceService }); + const { workspaceService, subscriptionService } = useServices({ + WorkspaceService, + SubscriptionService, + }); const videoWrapperRef = useRef(null); const prevVideoRef = useRef(null); @@ -76,6 +81,7 @@ export const AIOnboardingGeneral = ({ workspaceService.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD; const t = useAFFiNEI18N(); const open = useLiveData(showAIOnboardingGeneral$); + const aiSubscription = useLiveData(subscriptionService.subscription.ai$); const [index, setIndex] = useState(0); const list = useMemo(() => getPlayList(t), [t]); const setSettingModal = useSetAtom(openSettingModalAtom); @@ -96,7 +102,6 @@ export const AIOnboardingGeneral = ({ }); closeAndDismiss(); }, [closeAndDismiss, setSettingModal]); - const onClose = useCallback(() => showAIOnboardingGeneral$.next(false), []); const onPrev = useCallback(() => { setIndex(i => Math.max(0, i - 1)); }, []); @@ -104,6 +109,10 @@ export const AIOnboardingGeneral = ({ setIndex(i => Math.min(list.length - 1, i + 1)); }, [list.length]); + useEffect(() => { + subscriptionService.subscription.revalidate(); + }, [subscriptionService]); + const videoRenderer = useCallback( ({ video }: PlayListItem, index: number) => (
@@ -152,7 +161,10 @@ export const AIOnboardingGeneral = ({ return isCloud ? ( showAIOnboardingGeneral$.next(v)} + onOpenChange={v => { + showAIOnboardingGeneral$.next(v); + if (!v && isLast) onDismiss(); + }} contentOptions={{ className: styles.dialog }} overlayOptions={{ className: baseStyles.dialogOverlay }} > @@ -166,7 +178,7 @@ export const AIOnboardingGeneral = ({ itemRenderer={videoRenderer} /> -
+
items={list} activeIndex={index} @@ -181,28 +193,76 @@ export const AIOnboardingGeneral = ({ />
-